Skip to content

Commit

Permalink
ReactDOM.useEvent: Add more scaffolding for useEvent hook (#18271)
Browse files Browse the repository at this point in the history
  • Loading branch information
trueadm authored Mar 10, 2020
1 parent a3bf668 commit 160505b
Show file tree
Hide file tree
Showing 10 changed files with 215 additions and 1 deletion.
16 changes: 16 additions & 0 deletions packages/react-debug-tools/src/ReactDebugHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ type HookLogEntry = {
...
};

type ReactDebugListenerMap = {|
clear: () => void,
setListener: (instance: EventTarget, callback: ?(Event) => void) => void,
|};

let hookLog: Array<HookLogEntry> = [];

// Primitives
Expand Down Expand Up @@ -256,6 +261,16 @@ function useTransition(
return [callback => {}, false];
}

const noOp = () => {};

function useEvent(event: any): ReactDebugListenerMap {
hookLog.push({primitive: 'Event', stackError: new Error(), value: event});
return {
clear: noOp,
setListener: noOp,
};
}

function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
// useDeferredValue() composes multiple hooks internally.
// Advance the current hook index the same number of times
Expand Down Expand Up @@ -285,6 +300,7 @@ const Dispatcher: DispatcherType = {
useResponder,
useTransition,
useDeferredValue,
useEvent,
};

// Inspect
Expand Down
7 changes: 7 additions & 0 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ import type {
ReactDOMEventResponder,
ReactDOMEventResponderInstance,
ReactDOMFundamentalComponentInstance,
ReactDOMListener,
ReactDOMListenerEvent,
ReactDOMListenerMap,
} from 'shared/ReactDOMTypes';
import {
mountEventResponder,
Expand All @@ -70,6 +73,10 @@ import {
IS_PASSIVE,
} from 'legacy-events/EventSystemFlags';

export type ReactListenerEvent = ReactDOMListenerEvent;
export type ReactListenerMap = ReactDOMListenerMap;
export type ReactListener = ReactDOMListener;

export type Type = string;
export type Props = {
autoFocus?: boolean,
Expand Down
9 changes: 9 additions & 0 deletions packages/react-dom/src/events/DOMModernPluginEventSystem.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
import type {Fiber} from 'react-reconciler/src/ReactFiber';
import type {PluginModule} from 'legacy-events/PluginModuleType';
import type {ReactSyntheticEvent} from 'legacy-events/ReactSyntheticEventType';
import type {ReactDOMListener} from 'shared/ReactDOMTypes';

import {registrationNameDependencies} from 'legacy-events/EventPluginRegistry';
import {batchedEventUpdates} from 'legacy-events/ReactGenericBatching';
Expand Down Expand Up @@ -296,3 +297,11 @@ export function dispatchEventForPluginEventSystem(
),
);
}

export function attachElementListener(listener: ReactDOMListener): void {
// TODO
}

export function detachElementListener(listener: ReactDOMListener): void {
// TODO
}
Original file line number Diff line number Diff line change
Expand Up @@ -1039,4 +1039,40 @@ describe('DOMModernPluginEventSystem', () => {
expect(log).toEqual([]);
expect(onDivClick).toHaveBeenCalledTimes(0);
});

describe('ReactDOM.useEvent', () => {
beforeEach(() => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.enableModernEventSystem = true;
ReactFeatureFlags.enableUseEventAPI = true;

React = require('react');
ReactDOM = require('react-dom');
Scheduler = require('scheduler');
ReactDOMServer = require('react-dom/server');
});

if (!__EXPERIMENTAL__) {
it("empty test so Jest doesn't complain", () => {});
return;
}

it('should create the same event listener map', () => {
let listenerMaps = [];

function Test() {
const listenerMap = ReactDOM.unstable_useEvent('click');

listenerMaps.push(listenerMap);

return <div />;
}

ReactDOM.render(<Test />, container);
ReactDOM.render(<Test />, container);
expect(listenerMaps.length).toEqual(2);
expect(listenerMaps[0]).toEqual(listenerMaps[1]);
});
});
});
10 changes: 10 additions & 0 deletions packages/react-dom/src/server/ReactPartialRendererHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import type {
ReactEventResponderListener,
} from 'shared/ReactTypes';
import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig';
import type {ReactDOMListenerMap} from 'shared/ReactDOMTypes';

import {validateContextBounds} from './ReactPartialRendererContext';

import invariant from 'shared/invariant';
Expand Down Expand Up @@ -474,6 +476,13 @@ function useTransition(
return [startTransition, false];
}

function useEvent(event: any): ReactDOMListenerMap {
return {
clear: noop,
setListener: noop,
};
}

function noop(): void {}

export let currentThreadID: ThreadID = 0;
Expand All @@ -500,4 +509,5 @@ export const Dispatcher: DispatcherType = {
useResponder,
useDeferredValue,
useTransition,
useEvent,
};
4 changes: 4 additions & 0 deletions packages/react-native-renderer/src/ReactFabricHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ export type UpdatePayload = Object;
export type TimeoutHandle = TimeoutID;
export type NoTimeout = -1;

export type ReactListenerEvent = Object;
export type ReactListenerMap = Object;
export type ReactListener = Object;

// TODO: Remove this conditional once all changes have propagated.
if (registerEventHandler) {
/**
Expand Down
4 changes: 4 additions & 0 deletions packages/react-native-renderer/src/ReactNativeHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';

const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;

export type ReactListenerEvent = Object;
export type ReactListenerMap = Object;
export type ReactListener = Object;

export type Type = string;
export type Props = Object;
export type Container = number;
Expand Down
Loading

0 comments on commit 160505b

Please sign in to comment.