Remove the deprecated React Flare event system (#19520)

Author: trueadm

packages/react-art/src/ReactARTHostConfig.js

@@ -10,10 +10,6 @@ import Mode from 'art/modes/current';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
-import type {
-  ReactEventResponder,
-  ReactEventResponderInstance,
-} from 'shared/ReactTypes';
 
 const pooledTransform = new Transform();
 
@@ -429,22 +425,6 @@ export function clearContainer(container) {
   // TODO Implement this
 }
 
-export function DEPRECATED_mountResponderInstance(
-  responder: ReactEventResponder<any, any>,
-  responderInstance: ReactEventResponderInstance<any, any>,
-  props: Object,
-  state: Object,
-  instance: Object,
-) {
-  throw new Error('Not yet implemented.');
-}
-
-export function DEPRECATED_unmountResponderInstance(
-  responderInstance: ReactEventResponderInstance<any, any>,
-): void {
-  throw new Error('Not yet implemented.');
-}
-
 export function getFundamentalComponentInstance(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -13,8 +13,6 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
   ReactProviderType,
-  ReactEventResponder,
-  ReactEventResponderListener,
 } from 'shared/ReactTypes';
 import type {
   Fiber,
@@ -260,22 +258,6 @@ function useMutableSource<Source, Snapshot>(
   return value;
 }
 
-function useResponder(
-  responder: ReactEventResponder<any, any>,
-  listenerProps: Object,
-): ReactEventResponderListener<any, any> {
-  // Don't put the actual event responder object in, just its displayName
-  const value = {
-    responder: responder.displayName || 'EventResponder',
-    props: listenerProps,
-  };
-  hookLog.push({primitive: 'Responder', stackError: new Error(), value});
-  return {
-    responder,
-    props: listenerProps,
-  };
-}
-
 function useTransition(
   config: SuspenseConfig | null | void,
 ): [(() => void) => void, boolean] {
@@ -335,7 +317,6 @@ const Dispatcher: DispatcherType = {
   useReducer,
   useRef,
   useState,
-  useResponder,
   useTransition,
   useMutableSource,
   useDeferredValue,

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

@@ -58,9 +58,6 @@ export const PROFILER_SYMBOL_STRING = 'Symbol(react.profiler)';
 export const PROVIDER_NUMBER = 0xeacd;
 export const PROVIDER_SYMBOL_STRING = 'Symbol(react.provider)';
 
-export const RESPONDER_NUMBER = 0xead6;
-export const RESPONDER_SYMBOL_STRING = 'Symbol(react.responder)';
-
 export const SCOPE_NUMBER = 0xead7;
 export const SCOPE_SYMBOL_STRING = 'Symbol(react.scope)';
 

packages/react-devtools-shared/src/backend/ReactSymbols.js

@@ -17,7 +17,6 @@ let ReactFeatureFlags;
 let Suspense;
 let SuspenseList;
 let act;
-let useHover;
 
 function dispatchMouseEvent(to, from) {
   if (!to) {
@@ -76,7 +75,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableSuspenseCallback = true;
-    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+    ReactFeatureFlags.enableCreateEventHandleAPI = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
@@ -2202,8 +2201,10 @@ describe('ReactDOMServerPartialHydration', () => {
   });
 
   // @gate experimental
-  it('does not invoke an event on a hydrated EventResponder until it commits', async () => {
+  it('does not invoke an event on a hydrated event handle until it commits', async () => {
+    const setClick = ReactDOM.unstable_createEventHandle('click');
     let suspend = false;
+    let isServerRendering = true;
     let resolve;
     const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
@@ -2216,17 +2217,15 @@ describe('ReactDOMServerPartialHydration', () => {
     }
 
     const onEvent = jest.fn();
-    const TestResponder = React.DEPRECATED_createResponder(
-      'TestEventResponder',
-      {
-        targetEventTypes: ['click'],
-        onEvent,
-      },
-    );
 
     function Button() {
-      const listener = React.DEPRECATED_useResponder(TestResponder, {});
-      return <a DEPRECATED_flareListeners={listener}>Click me</a>;
+      const ref = React.useRef(null);
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, onEvent);
+        });
+      }
+      return <a ref={ref}>Click me</a>;
     }
 
     function App() {
@@ -2253,6 +2252,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
+    isServerRendering = false;
     const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
@@ -2364,23 +2364,25 @@ describe('ReactDOMServerPartialHydration', () => {
   });
 
   // @gate experimental
-  it('invokes discrete events on nested suspense boundaries in a root (responder system)', async () => {
+  it('invokes discrete events on nested suspense boundaries in a root (createEventHandle)', async () => {
     let suspend = false;
+    let isServerRendering = true;
     let resolve;
     const promise = new Promise(resolvePromise => (resolve = resolvePromise));
 
     const onEvent = jest.fn();
-    const TestResponder = React.DEPRECATED_createResponder(
-      'TestEventResponder',
-      {
-        targetEventTypes: ['click'],
-        onEvent,
-      },
-    );
+    const setClick = ReactDOM.unstable_createEventHandle('click');
 
     function Button() {
-      const listener = React.DEPRECATED_useResponder(TestResponder, {});
-      return <a DEPRECATED_flareListeners={listener}>Click me</a>;
+      const ref = React.useRef(null);
+
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, onEvent);
+        });
+      }
+
+      return <a ref={ref}>Click me</a>;
     }
 
     function Child() {
@@ -2416,6 +2418,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
+    isServerRendering = false;
     const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
@@ -2704,124 +2707,6 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
-  it('blocks only on the last continuous event (Responder system)', async () => {
-    useHover = require('react-interactions/events/hover').useHover;
-
-    let suspend1 = false;
-    let resolve1;
-    const promise1 = new Promise(resolvePromise => (resolve1 = resolvePromise));
-    let suspend2 = false;
-    let resolve2;
-    const promise2 = new Promise(resolvePromise => (resolve2 = resolvePromise));
-
-    function First({text}) {
-      if (suspend1) {
-        throw promise1;
-      } else {
-        return 'Hello';
-      }
-    }
-
-    function Second({text}) {
-      if (suspend2) {
-        throw promise2;
-      } else {
-        return 'World';
-      }
-    }
-
-    const ops = [];
-
-    function App() {
-      const listener1 = useHover({
-        onHoverStart() {
-          ops.push('Hover Start First');
-        },
-        onHoverEnd() {
-          ops.push('Hover End First');
-        },
-      });
-      const listener2 = useHover({
-        onHoverStart() {
-          ops.push('Hover Start Second');
-        },
-        onHoverEnd() {
-          ops.push('Hover End Second');
-        },
-      });
-      return (
-        <div>
-          <Suspense fallback="Loading First...">
-            <span DEPRECATED_flareListeners={listener1} />
-            {/* We suspend after to test what happens when we eager
-                attach the listener. */}
-            <First />
-          </Suspense>
-          <Suspense fallback="Loading Second...">
-            <span DEPRECATED_flareListeners={listener2}>
-              <Second />
-            </span>
-          </Suspense>
-        </div>
-      );
-    }
-
-    const finalHTML = ReactDOMServer.renderToString(<App />);
-    const container = document.createElement('div');
-    container.innerHTML = finalHTML;
-
-    // We need this to be in the document since we'll dispatch events on it.
-    document.body.appendChild(container);
-
-    const appDiv = container.getElementsByTagName('div')[0];
-    const firstSpan = appDiv.getElementsByTagName('span')[0];
-    const secondSpan = appDiv.getElementsByTagName('span')[1];
-    expect(firstSpan.textContent).toBe('');
-    expect(secondSpan.textContent).toBe('World');
-
-    // On the client we don't have all data yet but we want to start
-    // hydrating anyway.
-    suspend1 = true;
-    suspend2 = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
-    dispatchMouseEvent(appDiv, null);
-    dispatchMouseEvent(firstSpan, appDiv);
-    dispatchMouseEvent(secondSpan, firstSpan);
-
-    // Neither target is yet hydrated.
-    expect(ops).toEqual([]);
-
-    // Resolving the second promise so that rendering can complete.
-    suspend2 = false;
-    resolve2();
-    await promise2;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
-    // We've unblocked the current hover target so we should be
-    // able to replay it now.
-    expect(ops).toEqual(['Hover Start Second']);
-
-    // Resolving the first promise has no effect now.
-    suspend1 = false;
-    resolve1();
-    await promise1;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
-    expect(ops).toEqual(['Hover Start Second']);
-
-    document.body.removeChild(container);
-  });
-
   // @gate experimental
   it('finishes normal pri work before continuing to hydrate a retry', async () => {
     let suspend = false;