Skip to content

Better identify nodes in rehydration warnings #12115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
giles-v wants to merge 2 commits into from
Closed

Better identify nodes in rehydration warnings #12115

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d083b6
Get a clearer "node signature" for debugging.
Jan 25, 2018
8d77bd1
Restructured code, fixed typechecking / tests.
Jan 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Restructured code, fixed typechecking / tests.
  • Loading branch information
Giles Copp authored and Giles Copp committed Jun 19, 2018
commit 8d77bd145e4fe1d9813af0b086f32c865f2b471a
4 changes: 3 additions & 1 deletion packages/react-dom/src/__tests__/ReactRenderDocument-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,7 +417,9 @@ describe('rendering React components at document', () => {
// getTestDocument() has an extra <meta> that we didn't render.
expect(() =>
ReactDOM.hydrate(<Component text="Hello world" />, testDocument),
).toWarnDev('Did not expect server HTML to contain a <meta> in <head>.');
).toWarnDev(
'Did not expect server HTML to contain <meta charset="utf-8"> in <head>.',
);
expect(testDocument.body.innerHTML).toBe('Hello world');
});

Expand Down
20 changes: 13 additions & 7 deletions packages/react-dom/src/client/ReactDOMFiberComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ const HTML = '__html';

const {html: HTML_NAMESPACE} = Namespaces;

let getNodeSignature;

let getStack = () => '';

let warnedUnknownTags;
Expand All @@ -79,6 +81,17 @@ let normalizeHTML;
if (__DEV__) {
getStack = getCurrentFiberStackAddendum;

getNodeSignature = function(node: Element | Document) {
const attrs =
node instanceof Element
? [].slice
.call(node.attributes)
.map(item => item.name + '="' + item.value + '"')
: [];
attrs.unshift(node.nodeName.toLowerCase());
return attrs.join(' ');
};

warnedUnknownTags = {
// Chrome is the only major browser not shipping <time>. But as of July
// 2017 it intends to ship it due to widespread usage. We intentionally
Expand Down Expand Up @@ -1116,13 +1129,6 @@ export function warnForUnmatchedText(textNode: Text, text: string) {
}
}

function getNodeSignature(node: Element) {
var attrs = [].slice.call(node.attributes).map(function (item) {
return item.name + '="'+ item.value + '"';
});
return node.nodeName.toLowerCase() + ' ' + attrs.join(' ');
}

export function warnForDeletedHydratableElement(
parentNode: Element | Document,
child: Element,
Expand Down
Loading