Show all diff when uncollapse (#71792)

vercel · Oct 24, 2024 · a8de873 · a8de873
1 parent eabfdea
commit a8de873
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/...ponents/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx b/...ponents/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
@@ -85,7 +85,7 @@ export function PseudoHtmlDiff({
       reactComponentDiffLines.forEach((line, index) => {
         let trimmedLine = line.trim()
         const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-'
-        const spaces = ' '.repeat(componentStacks.length * 2)
+        const spaces = ' '.repeat(Math.max(componentStacks.length * 2, 1))
 
         if (isDiffLine) {
           const sign = trimmedLine[0]
@@ -126,6 +126,15 @@ export function PseudoHtmlDiff({
               </span>
             )
           }
+        } else if (!isHtmlCollapsed) {
+          // In general, if it's not collapsed, show the whole diff
+          componentStacks.push(
+            <span key={'comp-diff' + index}>
+              {spaces}
+              {trimmedLine}
+              {'\n'}
+            </span>
+          )
         }
       })
       return componentStacks.concat(diffHtmlStack)

diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
@@ -212,7 +212,7 @@ describe('Error overlay for hydration errors in App router', () => {
     expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const pseudoHtml = await session.getRedboxComponentStack()
-    expect(pseudoHtml).toMatchInlineSnapshot(`"-className="server-html""`)
+    expect(pseudoHtml).toMatchInlineSnapshot(`"- className="server-html""`)
 
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
       `"Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used"`
@@ -960,6 +960,7 @@ describe('Error overlay for hydration errors in App router', () => {
                               <Mismatch>
                                 <p>
                                   <span>
+                                    ...
         +                            client
         -                            server"
       `)

diff --git a/test/development/acceptance/hydration-error.test.ts b/test/development/acceptance/hydration-error.test.ts
@@ -1277,6 +1277,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
                           <Mismatch>
                             <p>
                               <span>
+                                ...
           +                      client
           -                      server"
         `)
-Original file line number
+Diff line change
@@ Expand Up @@
                               <Mismatch>
                                 <p>
                                   <span>
+                                    ...
               +                      client
               -                      server"
             `)
@@ Expand Down @@