Deprecate injecting custom event plugins (#11690)
* Deprecate injecting custom event plugins * Fix up tests * Fix CI * oh noes
Dan Abramov committed
Nov 29, 2017 at 17:48 UTC
3e64b18540d474c88c440080681673faea5d3186
4 files changed
+61
packages/events/EventPluginRegistry.js
+22
@@ -15,10 +15,13 @@ import type {
15
} from './PluginModuleType';
16
17
import invariant from 'fbjs/lib/invariant';
18
+import lowPriorityWarning from 'shared/lowPriorityWarning';
19
20
type NamesToPlugins = {[key: PluginName]: PluginModule<AnyNativeEvent>};
21
type EventPluginOrder = null | Array<PluginName>;
22
23
+var shouldWarnOnInjection = false;
24
+
25
/**
26
* Injectable ordering of event plugins.
27
*/
@@ -29,6 +32,10 @@ var eventPluginOrder: EventPluginOrder = null;
32
*/
33
var namesToPlugins: NamesToPlugins = {};
34
35
+export function enableWarningOnInjection() {
36
+ shouldWarnOnInjection = true;
37
+}
38
+
39
/**
40
* Recomputes the plugin list using the injected plugins and plugin ordering.
41
*
@@ -221,6 +228,21 @@ export function injectEventPluginOrder(
228
export function injectEventPluginsByName(
229
injectedNamesToPlugins: NamesToPlugins,
230
): void {
231
+ if (__DEV__) {
232
+ if (shouldWarnOnInjection) {
233
+ const names = Object.keys(injectedNamesToPlugins).join(', ');
234
+ lowPriorityWarning(
235
+ false,
236
+ 'Injecting custom event plugins (%s) is deprecated ' +
237
+ 'and will not work in React 17+. Please update your code ' +
238
+ 'to not depend on React internals. The stack trace for this ' +
239
+ 'warning should reveal the library that is using them. ' +
240
+ 'See https://github.com/facebook/react/issues/11689 for a discussion.',
241
+ names,
242
+ );
243
+ }
244
+ }
245
+
246
var isOrderingDirty = false;
247
for (var pluginName in injectedNamesToPlugins) {
248
if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
+10
@@ -132,11 +132,21 @@ describe('ReactBrowserEventEmitter', () => {
132
133
idCallOrder = [];
134
tapMoveThreshold = TapEventPlugin.tapMoveThreshold;
135
+ spyOnDev(console, 'warn');
136
EventPluginHub.injection.injectEventPluginsByName({
137
TapEventPlugin: TapEventPlugin,
138
});
139
});
140
141
+ afterEach(() => {
142
+ if (__DEV__) {
143
+ expect(console.warn.calls.count()).toBe(1);
144
+ expect(console.warn.calls.argsFor(0)[0]).toContain(
145
+ 'Injecting custom event plugins (TapEventPlugin) is deprecated',
146
+ );
147
+ }
148
+ });
149
+
150
it('should store a listener correctly', () => {
151
registerSimpleTestHandler();
152
var listener = getListener(CHILD, ON_CLICK_KEY);
packages/react-dom/src/__tests__/ReactDOM-test.js
+22
@@ -373,6 +373,28 @@ describe('ReactDOM', () => {
373
}
374
});
375
376
+ // https://github.com/facebook/react/issues/11689
377
+ it('should warn when attempting to inject an event plugin', () => {
378
+ spyOnDev(console, 'warn');
379
+ ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.EventPluginHub.injection.injectEventPluginsByName(
380
+ {
381
+ TapEventPlugin: {
382
+ extractEvents() {},
383
+ },
384
+ },
385
+ );
386
+ if (__DEV__) {
387
+ expect(console.warn.calls.count()).toBe(1);
388
+ expect(console.warn.calls.argsFor(0)[0]).toContain(
389
+ 'Injecting custom event plugins (TapEventPlugin) is deprecated ' +
390
+ 'and will not work in React 17+. Please update your code ' +
391
+ 'to not depend on React internals. The stack trace for this ' +
392
+ 'warning should reveal the library that is using them. ' +
393
+ 'See https://github.com/facebook/react/issues/11689 for a discussion.',
394
+ );
395
+ }
396
+ });
397
+
398
it('throws in DEV if jsdom is destroyed by the time setState() is called', () => {
399
spyOnDev(console, 'error');
400
class App extends React.Component {
packages/react-dom/src/client/ReactDOM.js
+7
@@ -1284,6 +1284,13 @@ const ReactDOM: Object = {
1284
},
1285
};
1286
1287
+if (__DEV__) {
1288
+ // Show deprecation warnings as we don't want to support injection forever.
1289
+ // We do it now to let the internal injection happen without warnings.
1290
+ // https://github.com/facebook/react/issues/11689
1291
+ EventPluginRegistry.enableWarningOnInjection();
1292
+}
1293
+
1294
type RootOptions = {
1295
hydrate?: boolean,
1296
};