From 9d3306f906f6bad08adbdbe2109e1e1ba9bc9f6c Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Sep 2017 20:46:16 +0100 Subject: [PATCH 1/2] Update DOM warning wording and link --- .../__tests__/ReactDOMAttribute-test.js | 12 +++--- .../__tests__/ReactDOMComponent-test.js | 40 +++++++++---------- .../hooks/ReactDOMUnknownPropertyHook.js | 10 ++--- 3 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/renderers/dom/shared/__tests__/ReactDOMAttribute-test.js b/src/renderers/dom/shared/__tests__/ReactDOMAttribute-test.js index 04dedf7871beb..8e2e0267f1823 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMAttribute-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMAttribute-test.js @@ -112,9 +112,9 @@ describe('ReactDOM unknown attribute', () => { testUnknownAttributeRemoval(Symbol('foo')); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid prop `unknown` on
tag. Either remove this ' + - 'prop from the element, or pass a string or number value to keep it ' + - 'in the DOM. For details, see https://fb.me/react-unknown-prop\n' + + 'Warning: Invalid value for prop `unknown` on
tag. Either remove it ' + + 'from the element, or pass a string or number value to keep it ' + + 'in the DOM. For details, see https://fb.me/react-attribute-behavior\n' + ' in div (at **)', ); expectDev(console.error.calls.count()).toBe(1); @@ -125,10 +125,10 @@ describe('ReactDOM unknown attribute', () => { testUnknownAttributeRemoval(function someFunction() {}); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid prop `unknown` on
tag. Either remove this ' + - 'prop from the element, or pass a string or number value to ' + + 'Warning: Invalid value for prop `unknown` on
tag. Either remove ' + + 'it from the element, or pass a string or number value to ' + 'keep it in the DOM. For details, see ' + - 'https://fb.me/react-unknown-prop\n' + + 'https://fb.me/react-attribute-behavior\n' + ' in div (at **)', ); expectDev(console.error.calls.count()).toBe(1); diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index ba21f482afbe7..d5e93a76beba9 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -148,9 +148,9 @@ describe('ReactDOMComponent', () => { ReactDOM.render(
{}} />, container); expectDev(console.error.calls.count(0)).toBe(1); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid prop `foo` on
tag. Either remove this prop ' + + 'Warning: Invalid value for prop `foo` on
tag. Either remove it ' + 'from the element, or pass a string or number value to keep ' + - 'it in the DOM. For details, see https://fb.me/react-unknown-prop' + + 'it in the DOM. For details, see https://fb.me/react-attribute-behavior' + '\n in div (at **)', ); }); @@ -161,9 +161,9 @@ describe('ReactDOMComponent', () => { ReactDOM.render(
{}} baz={() => {}} />, container); expectDev(console.error.calls.count(0)).toBe(1); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid props `foo`, `baz` on
tag. Either remove these ' + - 'props from the element, or pass a string or number value to keep ' + - 'them in the DOM. For details, see https://fb.me/react-unknown-prop' + + 'Warning: Invalid values for props `foo`, `baz` on
tag. Either remove ' + + 'them from the element, or pass a string or number value to keep ' + + 'them in the DOM. For details, see https://fb.me/react-attribute-behavior' + '\n in div (at **)', ); }); @@ -233,7 +233,7 @@ describe('ReactDOMComponent', () => { expect(container.firstChild.getAttribute('CHILDREN')).toBe('5'); expectDev(console.error.calls.count(0)).toBe(1); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid DOM property `CHILDREN`. Did you mean `children`?\n in div (at **)', + 'Warning: Unknown DOM property `CHILDREN`. Did you mean `children`?\n in div (at **)', ); }); @@ -1729,7 +1729,7 @@ describe('ReactDOMComponent', () => { ReactTestUtils.renderIntoDocument(); expectDev(console.error.calls.count()).toBe(2); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Warning: Unknown DOM property `class`. Did you mean `className`?\n in div (at **)', ); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe( 'Warning: Unknown event handler property `onclick`. Did you mean ' + @@ -1743,7 +1743,7 @@ describe('ReactDOMComponent', () => { ReactDOMServer.renderToString(); expectDev(console.error.calls.count()).toBe(2); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Warning: Unknown DOM property `class`. Did you mean `className`?\n in div (at **)', ); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe( 'Warning: Unknown event handler property `onclick`. Did you mean ' + @@ -1761,7 +1761,7 @@ describe('ReactDOMComponent', () => { ReactTestUtils.renderIntoDocument(
, container); expectDev(console.error.calls.count()).toBe(1); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Warning: Unknown DOM property `class`. Did you mean `className`?\n in div (at **)', ); }); @@ -1939,11 +1939,11 @@ describe('ReactDOMComponent', () => { expectDev(console.error.calls.count()).toBe(2); expectDev(console.error.calls.argsFor(0)[0]).toBe( - 'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', + 'Warning: Unknown DOM property `for`. Did you mean `htmlFor`?\n in label', ); expectDev(console.error.calls.argsFor(1)[0]).toBe( - 'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', + 'Warning: Unknown DOM property `autofocus`. Did you mean `autoFocus`?\n in input', ); }); @@ -1960,11 +1960,11 @@ describe('ReactDOMComponent', () => { expectDev(console.error.calls.count()).toBe(2); expectDev(console.error.calls.argsFor(0)[0]).toBe( - 'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', + 'Warning: Unknown DOM property `for`. Did you mean `htmlFor`?\n in label', ); expectDev(console.error.calls.argsFor(1)[0]).toBe( - 'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', + 'Warning: Unknown DOM property `autofocus`. Did you mean `autoFocus`?\n in input', ); }); }); @@ -2002,7 +2002,7 @@ describe('ReactDOMComponent', () => { expect(el.className).toBe('test'); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Invalid DOM property `class`. Did you mean `className`?', + 'Warning: Unknown DOM property `class`. Did you mean `className`?', ); }); @@ -2014,7 +2014,7 @@ describe('ReactDOMComponent', () => { expect(el.className).toBe('test'); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Invalid DOM property `cLASS`. Did you mean `className`?', + 'Warning: Unknown DOM property `cLASS`. Did you mean `className`?', ); }); @@ -2029,7 +2029,7 @@ describe('ReactDOMComponent', () => { expect(text.hasAttribute('arabic-form')).toBe(true); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Invalid DOM property `arabic-form`. Did you mean `arabicForm`?', + 'Warning: Unknown DOM property `arabic-form`. Did you mean `arabicForm`?', ); }); @@ -2115,7 +2115,7 @@ describe('ReactDOMComponent', () => { expect(el.hasAttribute('whatever')).toBe(false); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Invalid prop `whatever` on
tag', + 'Warning: Invalid value for prop `whatever` on
tag', ); }); @@ -2186,7 +2186,7 @@ describe('ReactDOMComponent', () => { expect(el.hasAttribute('whatever')).toBe(false); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Invalid prop `whatever` on
tag.', + 'Warning: Invalid value for prop `whatever` on
tag.', ); }); @@ -2198,7 +2198,7 @@ describe('ReactDOMComponent', () => { expect(el.getAttribute('size')).toBe('30'); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Invalid DOM property `SiZe`. Did you mean `size`?', + 'Warning: Unknown DOM property `SiZe`. Did you mean `size`?', ); }); }); @@ -2313,7 +2313,7 @@ describe('ReactDOMComponent', () => { expectDev(console.error.calls.count()).toBe(1); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Invalid DOM property `x-height`. Did you mean `xHeight`', + 'Warning: Unknown DOM property `x-height`. Did you mean `xHeight`', ); }); diff --git a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js b/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js index f49442ccf3d4e..375cc9516e645 100644 --- a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js +++ b/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js @@ -166,7 +166,7 @@ if (__DEV__) { if (standardName !== name) { warning( false, - 'Invalid DOM property `%s`. Did you mean `%s`?%s', + 'Unknown DOM property `%s`. Did you mean `%s`?%s', name, standardName, getStackAddendum(debugID), @@ -234,9 +234,9 @@ var warnUnknownProperties = function(type, props, debugID) { if (unknownProps.length === 1) { warning( false, - 'Invalid prop %s on <%s> tag. Either remove this prop from the element, ' + + 'Invalid value for prop %s on <%s> tag. Either remove it from the element, ' + 'or pass a string or number value to keep it in the DOM. ' + - 'For details, see https://fb.me/react-unknown-prop%s', + 'For details, see https://fb.me/react-attribute-behavior%s', unknownPropString, type, getStackAddendum(debugID), @@ -244,9 +244,9 @@ var warnUnknownProperties = function(type, props, debugID) { } else if (unknownProps.length > 1) { warning( false, - 'Invalid props %s on <%s> tag. Either remove these props from the element, ' + + 'Invalid values for props %s on <%s> tag. Either remove them from the element, ' + 'or pass a string or number value to keep them in the DOM. ' + - 'For details, see https://fb.me/react-unknown-prop%s', + 'For details, see https://fb.me/react-attribute-behavior%s', unknownPropString, type, getStackAddendum(debugID), From 4c686ca6bf92362880190a983e1de2bee2f28d12 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Sep 2017 21:00:02 +0100 Subject: [PATCH 2/2] Consistently use "Invalid" for known misspellings --- .../__tests__/ReactDOMComponent-test.js | 32 +++++++++---------- .../hooks/ReactDOMUnknownPropertyHook.js | 4 +-- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index d5e93a76beba9..4d421ec861e69 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -174,7 +174,7 @@ describe('ReactDOMComponent', () => { ReactDOM.render(
{}} />, container); expectDev(console.error.calls.count(0)).toBe(1); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Unknown event handler property `onDblClick`. Did you mean `onDoubleClick`?\n in div (at **)', + 'Warning: Invalid event handler property `onDblClick`. Did you mean `onDoubleClick`?\n in div (at **)', ); }); @@ -233,7 +233,7 @@ describe('ReactDOMComponent', () => { expect(container.firstChild.getAttribute('CHILDREN')).toBe('5'); expectDev(console.error.calls.count(0)).toBe(1); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Unknown DOM property `CHILDREN`. Did you mean `children`?\n in div (at **)', + 'Warning: Invalid DOM property `CHILDREN`. Did you mean `children`?\n in div (at **)', ); }); @@ -1729,10 +1729,10 @@ describe('ReactDOMComponent', () => { ReactTestUtils.renderIntoDocument(); expectDev(console.error.calls.count()).toBe(2); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Unknown DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', ); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe( - 'Warning: Unknown event handler property `onclick`. Did you mean ' + + 'Warning: Invalid event handler property `onclick`. Did you mean ' + '`onClick`?\n in input (at **)', ); }); @@ -1743,10 +1743,10 @@ describe('ReactDOMComponent', () => { ReactDOMServer.renderToString(); expectDev(console.error.calls.count()).toBe(2); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Unknown DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', ); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe( - 'Warning: Unknown event handler property `onclick`. Did you mean ' + + 'Warning: Invalid event handler property `onclick`. Did you mean ' + '`onClick`?\n in input (at **)', ); }); @@ -1761,7 +1761,7 @@ describe('ReactDOMComponent', () => { ReactTestUtils.renderIntoDocument(
, container); expectDev(console.error.calls.count()).toBe(1); expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe( - 'Warning: Unknown DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', ); }); @@ -1939,11 +1939,11 @@ describe('ReactDOMComponent', () => { expectDev(console.error.calls.count()).toBe(2); expectDev(console.error.calls.argsFor(0)[0]).toBe( - 'Warning: Unknown DOM property `for`. Did you mean `htmlFor`?\n in label', + 'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', ); expectDev(console.error.calls.argsFor(1)[0]).toBe( - 'Warning: Unknown DOM property `autofocus`. Did you mean `autoFocus`?\n in input', + 'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', ); }); @@ -1960,11 +1960,11 @@ describe('ReactDOMComponent', () => { expectDev(console.error.calls.count()).toBe(2); expectDev(console.error.calls.argsFor(0)[0]).toBe( - 'Warning: Unknown DOM property `for`. Did you mean `htmlFor`?\n in label', + 'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', ); expectDev(console.error.calls.argsFor(1)[0]).toBe( - 'Warning: Unknown DOM property `autofocus`. Did you mean `autoFocus`?\n in input', + 'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', ); }); }); @@ -2002,7 +2002,7 @@ describe('ReactDOMComponent', () => { expect(el.className).toBe('test'); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Unknown DOM property `class`. Did you mean `className`?', + 'Warning: Invalid DOM property `class`. Did you mean `className`?', ); }); @@ -2014,7 +2014,7 @@ describe('ReactDOMComponent', () => { expect(el.className).toBe('test'); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Unknown DOM property `cLASS`. Did you mean `className`?', + 'Warning: Invalid DOM property `cLASS`. Did you mean `className`?', ); }); @@ -2029,7 +2029,7 @@ describe('ReactDOMComponent', () => { expect(text.hasAttribute('arabic-form')).toBe(true); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Unknown DOM property `arabic-form`. Did you mean `arabicForm`?', + 'Warning: Invalid DOM property `arabic-form`. Did you mean `arabicForm`?', ); }); @@ -2198,7 +2198,7 @@ describe('ReactDOMComponent', () => { expect(el.getAttribute('size')).toBe('30'); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Unknown DOM property `SiZe`. Did you mean `size`?', + 'Warning: Invalid DOM property `SiZe`. Did you mean `size`?', ); }); }); @@ -2313,7 +2313,7 @@ describe('ReactDOMComponent', () => { expectDev(console.error.calls.count()).toBe(1); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Warning: Unknown DOM property `x-height`. Did you mean `xHeight`', + 'Warning: Invalid DOM property `x-height`. Did you mean `xHeight`', ); }); diff --git a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js b/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js index 375cc9516e645..4231bb1f37b5c 100644 --- a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js +++ b/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js @@ -73,7 +73,7 @@ if (__DEV__) { if (registrationName != null) { warning( false, - 'Unknown event handler property `%s`. Did you mean `%s`?%s', + 'Invalid event handler property `%s`. Did you mean `%s`?%s', name, registrationName, getStackAddendum(debugID), @@ -166,7 +166,7 @@ if (__DEV__) { if (standardName !== name) { warning( false, - 'Unknown DOM property `%s`. Did you mean `%s`?%s', + 'Invalid DOM property `%s`. Did you mean `%s`?%s', name, standardName, getStackAddendum(debugID),