From 1f5ce59dd7b6869b1a17ede65aa301002ef31d4b Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 30 Jan 2023 15:25:24 -0500 Subject: [PATCH] [cleanup] fully roll out warnAboutSpreadingKeyToJSX (#26080) I fully enabled this flag internally now and unless I see complications, we should be able to clean this up in the code. --- packages/react/src/ReactElementValidator.js | 61 +++++++++---------- .../src/__tests__/ReactElementJSX-test.js | 48 +++++++-------- .../react/src/jsx/ReactJSXElementValidator.js | 49 +++++++-------- packages/shared/ReactFeatureFlags.js | 13 ---- .../forks/ReactFeatureFlags.native-fb.js | 1 - .../forks/ReactFeatureFlags.native-oss.js | 1 - .../forks/ReactFeatureFlags.test-renderer.js | 1 - .../ReactFeatureFlags.test-renderer.native.js | 1 - .../ReactFeatureFlags.test-renderer.www.js | 1 - .../shared/forks/ReactFeatureFlags.testing.js | 1 - .../forks/ReactFeatureFlags.testing.www.js | 1 - .../forks/ReactFeatureFlags.www-dynamic.js | 1 - .../shared/forks/ReactFeatureFlags.www.js | 1 - 13 files changed, 74 insertions(+), 106 deletions(-) diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js index b67f52fe9f785..1cc7bcf475990 100644 --- a/packages/react/src/ReactElementValidator.js +++ b/packages/react/src/ReactElementValidator.js @@ -21,7 +21,6 @@ import { REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE, } from 'shared/ReactSymbols'; -import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags'; import checkPropTypes from 'shared/checkPropTypes'; import isArray from 'shared/isArray'; @@ -365,13 +364,11 @@ export function jsxWithValidation( Object.freeze(children); } } else { - if (__DEV__) { - console.error( - 'React.jsx: Static children should always be an array. ' + - 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + - 'Use the Babel transform instead.', - ); - } + console.error( + 'React.jsx: Static children should always be an array. ' + + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + + 'Use the Babel transform instead.', + ); } } else { validateChildKeys(children, type); @@ -379,31 +376,29 @@ export function jsxWithValidation( } } - if (warnAboutSpreadingKeyToJSX) { - if (hasOwnProperty.call(props, 'key')) { - const componentName = getComponentNameFromType(type); - const keys = Object.keys(props).filter(k => k !== 'key'); - const beforeExample = - keys.length > 0 - ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' - : '{key: someKey}'; - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - const afterExample = - keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}'; - console.error( - 'A props object containing a "key" prop is being spread into JSX:\n' + - ' let props = %s;\n' + - ' <%s {...props} />\n' + - 'React keys must be passed directly to JSX without using spread:\n' + - ' let props = %s;\n' + - ' <%s key={someKey} {...props} />', - beforeExample, - componentName, - afterExample, - componentName, - ); - didWarnAboutKeySpread[componentName + beforeExample] = true; - } + if (hasOwnProperty.call(props, 'key')) { + const componentName = getComponentNameFromType(type); + const keys = Object.keys(props).filter(k => k !== 'key'); + const beforeExample = + keys.length > 0 + ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' + : '{key: someKey}'; + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + const afterExample = + keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}'; + console.error( + 'A props object containing a "key" prop is being spread into JSX:\n' + + ' let props = %s;\n' + + ' <%s {...props} />\n' + + 'React keys must be passed directly to JSX without using spread:\n' + + ' let props = %s;\n' + + ' <%s key={someKey} {...props} />', + beforeExample, + componentName, + afterExample, + componentName, + ); + didWarnAboutKeySpread[componentName + beforeExample] = true; } } diff --git a/packages/react/src/__tests__/ReactElementJSX-test.js b/packages/react/src/__tests__/ReactElementJSX-test.js index ad42046087c4d..4b7e70a073366 100644 --- a/packages/react/src/__tests__/ReactElementJSX-test.js +++ b/packages/react/src/__tests__/ReactElementJSX-test.js @@ -264,33 +264,31 @@ describe('ReactElement.jsx', () => { ); }); - if (require('shared/ReactFeatureFlags').warnAboutSpreadingKeyToJSX) { - it('should warn when keys are passed as part of props', () => { - const container = document.createElement('div'); - class Child extends React.Component { - render() { - return JSXRuntime.jsx('div', {}); - } + it('should warn when keys are passed as part of props', () => { + const container = document.createElement('div'); + class Child extends React.Component { + render() { + return JSXRuntime.jsx('div', {}); } - class Parent extends React.Component { - render() { - return JSXRuntime.jsx('div', { - children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})], - }); - } + } + class Parent extends React.Component { + render() { + return JSXRuntime.jsx('div', { + children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})], + }); } - expect(() => - ReactDOM.render(JSXRuntime.jsx(Parent, {}), container), - ).toErrorDev( - 'Warning: A props object containing a "key" prop is being spread into JSX:\n' + - ' let props = {key: someKey, prop: ...};\n' + - ' \n' + - 'React keys must be passed directly to JSX without using spread:\n' + - ' let props = {prop: ...};\n' + - ' ', - ); - }); - } + } + expect(() => + ReactDOM.render(JSXRuntime.jsx(Parent, {}), container), + ).toErrorDev( + 'Warning: A props object containing a "key" prop is being spread into JSX:\n' + + ' let props = {key: someKey, prop: ...};\n' + + ' \n' + + 'React keys must be passed directly to JSX without using spread:\n' + + ' let props = {prop: ...};\n' + + ' ', + ); + }); it('should not warn when unkeyed children are passed to jsxs', () => { const container = document.createElement('div'); diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js index 044f9a2b05948..947d806058732 100644 --- a/packages/react/src/jsx/ReactJSXElementValidator.js +++ b/packages/react/src/jsx/ReactJSXElementValidator.js @@ -21,7 +21,6 @@ import { REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE, } from 'shared/ReactSymbols'; -import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags'; import hasOwnProperty from 'shared/hasOwnProperty'; import isArray from 'shared/isArray'; import {jsxDEV} from './ReactJSXElement'; @@ -390,31 +389,29 @@ export function jsxWithValidation( } } - if (warnAboutSpreadingKeyToJSX) { - if (hasOwnProperty.call(props, 'key')) { - const componentName = getComponentNameFromType(type); - const keys = Object.keys(props).filter(k => k !== 'key'); - const beforeExample = - keys.length > 0 - ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' - : '{key: someKey}'; - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - const afterExample = - keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}'; - console.error( - 'A props object containing a "key" prop is being spread into JSX:\n' + - ' let props = %s;\n' + - ' <%s {...props} />\n' + - 'React keys must be passed directly to JSX without using spread:\n' + - ' let props = %s;\n' + - ' <%s key={someKey} {...props} />', - beforeExample, - componentName, - afterExample, - componentName, - ); - didWarnAboutKeySpread[componentName + beforeExample] = true; - } + if (hasOwnProperty.call(props, 'key')) { + const componentName = getComponentNameFromType(type); + const keys = Object.keys(props).filter(k => k !== 'key'); + const beforeExample = + keys.length > 0 + ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' + : '{key: someKey}'; + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + const afterExample = + keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}'; + console.error( + 'A props object containing a "key" prop is being spread into JSX:\n' + + ' let props = %s;\n' + + ' <%s {...props} />\n' + + 'React keys must be passed directly to JSX without using spread:\n' + + ' let props = %s;\n' + + ' <%s key={someKey} {...props} />', + beforeExample, + componentName, + afterExample, + componentName, + ); + didWarnAboutKeySpread[componentName + beforeExample] = true; } } diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 63d1aae161181..7a9a02262e9cf 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -185,19 +185,6 @@ export const enableCustomElementPropertySupport = __EXPERIMENTAL__; // Disables children for