Skip to content

Commit

Permalink
Remove the deprecated React Flare event system (#19520)
Browse files Browse the repository at this point in the history
  • Loading branch information
@trueadm
trueadm authored Aug 5, 2020
1 parent 8d57ca5 commit b61174f
Show file tree
Hide file tree
Showing 92 changed files with 125 additions and 12,325 deletions.
20 changes: 0 additions & 20 deletions packages/react-art/src/ReactARTHostConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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.');
}
Expand Down
19 changes: 0 additions & 19 deletions packages/react-debug-tools/src/ReactDebugHooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import type {
MutableSourceSubscribeFn,
ReactContext,
ReactProviderType,
ReactEventResponder,
ReactEventResponderListener,
} from 'shared/ReactTypes';
import type {
Fiber,
Expand Down Expand Up @@ -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] {
Expand Down Expand Up @@ -335,7 +317,6 @@ const Dispatcher: DispatcherType = {
useReducer,
useRef,
useState,
useResponder,
useTransition,
useMutableSource,
useDeferredValue,
Expand Down
46 changes: 0 additions & 46 deletions packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
View file

This file was deleted.

3 changes: 0 additions & 3 deletions packages/react-devtools-shared/src/backend/ReactSymbols.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)';

Expand Down
165 changes: 25 additions & 140 deletions packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ let ReactFeatureFlags;
let Suspense;
let SuspenseList;
let act;
let useHover;

function dispatchMouseEvent(to, from) {
if (!to) {
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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));

Expand All @@ -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() {
Expand All @@ -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 />);

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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 />);

Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit b61174f

Please sign in to comment.