{"action":"created","comment":{"url":"https://api.github.com/repos/facebook/react/pulls/comments/206952597","pull_request_review_id":142466265,"id":206952597,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIwNjk1MjU5Nw==","diff_hunk":"@@ -99,21 +99,60 @@ function deleteHydratableInstance(\n   }\n }\n \n-function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n+function insertNonHydratedInstance(\n+  returnFiber: Fiber,\n+  fiber: Fiber,\n+  hydrationWarningHostInstanceIsReplaced: boolean,\n+) {\n   fiber.effectTag |= Placement;\n   if (__DEV__) {\n+    let hydrationWarningHostInstanceIndex = 0;\n+    {\n+      // Count rendered host nodes by traversing `returnFiber` subtree until `fiber` is found.\n+      let node = returnFiber.child;\n+      const nextNodeStack = [];\n+      while (node && node !== fiber) {\n+        if (node.tag === HostComponent || node.tag === HostText) {\n+          ++hydrationWarningHostInstanceIndex;","path":"packages/react-reconciler/src/ReactFiberHydrationContext.js","position":19,"original_position":19,"commit_id":"9ed3f95401c809bd4c57578a424c8b931841c060","original_commit_id":"9ed3f95401c809bd4c57578a424c8b931841c060","user":{"login":"gaearon","id":810438,"node_id":"MDQ6VXNlcjgxMDQzOA==","avatar_url":"https://avatars0.githubusercontent.com/u/810438?v=4","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"body":"If a node is a host component, why do we need to go *inside* of it? I imagine we'd want to skip over it to search for the next one. Otherwise we'd count its children (which we shouldn't). Am I wrong?","created_at":"2018-08-01T16:46:29Z","updated_at":"2018-08-01T16:46:30Z","html_url":"https://github.com/facebook/react/pull/12063#discussion_r206952597","pull_request_url":"https://api.github.com/repos/facebook/react/pulls/12063","author_association":"MEMBER","_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/comments/206952597"},"html":{"href":"https://github.com/facebook/react/pull/12063#discussion_r206952597"},"pull_request":{"href":"https://api.github.com/repos/facebook/react/pulls/12063"}}},"pull_request":{"url":"https://api.github.com/repos/facebook/react/pulls/12063","id":164154839,"node_id":"MDExOlB1bGxSZXF1ZXN0MTY0MTU0ODM5","html_url":"https://github.com/facebook/react/pull/12063","diff_url":"https://github.com/facebook/react/pull/12063.diff","patch_url":"https://github.com/facebook/react/pull/12063.patch","issue_url":"https://api.github.com/repos/facebook/react/issues/12063","number":12063,"state":"open","locked":false,"title":"DOM diff and component stack in SSR hydrate mismatch warnings (#10085)","user":{"login":"sompylasar","id":498274,"node_id":"MDQ6VXNlcjQ5ODI3NA==","avatar_url":"https://avatars2.githubusercontent.com/u/498274?v=4","gravatar_id":"","url":"https://api.github.com/users/sompylasar","html_url":"https://github.com/sompylasar","followers_url":"https://api.github.com/users/sompylasar/followers","following_url":"https://api.github.com/users/sompylasar/following{/other_user}","gists_url":"https://api.github.com/users/sompylasar/gists{/gist_id}","starred_url":"https://api.github.com/users/sompylasar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sompylasar/subscriptions","organizations_url":"https://api.github.com/users/sompylasar/orgs","repos_url":"https://api.github.com/users/sompylasar/repos","events_url":"https://api.github.com/users/sompylasar/events{/privacy}","received_events_url":"https://api.github.com/users/sompylasar/received_events","type":"User","site_admin":false},"body":"Renders DOM attributes in the tags mentioned in the warnings. Borrows the idea and partially implementation of `getNodeSignature` from @giles-v https://github.com/facebook/react/pull/12115\r\n\r\nRenders DOM diff and component stack showing visually the location where the hydration failed. Example warning with a diff (see [the `fixtures/ssr`](https://github.com/facebook/react/pull/12063/files#diff-5ec2d35d1f0d9ccc2f3a4a53d0615ba4) and [the tests](https://github.com/facebook/react/pull/12063/files#diff-1ee0c467f9deb87ae13e737c58c4ac34) for more warning examples):\r\n```\r\nWarning: Expected server HTML to contain a matching <div> in <div>.\r\n\r\n  <div>\r\n    {'nested'}\r\n    <!-- -->\r\n    {' '}\r\n    <p>children <b>text</b></p>\r\n+   <div>{['children ', …]}</div>\r\n  </div>\r\n\r\n    in div (at SSRMismatchTest.js:280)\r\n    in div (at SSRMismatchTest.js:275)\r\n    in div (at SSRMismatchTest.js:308)\r\n    in SSRMismatchTest (at App.js:14)\r\n    in div (at App.js:11)\r\n    in body (at Chrome.js:17)\r\n    in html (at Chrome.js:9)\r\n    in Chrome (at App.js:10)\r\n    in App (at index.js:8)\r\n```\r\n<img width=\"480\" alt=\"react-fixtures-ssr-example\" src=\"https://user-images.githubusercontent.com/498274/41187398-263b17e8-6b5d-11e8-8eae-57556babafc9.png\">\r\n\r\n\r\nRequires changes to ReactFiberReconciler interface functions that handle hydration errors to distinguish insertion from replacement and show insertion as one added line in the diff; show replacement as one removed, one added line, at correct position among the parentInstance's DOM children:\r\n- add `index` (use `fiber.index`) to point at which child node the insertion or replacement occurs;\r\n- add `isReplaced` to distinguish insertion from replacement.\r\n\r\n<details>\r\n<summary>\r\nThe latest screen recording from <code>fixtures/ssr</code> (7.8MB – click to expand)\r\n</summary>\r\n\r\n![react-fixtures-ssr-10mb](https://user-images.githubusercontent.com/498274/41187303-53d64b02-6b5b-11e8-9730-729dd2817d12.gif)\r\n\r\n</details>\r\n\r\n------\r\n\r\n<details><summary>Previous revisions</summary>\r\n\r\n```\r\nWarning: Expected server HTML to contain a matching <div>{['children ', …]}</div> in <div>nested<!-- --> <p>children <b>text</b></p></div>.\r\n  <div>\r\n    {'nested'}\r\n    {' '}\r\n    <p>children <b>text</b></p>\r\n+   <div>{['children ', …]}</div>\r\n  </div>\r\n    in div (at SSRMismatchTest.js:280)\r\n    in div (at SSRMismatchTest.js:275)\r\n    in div (at SSRMismatchTest.js:308)\r\n    in SSRMismatchTest (at App.js:14)\r\n    in div (at App.js:11)\r\n    in body (at Chrome.js:17)\r\n    in html (at Chrome.js:9)\r\n    in Chrome (at App.js:10)\r\n    in App (at index.js:8)\r\n```\r\n\r\nExtends the proof-of-concept at commit 6c425e7b90cd61f1124c566b26fa2a5d00261b1b\r\n\r\n![react-ssr-warning-diff](https://user-images.githubusercontent.com/498274/36652198-11bb46fe-1a62-11e8-9fa2-a612827d1463.gif)\r\n\r\n------\r\n\r\n* Added textual component stack to the hydrate mismatch warnings\r\n* Added DOM hydrate mismatch test cases to fixtures/ssr\r\n\r\nExample warning:\r\n```\r\nWarning: Expected server HTML to contain a matching <p> in <div>.\r\n    in p (at SSRMismatchTest.js:40)\r\n    in div (at SSRMismatchTest.js:39)\r\n    in div (at SSRMismatchTest.js:46)\r\n    in SSRMismatchTest (at App.js:14)\r\n    in div (at App.js:11)\r\n    in body (at Chrome.js:17)\r\n    in html (at Chrome.js:9)\r\n    in Chrome (at App.js:10)\r\n    in App (at index.js:8)\r\n```\r\n\r\n![react-ssr-mismatch](https://user-images.githubusercontent.com/498274/35189753-a3e6eefc-fe06-11e7-9a15-216bcf4a6e83.gif)\r\n\r\n</details>\r\n\r\n------\r\n\r\nFixes https://github.com/facebook/react/issues/10085","created_at":"2018-01-21T01:26:08Z","updated_at":"2018-08-01T16:46:30Z","closed_at":null,"merged_at":null,"merge_commit_sha":"bb3085cb3f518691eed2cb19fa82936b77f9465b","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[{"id":196858374,"node_id":"MDU6TGFiZWwxOTY4NTgzNzQ=","url":"https://api.github.com/repos/facebook/react/labels/CLA%20Signed","name":"CLA Signed","color":"e7e7e7","default":false}],"milestone":null,"commits_url":"https://api.github.com/repos/facebook/react/pulls/12063/commits","review_comments_url":"https://api.github.com/repos/facebook/react/pulls/12063/comments","review_comment_url":"https://api.github.com/repos/facebook/react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/facebook/react/issues/12063/comments","statuses_url":"https://api.github.com/repos/facebook/react/statuses/9ed3f95401c809bd4c57578a424c8b931841c060","head":{"label":"sompylasar:10085-nicer-ssr-mismatch-warning","ref":"10085-nicer-ssr-mismatch-warning","sha":"9ed3f95401c809bd4c57578a424c8b931841c060","user":{"login":"sompylasar","id":498274,"node_id":"MDQ6VXNlcjQ5ODI3NA==","avatar_url":"https://avatars2.githubusercontent.com/u/498274?v=4","gravatar_id":"","url":"https://api.github.com/users/sompylasar","html_url":"https://github.com/sompylasar","followers_url":"https://api.github.com/users/sompylasar/followers","following_url":"https://api.github.com/users/sompylasar/following{/other_user}","gists_url":"https://api.github.com/users/sompylasar/gists{/gist_id}","starred_url":"https://api.github.com/users/sompylasar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sompylasar/subscriptions","organizations_url":"https://api.github.com/users/sompylasar/orgs","repos_url":"https://api.github.com/users/sompylasar/repos","events_url":"https://api.github.com/users/sompylasar/events{/privacy}","received_events_url":"https://api.github.com/users/sompylasar/received_events","type":"User","site_admin":false},"repo":{"id":105044372,"node_id":"MDEwOlJlcG9zaXRvcnkxMDUwNDQzNzI=","name":"react","full_name":"sompylasar/react","owner":{"login":"sompylasar","id":498274,"node_id":"MDQ6VXNlcjQ5ODI3NA==","avatar_url":"https://avatars2.githubusercontent.com/u/498274?v=4","gravatar_id":"","url":"https://api.github.com/users/sompylasar","html_url":"https://github.com/sompylasar","followers_url":"https://api.github.com/users/sompylasar/followers","following_url":"https://api.github.com/users/sompylasar/following{/other_user}","gists_url":"https://api.github.com/users/sompylasar/gists{/gist_id}","starred_url":"https://api.github.com/users/sompylasar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sompylasar/subscriptions","organizations_url":"https://api.github.com/users/sompylasar/orgs","repos_url":"https://api.github.com/users/sompylasar/repos","events_url":"https://api.github.com/users/sompylasar/events{/privacy}","received_events_url":"https://api.github.com/users/sompylasar/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/sompylasar/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":true,"url":"https://api.github.com/repos/sompylasar/react","forks_url":"https://api.github.com/repos/sompylasar/react/forks","keys_url":"https://api.github.com/repos/sompylasar/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/sompylasar/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/sompylasar/react/teams","hooks_url":"https://api.github.com/repos/sompylasar/react/hooks","issue_events_url":"https://api.github.com/repos/sompylasar/react/issues/events{/number}","events_url":"https://api.github.com/repos/sompylasar/react/events","assignees_url":"https://api.github.com/repos/sompylasar/react/assignees{/user}","branches_url":"https://api.github.com/repos/sompylasar/react/branches{/branch}","tags_url":"https://api.github.com/repos/sompylasar/react/tags","blobs_url":"https://api.github.com/repos/sompylasar/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/sompylasar/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/sompylasar/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/sompylasar/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/sompylasar/react/statuses/{sha}","languages_url":"https://api.github.com/repos/sompylasar/react/languages","stargazers_url":"https://api.github.com/repos/sompylasar/react/stargazers","contributors_url":"https://api.github.com/repos/sompylasar/react/contributors","subscribers_url":"https://api.github.com/repos/sompylasar/react/subscribers","subscription_url":"https://api.github.com/repos/sompylasar/react/subscription","commits_url":"https://api.github.com/repos/sompylasar/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/sompylasar/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/sompylasar/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/sompylasar/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/sompylasar/react/contents/{+path}","compare_url":"https://api.github.com/repos/sompylasar/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/sompylasar/react/merges","archive_url":"https://api.github.com/repos/sompylasar/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/sompylasar/react/downloads","issues_url":"https://api.github.com/repos/sompylasar/react/issues{/number}","pulls_url":"https://api.github.com/repos/sompylasar/react/pulls{/number}","milestones_url":"https://api.github.com/repos/sompylasar/react/milestones{/number}","notifications_url":"https://api.github.com/repos/sompylasar/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/sompylasar/react/labels{/name}","releases_url":"https://api.github.com/repos/sompylasar/react/releases{/id}","deployments_url":"https://api.github.com/repos/sompylasar/react/deployments","created_at":"2017-09-27T16:49:28Z","updated_at":"2018-06-08T15:13:09Z","pushed_at":"2018-07-23T08:09:41Z","git_url":"git://github.com/sompylasar/react.git","ssh_url":"git@github.com:sompylasar/react.git","clone_url":"https://github.com/sompylasar/react.git","svn_url":"https://github.com/sompylasar/react","homepage":"https://facebook.github.io/react/","size":138670,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":0,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"facebook:master","ref":"master","sha":"a32c727f2e24bc2e8b5f532420a52b1bae2f98af","user":{"login":"facebook","id":69631,"node_id":"MDEyOk9yZ2FuaXphdGlvbjY5NjMx","avatar_url":"https://avatars3.githubusercontent.com/u/69631?v=4","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"repo":{"id":10270250,"node_id":"MDEwOlJlcG9zaXRvcnkxMDI3MDI1MA==","name":"react","full_name":"facebook/react","owner":{"login":"facebook","id":69631,"node_id":"MDEyOk9yZ2FuaXphdGlvbjY5NjMx","avatar_url":"https://avatars3.githubusercontent.com/u/69631?v=4","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/facebook/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":false,"url":"https://api.github.com/repos/facebook/react","forks_url":"https://api.github.com/repos/facebook/react/forks","keys_url":"https://api.github.com/repos/facebook/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/facebook/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/facebook/react/teams","hooks_url":"https://api.github.com/repos/facebook/react/hooks","issue_events_url":"https://api.github.com/repos/facebook/react/issues/events{/number}","events_url":"https://api.github.com/repos/facebook/react/events","assignees_url":"https://api.github.com/repos/facebook/react/assignees{/user}","branches_url":"https://api.github.com/repos/facebook/react/branches{/branch}","tags_url":"https://api.github.com/repos/facebook/react/tags","blobs_url":"https://api.github.com/repos/facebook/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/facebook/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/facebook/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/facebook/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/facebook/react/statuses/{sha}","languages_url":"https://api.github.com/repos/facebook/react/languages","stargazers_url":"https://api.github.com/repos/facebook/react/stargazers","contributors_url":"https://api.github.com/repos/facebook/react/contributors","subscribers_url":"https://api.github.com/repos/facebook/react/subscribers","subscription_url":"https://api.github.com/repos/facebook/react/subscription","commits_url":"https://api.github.com/repos/facebook/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/facebook/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/facebook/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/facebook/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/facebook/react/contents/{+path}","compare_url":"https://api.github.com/repos/facebook/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/facebook/react/merges","archive_url":"https://api.github.com/repos/facebook/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/facebook/react/downloads","issues_url":"https://api.github.com/repos/facebook/react/issues{/number}","pulls_url":"https://api.github.com/repos/facebook/react/pulls{/number}","milestones_url":"https://api.github.com/repos/facebook/react/milestones{/number}","notifications_url":"https://api.github.com/repos/facebook/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/facebook/react/labels{/name}","releases_url":"https://api.github.com/repos/facebook/react/releases{/id}","deployments_url":"https://api.github.com/repos/facebook/react/deployments","created_at":"2013-05-24T16:15:54Z","updated_at":"2018-08-01T16:43:13Z","pushed_at":"2018-08-01T16:08:04Z","git_url":"git://github.com/facebook/react.git","ssh_url":"git@github.com:facebook/react.git","clone_url":"https://github.com/facebook/react.git","svn_url":"https://github.com/facebook/react","homepage":"https://reactjs.org","size":137151,"stargazers_count":107728,"watchers_count":107728,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":19218,"mirror_url":null,"archived":false,"open_issues_count":487,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":19218,"open_issues":487,"watchers":107728,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/12063"},"html":{"href":"https://github.com/facebook/react/pull/12063"},"issue":{"href":"https://api.github.com/repos/facebook/react/issues/12063"},"comments":{"href":"https://api.github.com/repos/facebook/react/issues/12063/comments"},"review_comments":{"href":"https://api.github.com/repos/facebook/react/pulls/12063/comments"},"review_comment":{"href":"https://api.github.com/repos/facebook/react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/facebook/react/pulls/12063/commits"},"statuses":{"href":"https://api.github.com/repos/facebook/react/statuses/9ed3f95401c809bd4c57578a424c8b931841c060"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"gaearon"}}