next.js

ce422240 - feat: display text diff for text mismatch hydration errors (#62684)

feat: display text diff for text mismatch hydration errors (#62684) ### What Keep improving the hydration erros. Currently we divide the hydration mismatch types into two categories, html tag mismatch and text mismatch. We're displaying the mismatched text content between server and client here since we have it in the component stack and warnings. We've already made some improvements in #62590 , here we carry on improving the highlited text into red and bold that is much easier for you to spot on. This updated a few long snapshots that we could collapse and show only the text content difference instead of all the component stack. ### Screenshots (Dark and light modes) #### Mismatch html tags <img width="360" src="https://github.com/vercel/next.js/assets/4800338/f721b374-69cc-4600-a09d-bef87e885fab"><img width="360" src="https://github.com/vercel/next.js/assets/4800338/1abf2572-2be8-4359-a652-8ba39aaccfd3"> #### Mismatch text content <img width="360" src="https://github.com/vercel/next.js/assets/4800338/7f0d2215-8bc0-4fba-9c92-6c44efa29531"><img width="360" src="https://github.com/vercel/next.js/assets/4800338/656d1e1a-3157-4bcf-a239-74bb81fcb4c4"> #### Large content mismatch ### Why I was intended to bring a html diff between server and client html content but turns out the diff result could be giant and not ideal due to few reasons. So we switched to the path of leveraging component stack and mismatch contents. React reordering the tags after hydration. For instance the `script` or `link` tags could be hoist by React Float, so the lines of html is are to preserved. so the diff is hard to be super accurate unless your mismatch is small. If you're mismatch a component with rich html content, it could be a pretty large diff. Another case is if you have a bad nesting html like `<p> ...<span>... <p>my text</p> ...</span>... <p>` where there're many span in between, the final different could also be hudge as browser will close the first `<p>` tag and the rest content will go into the diff. Hence we're going with the component and text content diff. Closes NEXT-2645