From f2fd484afdee1e4e25ee453bb7a544fa0558d172 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 21 Jan 2020 15:51:39 +0000 Subject: [PATCH] Add React.createFactory() deprecation warning (#17878) --- .../react-is/src/__tests__/ReactIs-test.js | 11 ++++++++-- packages/react/src/ReactElementValidator.js | 12 +++++++++- .../react/src/__tests__/ReactElement-test.js | 22 +++++++++++++++++-- .../ReactElementJSX-test.internal.js | 22 +++++++++++++++++-- .../ReactElementValidator-test.internal.js | 12 +++++++++- 5 files changed, 71 insertions(+), 8 deletions(-) diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js index 7893ea0359a9..c14ecaf51e1e 100644 --- a/packages/react-is/src/__tests__/ReactIs-test.js +++ b/packages/react-is/src/__tests__/ReactIs-test.js @@ -57,9 +57,16 @@ describe('ReactIs', () => { expect(ReactIs.isValidElementType(Context.Provider)).toEqual(true); expect(ReactIs.isValidElementType(Context.Consumer)).toEqual(true); if (!ReactFeatureFlags.disableCreateFactory) { - expect(ReactIs.isValidElementType(React.createFactory('div'))).toEqual( - true, + 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(ReactIs.isValidElementType(factory)).toEqual(true); } expect(ReactIs.isValidElementType(React.Fragment)).toEqual(true); expect(ReactIs.isValidElementType(React.StrictMode)).toEqual(true); diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js index 4da3058feee8..fa00f30d47d9 100644 --- a/packages/react/src/ReactElementValidator.js +++ b/packages/react/src/ReactElementValidator.js @@ -473,11 +473,21 @@ export function createElementWithValidation(type, props, children) { return element; } +let didWarnAboutDeprecatedCreateFactory = false; + export function createFactoryWithValidation(type) { const validatedFactory = createElementWithValidation.bind(null, type); validatedFactory.type = type; - // Legacy hook: remove it if (__DEV__) { + if (!didWarnAboutDeprecatedCreateFactory) { + didWarnAboutDeprecatedCreateFactory = true; + console.warn( + 'React.createFactory() is deprecated and will be removed in ' + + 'a future major release. Consider using JSX ' + + 'or use React.createElement() directly instead.', + ); + } + // Legacy hook: remove it Object.defineProperty(validatedFactory, 'type', { enumerable: false, get: function() { diff --git a/packages/react/src/__tests__/ReactElement-test.js b/packages/react/src/__tests__/ReactElement-test.js index 03110c9aaa66..af99767220a1 100644 --- a/packages/react/src/__tests__/ReactElement-test.js +++ b/packages/react/src/__tests__/ReactElement-test.js @@ -313,7 +313,16 @@ describe('ReactElement', () => { expect(React.isValidElement({})).toEqual(false); expect(React.isValidElement('string')).toEqual(false); if (!ReactFeatureFlags.disableCreateFactory) { - expect(React.isValidElement(React.createFactory('div'))).toEqual(false); + 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); @@ -473,7 +482,16 @@ describe('ReactElement', () => { expect(React.isValidElement({})).toEqual(false); expect(React.isValidElement('string')).toEqual(false); if (!ReactFeatureFlags.disableCreateFactory) { - expect(React.isValidElement(React.createFactory('div'))).toEqual(false); + 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); diff --git a/packages/react/src/__tests__/ReactElementJSX-test.internal.js b/packages/react/src/__tests__/ReactElementJSX-test.internal.js index 1a535b084617..fce448208c0d 100644 --- a/packages/react/src/__tests__/ReactElementJSX-test.internal.js +++ b/packages/react/src/__tests__/ReactElementJSX-test.internal.js @@ -69,7 +69,16 @@ describe('ReactElement.jsx', () => { expect(React.isValidElement({})).toEqual(false); expect(React.isValidElement('string')).toEqual(false); if (!ReactFeatureFlags.disableCreateFactory) { - expect(React.isValidElement(React.createFactory('div'))).toEqual(false); + 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); @@ -301,7 +310,16 @@ describe('ReactElement.jsx', () => { expect(React.isValidElement({})).toEqual(false); expect(React.isValidElement('string')).toEqual(false); if (!ReactFeatureFlags.disableCreateFactory) { - expect(React.isValidElement(React.createFactory('div'))).toEqual(false); + 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); diff --git a/packages/react/src/__tests__/ReactElementValidator-test.internal.js b/packages/react/src/__tests__/ReactElementValidator-test.internal.js index 78db70034396..c4016387e159 100644 --- a/packages/react/src/__tests__/ReactElementValidator-test.internal.js +++ b/packages/react/src/__tests__/ReactElementValidator-test.internal.js @@ -445,7 +445,17 @@ describe('ReactElementValidator', () => { return
; } - let TestFactory = React.createFactory(TestComponent); + let TestFactory; + + expect(() => { + TestFactory = React.createFactory(TestComponent); + }).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( () => TestFactory.type, ).toWarnDev(