From 00cfd1b0cdcc8ecf88d82b5cf3345a9b9435df33 Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Sat, 5 Aug 2017 16:07:18 -0400 Subject: [PATCH 1/3] Cased data attributes should probably diff on server hydration --- src/renderers/dom/fiber/ReactDOMFiberComponent.js | 2 +- .../dom/shared/__tests__/ReactDOMServerIntegration-test.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js index 346e4091d20..bdce6d96833 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js +++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js @@ -1024,7 +1024,7 @@ var ReactDOMFiberComponent = { DOMProperty.isCustomAttribute(propKey) ) { // $FlowFixMe - Should be inferred as not undefined. - extraAttributeNames.delete(propKey); + extraAttributeNames.delete(propKey.toLowerCase()); serverValue = DOMPropertyOperations.getValueForAttribute( domElement, propKey, diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js index 2f7c137cbb1..44ddb39db55 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js @@ -789,6 +789,11 @@ describe('ReactDOMServerIntegration', () => { expect(e.getAttribute('data-foo')).toBe('bar'); }); + itRenders('unknown data- attributes with casing', async render => { + const e = await render(
, 0); + expect(e.getAttribute('data-myAttribute')).toBe('test'); + }); + itRenders('no unknown data- attributes with null value', async render => { const e = await render(
); expect(e.hasAttribute('data-foo')).toBe(false); From ab5cdbe732133b89337a89909f328021166d7a8c Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Sat, 5 Aug 2017 16:16:55 -0400 Subject: [PATCH 2/3] Cover lowercase classname case in SSR tests --- .../dom/shared/__tests__/ReactDOMServerIntegration-test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js index 44ddb39db55..03f49ebc35d 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js @@ -624,6 +624,12 @@ describe('ReactDOMServerIntegration', () => { const e = await render(
); expect(e.hasAttribute('className')).toBe(false); }); + + itRenders('no lower case classname', async render => { + const e = await render(
, 1); + expect(e.hasAttribute('className')).toBe(false); + expect(e.hasAttribute('class')).toBe(false); + }); }); describe('htmlFor property', function() { From 338cc0a11c5da8497c29af347a9f445f5dee1a60 Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Mon, 7 Aug 2017 08:38:20 -0400 Subject: [PATCH 3/3] Downcase attribute names in SSR diff hydration IE Edge reports some SVG attributes, like stroke and fill, in all caps. This commit downcases all attribute names so that comparison when diffing is case in-sensitive. --- src/renderers/dom/fiber/ReactDOMFiberComponent.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js index bdce6d96833..241e194377b 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js +++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js @@ -928,8 +928,10 @@ var ReactDOMFiberComponent = { var extraAttributeNames: Set = new Set(); var attributes = domElement.attributes; for (var i = 0; i < attributes.length; i++) { - // TODO: Do we need to lower case this to get case insensitive matches? - var name = attributes[i].name; + // Downcase to work around IE Edge, which reports some SVG attributes + // in all-caps. See: + // https://github.com/facebook/react/pull/10394#issuecomment-320523369 + var name = attributes[i].name.toLowerCase(); switch (name) { // Built-in attributes are whitelisted // TODO: Once these are gone from the server renderer, we don't need