From 1041f56ddc969c2174dc46472b70dd1094c4b3ca Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 15 Mar 2024 22:26:31 +0100 Subject: [PATCH 1/2] Polish the display color styles for component diff --- .../component-stack-pseudo-html.tsx | 68 +++++++++++++------ .../internal/container/RuntimeError/index.tsx | 3 + 2 files changed, 51 insertions(+), 20 deletions(-) diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx index dac8a494c305b..2468b8f55ab60 100644 --- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx +++ b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx @@ -2,6 +2,10 @@ import { useMemo, Fragment, useState } from 'react' import type { ComponentStackFrame } from '../../helpers/parse-component-stack' import { CollapseIcon } from '../../icons/CollapseIcon' +function getAdjacentProps(isAdj: boolean) { + return { 'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj } +} + /** * * Format component stack into pseudo HTML @@ -13,27 +17,42 @@ import { CollapseIcon } from '../../icons/CollapseIcon' * 
  *  {`
  *    
- *       

- *       ^^^
- *         

- *         ^^^
+ *       

+ *         

  *  `}
  *
* ``` * * For text mismatch, it will render it for the code block * - * ```diff + * ``` * 
  * {`
  *   
  *     

- * -     "Server Text"
- * +     "Client Text"
+ *       "Server Text" (green)
+ *       "Client Text" (red)
  *     

  *   
  * `}
  * ```
+ *
+ * For bad text under a tag it will render it for the code block,
+ * e.g. "Mismatched Text" under 

+ *
+ * ```
+ * 
+ * {`
+ *   
+ *     

+ *       

+ *         "Mismatched Text" (red)
+ *      

+ *     

+ *   
+ * `}
+ * ```
+ *
  */
 export function PseudoHtmlDiff({
   componentStackFrames,
@@ -68,7 +87,7 @@ export function PseudoHtmlDiff({
         // When component is the server or client tag name, highlight it
 
         const isHighlightedTag = tagNames.includes(component)
-        const isRelatedTag =
+        const isAdjacentTag =
           isHighlightedTag ||
           tagNames.includes(prevComponent) ||
           tagNames.includes(nextComponent)
@@ -76,17 +95,22 @@ export function PseudoHtmlDiff({
         const isLastFewFrames =
           !isHtmlTagsWarning && index >= componentList.length - 6
 
-        if ((isHtmlTagsWarning && isRelatedTag) || isLastFewFrames) {
+        const adjProps = getAdjacentProps(isAdjacentTag)
+
+        if ((isHtmlTagsWarning && isAdjacentTag) || isLastFewFrames) {
           const codeLine = (
             
               {spaces}
               
                 {`<${component}>\n`}
               
@@ -97,9 +121,11 @@ export function PseudoHtmlDiff({
           const wrappedCodeLine = (
             
               {codeLine}
-              {/* Add ^^^^ to the target tags */}
+              {/* Add ^^^^ to the target tags used for snapshots but not displayed for users */}
               {isHighlightedTag && (
-                {spaces + '^'.repeat(component.length + 2) + '\n'}
+                
               )}
             
           )
@@ -114,7 +140,7 @@ export function PseudoHtmlDiff({
 
           if (!isHtmlCollapsed || isLastFewFrames) {
             nestedHtmlStack.push(
-              
+              
                 {spaces}
                 {'<' + component + '>\n'}
               
@@ -122,7 +148,7 @@ export function PseudoHtmlDiff({
           } else if (isHtmlCollapsed && lastText !== '...') {
             lastText = '...'
             nestedHtmlStack.push(
-              
+              
                 {spaces}
                 {'...\n'}
               
@@ -151,7 +177,9 @@ export function PseudoHtmlDiff({
         // hydration type is "text-in-tag", represent [parent tag, mismatch content]
         wrappedCodeLine = (
           
-            {spaces + `<${secondContent}>\n`}
+            
+              {spaces + `<${secondContent}>\n`}
+            
             
               {spaces + `  "${firstContent}"\n`}
             
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
index 2d2851867da3b..e6f0ac4fb78e8 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
@@ -210,4 +210,7 @@ export const styles = css`
     color: var(--color-ansi-red);
     font-weight: bold;
   }
+  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {
+    color: var(--color-accents-3);
+  }
 `

From 5498c3b890df707a86e3297b44ab54579ec5f421 Mon Sep 17 00:00:00 2001
From: Jiachi Liu 
Date: Fri, 15 Mar 2024 22:44:40 +0100
Subject: [PATCH 2/2] fix tests

---
 .../container/RuntimeError/component-stack-pseudo-html.tsx   | 2 +-
 .../internal/container/RuntimeError/index.tsx                | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
index 2468b8f55ab60..db1bec664331a 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
@@ -123,7 +123,7 @@ export function PseudoHtmlDiff({
               {codeLine}
               {/* Add ^^^^ to the target tags used for snapshots but not displayed for users */}
               {isHighlightedTag && (
-