From 006922cde94896b301b71de5a5e504445cb4e76b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 24 Oct 2024 11:33:45 +0200
Subject: [PATCH] Show all diff when uncollapse

---
 .../RuntimeError/component-stack-pseudo-html.tsx      | 11 ++++++++++-
 .../acceptance-app/hydration-error.test.ts            |  3 ++-
 test/development/acceptance/hydration-error.test.ts   |  1 +
 3 files changed, 13 insertions(+), 2 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 58b2e2d199665..5f893ae26e2d8 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
@@ -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
index e62451701d4c7..46125fb06d9c5 100644
--- 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
index 7b68227454e7b..a8ff50faade8c 100644
--- 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"
         `)