to span, not much diff

vercel · Jan 14, 2025 · f3ae0fa · f3ae0fa
1 parent 14cdf22
commit f3ae0fa
Showing 1 changed file with 29 additions and 40 deletions.
diff --git a/...dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx b/...dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx
@@ -92,7 +92,7 @@ export function PseudoHtmlDiff({
           const sign = trimmedLine[0]
           trimmedLine = trimmedLine.slice(1).trim() // trim spaces after sign
           diffHtmlStack.push(
-            <CodeLine
+            <span
               key={'comp-diff' + index}
               data-nextjs-container-errors-pseudo-html--diff={
                 sign === '+' ? 'add' : 'remove'
@@ -111,7 +111,7 @@ export function PseudoHtmlDiff({
                 {trimmedLine}
                 {'\n'}
               </span>
-            </CodeLine>
+            </span>
           )
         } else if (currentComponentIndex >= 0) {
           const isUserLandComponent = trimmedLine.startsWith(
@@ -121,29 +121,29 @@ export function PseudoHtmlDiff({
           if (isUserLandComponent || trimmedLine === '...') {
             currentComponentIndex--
             componentStacks.push(
-              <CodeLine key={'comp-diff' + index}>
+              <span key={'comp-diff' + index}>
                 {spaces}
                 {trimmedLine}
                 {'\n'}
-              </CodeLine>
+              </span>
             )
           } else if (!isHtmlCollapsed) {
             componentStacks.push(
-              <CodeLine key={'comp-diff' + index}>
+              <span key={'comp-diff' + index}>
                 {spaces}
                 {trimmedLine}
                 {'\n'}
-              </CodeLine>
+              </span>
             )
           }
         } else if (!isHtmlCollapsed) {
           // In general, if it's not collapsed, show the whole diff
           componentStacks.push(
-            <CodeLine key={'comp-diff' + index}>
+            <span key={'comp-diff' + index}>
               {spaces}
               {trimmedLine}
               {'\n'}
-            </CodeLine>
+            </span>
           )
         }
       })
@@ -200,7 +200,7 @@ export function PseudoHtmlDiff({
 
       if ((isHtmlTagsWarning && isAdjacentTag) || isLastFewFrames) {
         const codeLine = (
-          <CodeLine>
+          <span>
             {spaces}
             <span
               {...adjProps}
@@ -215,7 +215,7 @@ export function PseudoHtmlDiff({
             >
               {`<${component}>\n`}
             </span>
-          </CodeLine>
+          </span>
         )
         lastText = component
 
@@ -265,24 +265,24 @@ export function PseudoHtmlDiff({
         // hydration type is "text", represent [server content, client content]
         wrappedCodeLine = (
           <Fragment key={nestedHtmlStack.length}>
-            <CodeLine data-nextjs-container-errors-pseudo-html--diff="remove">
+            <span data-nextjs-container-errors-pseudo-html--diff="remove">
               {spaces + `"${firstContent}"\n`}
-            </CodeLine>
-            <CodeLine data-nextjs-container-errors-pseudo-html--diff="add">
+            </span>
+            <span data-nextjs-container-errors-pseudo-html--diff="add">
               {spaces + `"${secondContent}"\n`}
-            </CodeLine>
+            </span>
           </Fragment>
         )
       } else if (hydrationMismatchType === 'text-in-tag') {
         // hydration type is "text-in-tag", represent [parent tag, mismatch content]
         wrappedCodeLine = (
           <Fragment key={nestedHtmlStack.length}>
-            <CodeLine data-nextjs-container-errors-pseudo-html--tag-adjacent>
+            <span data-nextjs-container-errors-pseudo-html--tag-adjacent>
               {spaces + `<${secondContent}>\n`}
-            </CodeLine>
-            <CodeLine data-nextjs-container-errors-pseudo-html--diff="remove">
+            </span>
+            <span data-nextjs-container-errors-pseudo-html--diff="remove">
               {spaces + `  "${firstContent}"\n`}
-            </CodeLine>
+            </span>
           </Fragment>
         )
       }
@@ -304,37 +304,22 @@ export function PseudoHtmlDiff({
 
   return (
     <div data-nextjs-container-errors-pseudo-html>
-      <CodeLine>
+      <span>
         <button
           tabIndex={10} // match CallStackFrame
           data-nextjs-container-errors-pseudo-html-collapse
           onClick={() => toggleCollapseHtml(!isHtmlCollapsed)}
         >
           <CollapseIcon collapsed={isHtmlCollapsed} />
         </button>
-      </CodeLine>
+      </span>
       <pre {...props}>
         <code>{htmlComponents}</code>
       </pre>
     </div>
   )
 }
 
-function CodeLine({
-  children,
-  className,
-  ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={`error-overlay-hydration-error-code-line ${className || ''}`}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
 function PlusIcon() {
   return (
     <svg
@@ -409,6 +394,15 @@ export const PSEUDO_HTML_DIFF_STYLES = css`
     color: var(--color-accents-1);
   }
 
+  [data-nextjs-container-errors-pseudo-html] > span {
+    display: block;
+    height: var(--size-5);
+  }
+  [data-nextjs-container-errors-pseudo-html] > pre > code > span {
+    display: block;
+    height: var(--size-5);
+  }
+
   .nextjs__container_errors__component-stack {
     margin: 0;
   }
@@ -421,9 +415,4 @@ export const PSEUDO_HTML_DIFF_STYLES = css`
   .error-overlay-hydration-error-diff-minus-icon {
     color: var(--color-red-900);
   }
-
-  .error-overlay-hydration-error-code-line {
-    height: var(--size-5);
-    padding: 0 var(--size-4);
-  }
 `