From 27953813b31d20eb140174c511823f406cda737f Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Thu, 13 Jul 2017 08:03:26 -0400 Subject: [PATCH] Support "for", "class", "http-equiv", and "accept-charset" This commit updates the HTML property config and UnknownPropertyHook developer warnings such that is no longer required to specify "className" instead of "class", "htmlFor" instead of "for", and so on. Both forms are supported. When both are specified within props, React provides the warning: "className and class were listed as properties on
. Both write to the same attribute; use one or the other." --- scripts/fiber/tests-passing.txt | 19 +- src/renderers/dom/shared/DOMProperty.js | 3 - .../dom/shared/HTMLDOMPropertyConfig.js | 11 +- .../__tests__/ReactDOMComponent-test.js | 256 ++++++++++++++---- .../hooks/ReactDOMUnknownPropertyHook.js | 31 +++ 5 files changed, 254 insertions(+), 66 deletions(-) diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index 0a68591cb7bfb..c33b72775d8f5 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -761,7 +761,6 @@ src/renderers/dom/shared/__tests__/ReactDOM-test.js * calls focus() on autoFocus elements after they have been mounted to the DOM src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js -* should handle className * should gracefully handle various style value types * should not update styles when mutating a proxy style object * should throw when mutating style objects @@ -844,8 +843,6 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js * should warn about incorrect casing on event handlers (ssr) * should warn about incorrect casing on properties * should warn about incorrect casing on event handlers -* should warn about class -* should warn about class (ssr) * should warn about props that are no longer supported * should warn about props that are no longer supported (ssr) * gives source code refs for unknown prop warning @@ -855,6 +852,22 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js * should suggest property name if available * renders innerHTML and preserves whitespace * render and then updates innerHTML and preserves whitespace +* should correctly assign the class attribute +* should correctly assign the className attribute +* supports the class attribute with string rendering +* removes className when set to null +* removes class when set to null +* switches from class to className +* switches from className to class +* warns when className and class are added to an element +* should correctly assign the for attribute +* should correctly assign the htmlFor attribute +* supports the for attribute with string rendering +* removes htmlFor when set to null +* removes for when set to null +* switches from for to htmlFor +* switches from htmlFor to for +* warns when htmlFor and for are added to an element src/renderers/dom/shared/__tests__/ReactDOMComponentTree-test.js * finds nodes for instances diff --git a/src/renderers/dom/shared/DOMProperty.js b/src/renderers/dom/shared/DOMProperty.js index 793df14dd773f..b098061815391 100644 --- a/src/renderers/dom/shared/DOMProperty.js +++ b/src/renderers/dom/shared/DOMProperty.js @@ -118,9 +118,6 @@ var DOMPropertyInjection = { if (DOMAttributeNames.hasOwnProperty(propName)) { var attributeName = DOMAttributeNames[propName]; propertyInfo.attributeName = attributeName; - if (__DEV__) { - DOMProperty.getPossibleStandardName[attributeName] = propName; - } } if (DOMAttributeNamespaces.hasOwnProperty(propName)) { diff --git a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js index 6c0f387873d1e..5abc8910cc5e4 100644 --- a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js +++ b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js @@ -31,6 +31,7 @@ var HTMLDOMPropertyConfig = { */ accept: 0, acceptCharset: 0, + 'accept-charset': 0, accessKey: 0, action: 0, allowFullScreen: HAS_BOOLEAN_VALUE, @@ -51,6 +52,7 @@ var HTMLDOMPropertyConfig = { checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, cite: 0, classID: 0, + class: 0, className: 0, cols: HAS_POSITIVE_NUMERIC_VALUE, colSpan: 0, @@ -83,8 +85,10 @@ var HTMLDOMPropertyConfig = { high: 0, href: 0, hrefLang: 0, + for: 0, htmlFor: 0, httpEquiv: 0, + 'http-equiv': 0, id: 0, inputMode: 0, integrity: 0, @@ -212,7 +216,12 @@ var HTMLDOMPropertyConfig = { htmlFor: 'for', httpEquiv: 'http-equiv', }, - DOMPropertyNames: {}, + DOMPropertyNames: { + 'accept-charset': 'acceptCharset', + class: 'className', + for: 'htmlFor', + 'http-equiv': 'httpEquiv', + }, DOMMutationMethods: { value: function(node, value) { if (value == null) { diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 6af639fc4afc5..37aed0613c950 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -35,18 +35,6 @@ describe('ReactDOMComponent', () => { }); describe('updateDOM', () => { - it('should handle className', () => { - var container = document.createElement('div'); - ReactDOM.render(
, container); - - ReactDOM.render(
, container); - expect(container.firstChild.className).toEqual('foo'); - ReactDOM.render(
, container); - expect(container.firstChild.className).toEqual('bar'); - ReactDOM.render(
, container); - expect(container.firstChild.className).toEqual(''); - }); - it('should gracefully handle various style value types', () => { var container = document.createElement('div'); ReactDOM.render(
, container); @@ -348,11 +336,11 @@ describe('ReactDOMComponent', () => { it('should remove properties', () => { var container = document.createElement('div'); - ReactDOM.render(
, container); + ReactDOM.render(