next 15.2.0-canary.51 → 15.2.0-canary.52

package/dist/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.js

@@ -17,258 +17,22 @@ _export(exports, {
         return PSEUDO_HTML_DIFF_STYLES;
     },
     PseudoHtmlDiff: function() {
-        return PseudoHtmlDiff;
+        return _diffview.PseudoHtmlDiff;
     }
 });
 const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _collapseicon = require("../../icons/collapse-icon");
 const _nooptemplate = require("../../helpers/noop-template");
+const _diffview = require("../../../../hydration-diff/diff-view");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-3) 0;\n    margin: var(--size-2) var(--size-4) var(--size-4);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    background: var(--color-amber-300);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error]::before {\n    content: '>';\n    color: var(--color-red-900);\n    float: left;\n    width: 0;\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-8);\n  }\n\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']::before {\n    content: '+';\n    color: var(--color-green-900);\n    float: left;\n    width: 0;\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-8);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']::before {\n    content: '-';\n    color: var(--color-red-900);\n    float: left;\n    width: 0;\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-8);\n  }\n  ",
-        "\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n"
+        "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-3) 0;\n    margin: var(--size-2) var(--size-4) var(--size-4);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error]\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  ",
+        "\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n"
     ]);
     _templateObject = function() {
         return data;
     };
     return data;
 }
-function getAdjacentProps(isAdj) {
-    return {
-        'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj
-    };
-}
-function PseudoHtmlDiff(param) {
-    let { componentStackFrames, firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props } = param;
-    const isHtmlTagsWarning = hydrationMismatchType === 'tag';
-    const isReactHydrationDiff = !!reactOutputComponentDiff;
-    // For text mismatch, mismatched text will take 2 rows, so we display 4 rows of component stack
-    const MAX_NON_COLLAPSED_FRAMES = isHtmlTagsWarning ? 6 : 4;
-    const [isHtmlCollapsed, toggleCollapseHtml] = (0, _react.useState)(true);
-    const htmlComponents = (0, _react.useMemo)(()=>{
-        const componentStacks = [];
-        // React 19 unified mismatch
-        if (isReactHydrationDiff) {
-            let currentComponentIndex = componentStackFrames.length - 1;
-            const reactComponentDiffLines = reactOutputComponentDiff.split('\n');
-            const diffHtmlStack = [];
-            reactComponentDiffLines.forEach((line, index)=>{
-                let trimmedLine = line.trim();
-                const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-';
-                const spaces = ' '.repeat(Math.max(componentStacks.length * 2, 1));
-                if (isDiffLine) {
-                    const sign = trimmedLine[0];
-                    trimmedLine = trimmedLine.slice(1).trim() // trim spaces after sign
-                    ;
-                    diffHtmlStack.push(/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        "data-nextjs-container-errors-pseudo-html-line": true,
-                        "data-nextjs-container-errors-pseudo-html--diff": sign === '+' ? 'add' : 'remove',
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                            children: [
-                                spaces.slice(2),
-                                trimmedLine,
-                                '\n'
-                            ]
-                        })
-                    }, 'comp-diff' + index));
-                } else if (currentComponentIndex >= 0) {
-                    const isUserLandComponent = trimmedLine.startsWith('<' + componentStackFrames[currentComponentIndex].component);
-                    // If it's matched userland component or it's ... we will keep the component stack in diff
-                    if (isUserLandComponent || trimmedLine === '...') {
-                        currentComponentIndex--;
-                        componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            children: [
-                                spaces,
-                                trimmedLine,
-                                '\n'
-                            ]
-                        }, 'comp-diff' + index));
-                    } else if (!isHtmlCollapsed) {
-                        componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            children: [
-                                spaces,
-                                trimmedLine,
-                                '\n'
-                            ]
-                        }, 'comp-diff' + index));
-                    }
-                } else if (!isHtmlCollapsed) {
-                    // In general, if it's not collapsed, show the whole diff
-                    componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                        "data-nextjs-container-errors-pseudo-html-line": true,
-                        children: [
-                            spaces,
-                            trimmedLine,
-                            '\n'
-                        ]
-                    }, 'comp-diff' + index));
-                }
-            });
-            return componentStacks.concat(diffHtmlStack);
-        }
-        const nestedHtmlStack = [];
-        const tagNames = isHtmlTagsWarning ? [
-            firstContent.replace(/<|>/g, ''),
-            secondContent.replace(/<|>/g, '')
-        ] : [];
-        let lastText = '';
-        const componentStack = componentStackFrames.map((frame)=>frame.component).reverse();
-        // [child index, parent index]
-        const matchedIndex = [
-            -1,
-            -1
-        ];
-        if (isHtmlTagsWarning) {
-            // Reverse search for the child tag
-            for(let i = componentStack.length - 1; i >= 0; i--){
-                if (componentStack[i] === tagNames[0]) {
-                    matchedIndex[0] = i;
-                    break;
-                }
-            }
-            // Start searching parent tag from child tag above
-            for(let i = matchedIndex[0] - 1; i >= 0; i--){
-                if (componentStack[i] === tagNames[1]) {
-                    matchedIndex[1] = i;
-                    break;
-                }
-            }
-        }
-        componentStack.forEach((component, index, componentList)=>{
-            const spaces = ' '.repeat(nestedHtmlStack.length * 2);
-            // When component is the server or client tag name, highlight it
-            const isHighlightedTag = isHtmlTagsWarning ? index === matchedIndex[0] || index === matchedIndex[1] : tagNames.includes(component);
-            const isAdjacentTag = isHighlightedTag || Math.abs(index - matchedIndex[0]) <= 1 || Math.abs(index - matchedIndex[1]) <= 1;
-            const isLastFewFrames = !isHtmlTagsWarning && index >= componentList.length - 6;
-            const adjProps = getAdjacentProps(isAdjacentTag);
-            if (isHtmlTagsWarning && isAdjacentTag || isLastFewFrames) {
-                const codeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                    "data-nextjs-container-errors-pseudo-html-line": true,
-                    ...isHighlightedTag ? {
-                        'data-nextjs-container-errors-pseudo-html-line--error': true
-                    } : undefined,
-                    children: [
-                        spaces,
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            ...adjProps,
-                            children: "<" + component + ">\n"
-                        })
-                    ]
-                });
-                lastText = component;
-                const wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                    children: [
-                        codeLine,
-                        isHighlightedTag && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html--hint": true,
-                            children: spaces + '^'.repeat(component.length + 2) + '\n'
-                        })
-                    ]
-                }, nestedHtmlStack.length);
-                nestedHtmlStack.push(wrappedCodeLine);
-            } else {
-                if (nestedHtmlStack.length >= MAX_NON_COLLAPSED_FRAMES && isHtmlCollapsed) {
-                    return;
-                }
-                if (!isHtmlCollapsed || isLastFewFrames) {
-                    nestedHtmlStack.push(/*#__PURE__*/ (0, _react.createElement)("span", {
-                        ...adjProps,
-                        key: nestedHtmlStack.length,
-                        "data-nextjs-container-errors-pseudo-html-line": true,
-                        children: [
-                            spaces,
-                            '<' + component + '>\n'
-                        ]
-                    }));
-                } else if (isHtmlCollapsed && lastText !== '...') {
-                    lastText = '...';
-                    nestedHtmlStack.push(/*#__PURE__*/ (0, _react.createElement)("span", {
-                        ...adjProps,
-                        key: nestedHtmlStack.length,
-                        "data-nextjs-container-errors-pseudo-html-line": true,
-                        children: [
-                            spaces,
-                            '...\n'
-                        ]
-                    }));
-                }
-            }
-        });
-        // Hydration mismatch: text or text-tag
-        if (!isHtmlTagsWarning) {
-            const spaces = ' '.repeat(nestedHtmlStack.length * 2);
-            let wrappedCodeLine;
-            if (hydrationMismatchType === 'text') {
-                // hydration type is "text", represent [server content, client content]
-                wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            "data-nextjs-container-errors-pseudo-html--diff": "remove",
-                            children: spaces + ('"' + firstContent + '"\n')
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            "data-nextjs-container-errors-pseudo-html--diff": "add",
-                            children: spaces + ('"' + secondContent + '"\n')
-                        })
-                    ]
-                }, nestedHtmlStack.length);
-            } else if (hydrationMismatchType === 'text-in-tag') {
-                // hydration type is "text-in-tag", represent [parent tag, mismatch content]
-                wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            "data-nextjs-container-errors-pseudo-html--tag-adjacent": true,
-                            children: spaces + ("<" + secondContent + ">\n")
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            "data-nextjs-container-errors-pseudo-html--diff": "remove",
-                            children: spaces + ('  "' + firstContent + '"\n')
-                        })
-                    ]
-                }, nestedHtmlStack.length);
-            }
-            nestedHtmlStack.push(wrappedCodeLine);
-        }
-        return nestedHtmlStack;
-    }, [
-        componentStackFrames,
-        isHtmlCollapsed,
-        firstContent,
-        secondContent,
-        isHtmlTagsWarning,
-        hydrationMismatchType,
-        MAX_NON_COLLAPSED_FRAMES,
-        isReactHydrationDiff,
-        reactOutputComponentDiff
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        "data-nextjs-container-errors-pseudo-html": true,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
-                tabIndex: 10,
-                "data-nextjs-container-errors-pseudo-html-collapse": true,
-                onClick: ()=>toggleCollapseHtml(!isHtmlCollapsed),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_collapseicon.CollapseIcon, {
-                    collapsed: isHtmlCollapsed
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
-                ...props,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                    children: htmlComponents
-                })
-            })
-        ]
-    });
-}
 const PSEUDO_HTML_DIFF_STYLES = (0, _nooptemplate.noop)(_templateObject(), '');
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {

package/dist/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.tsx"],"sourcesContent":["import { useMemo, Fragment, useState } from 'react'\nimport type { ComponentStackFrame } from '../../helpers/parse-component-stack'\nimport { CollapseIcon } from '../../icons/collapse-icon'\nimport { noop as css } from '../../helpers/noop-template'\n\nfunction getAdjacentProps(isAdj: boolean) {\n  return { 'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj }\n}\n\n/**\n *\n * Format component stack into pseudo HTML\n * component stack is an array of strings, e.g.: ['p', 'p', 'Page', ...]\n *\n * For html tags mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n *  <code>{`\n *    <Page>\n *       <p red>\n *         <p red>\n *  `}</code>\n * </pre>\n * ```\n *\n * For text mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <p>\n *       \"Server Text\" (green)\n *       \"Client Text\" (red)\n *     </p>\n *   </Page>\n * `}</code>\n * ```\n *\n * For bad text under a tag it will render it for the code block,\n * e.g. \"Mismatched Text\" under <p>\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <div>\n *       <p>\n *         \"Mismatched Text\" (red)\n *      </p>\n *     </div>\n *   </Page>\n * `}</code>\n * ```\n *\n */\nexport function PseudoHtmlDiff({\n  componentStackFrames,\n  firstContent,\n  secondContent,\n  hydrationMismatchType,\n  reactOutputComponentDiff,\n  ...props\n}: {\n  componentStackFrames: ComponentStackFrame[]\n  firstContent: string\n  secondContent: string\n  reactOutputComponentDiff: string | undefined\n  hydrationMismatchType: 'tag' | 'text' | 'text-in-tag'\n} & React.HTMLAttributes<HTMLPreElement>) {\n  const isHtmlTagsWarning = hydrationMismatchType === 'tag'\n  const isReactHydrationDiff = !!reactOutputComponentDiff\n\n  // For text mismatch, mismatched text will take 2 rows, so we display 4 rows of component stack\n  const MAX_NON_COLLAPSED_FRAMES = isHtmlTagsWarning ? 6 : 4\n  const [isHtmlCollapsed, toggleCollapseHtml] = useState(true)\n\n  const htmlComponents = useMemo(() => {\n    const componentStacks: React.ReactNode[] = []\n    // React 19 unified mismatch\n    if (isReactHydrationDiff) {\n      let currentComponentIndex = componentStackFrames.length - 1\n      const reactComponentDiffLines = reactOutputComponentDiff.split('\\n')\n      const diffHtmlStack: React.ReactNode[] = []\n      reactComponentDiffLines.forEach((line, index) => {\n        let trimmedLine = line.trim()\n        const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-'\n        const spaces = ' '.repeat(Math.max(componentStacks.length * 2, 1))\n\n        if (isDiffLine) {\n          const sign = trimmedLine[0]\n          trimmedLine = trimmedLine.slice(1).trim() // trim spaces after sign\n          diffHtmlStack.push(\n            <span\n              key={'comp-diff' + index}\n              data-nextjs-container-errors-pseudo-html-line\n              data-nextjs-container-errors-pseudo-html--diff={\n                sign === '+' ? 'add' : 'remove'\n              }\n            >\n              <span>\n                {/* Slice 2 spaces for the icon */}\n                {spaces.slice(2)}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            </span>\n          )\n        } else if (currentComponentIndex >= 0) {\n          const isUserLandComponent = trimmedLine.startsWith(\n            '<' + componentStackFrames[currentComponentIndex].component\n          )\n          // If it's matched userland component or it's ... we will keep the component stack in diff\n          if (isUserLandComponent || trimmedLine === '...') {\n            currentComponentIndex--\n            componentStacks.push(\n              <span\n                data-nextjs-container-errors-pseudo-html-line\n                key={'comp-diff' + index}\n              >\n                {spaces}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            )\n          } else if (!isHtmlCollapsed) {\n            componentStacks.push(\n              <span\n                data-nextjs-container-errors-pseudo-html-line\n                key={'comp-diff' + index}\n              >\n                {spaces}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            )\n          }\n        } else if (!isHtmlCollapsed) {\n          // In general, if it's not collapsed, show the whole diff\n          componentStacks.push(\n            <span\n              data-nextjs-container-errors-pseudo-html-line\n              key={'comp-diff' + index}\n            >\n              {spaces}\n              {trimmedLine}\n              {'\\n'}\n            </span>\n          )\n        }\n      })\n      return componentStacks.concat(diffHtmlStack)\n    }\n\n    const nestedHtmlStack: React.ReactNode[] = []\n    const tagNames = isHtmlTagsWarning\n      ? // tags could have < or > in the name, so we always remove them to match\n        [firstContent.replace(/<|>/g, ''), secondContent.replace(/<|>/g, '')]\n      : []\n\n    let lastText = ''\n\n    const componentStack = componentStackFrames\n      .map((frame) => frame.component)\n      .reverse()\n\n    // [child index, parent index]\n    const matchedIndex = [-1, -1]\n    if (isHtmlTagsWarning) {\n      // Reverse search for the child tag\n      for (let i = componentStack.length - 1; i >= 0; i--) {\n        if (componentStack[i] === tagNames[0]) {\n          matchedIndex[0] = i\n          break\n        }\n      }\n      // Start searching parent tag from child tag above\n      for (let i = matchedIndex[0] - 1; i >= 0; i--) {\n        if (componentStack[i] === tagNames[1]) {\n          matchedIndex[1] = i\n          break\n        }\n      }\n    }\n\n    componentStack.forEach((component, index, componentList) => {\n      const spaces = ' '.repeat(nestedHtmlStack.length * 2)\n\n      // When component is the server or client tag name, highlight it\n      const isHighlightedTag = isHtmlTagsWarning\n        ? index === matchedIndex[0] || index === matchedIndex[1]\n        : tagNames.includes(component)\n      const isAdjacentTag =\n        isHighlightedTag ||\n        Math.abs(index - matchedIndex[0]) <= 1 ||\n        Math.abs(index - matchedIndex[1]) <= 1\n\n      const isLastFewFrames =\n        !isHtmlTagsWarning && index >= componentList.length - 6\n\n      const adjProps = getAdjacentProps(isAdjacentTag)\n\n      if ((isHtmlTagsWarning && isAdjacentTag) || isLastFewFrames) {\n        const codeLine = (\n          <span\n            data-nextjs-container-errors-pseudo-html-line\n            {...(isHighlightedTag\n              ? {\n                  'data-nextjs-container-errors-pseudo-html-line--error': true,\n                }\n              : undefined)}\n          >\n            {spaces}\n            <span {...adjProps}>{`<${component}>\\n`}</span>\n          </span>\n        )\n        lastText = component\n\n        const wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            {codeLine}\n            {/* Add ^^^^ to the target tags used for snapshots but not displayed for users */}\n            {isHighlightedTag && (\n              <span data-nextjs-container-errors-pseudo-html--hint>\n                {spaces + '^'.repeat(component.length + 2) + '\\n'}\n              </span>\n            )}\n          </Fragment>\n        )\n        nestedHtmlStack.push(wrappedCodeLine)\n      } else {\n        if (\n          nestedHtmlStack.length >= MAX_NON_COLLAPSED_FRAMES &&\n          isHtmlCollapsed\n        ) {\n          return\n        }\n\n        if (!isHtmlCollapsed || isLastFewFrames) {\n          nestedHtmlStack.push(\n            <span\n              {...adjProps}\n              key={nestedHtmlStack.length}\n              data-nextjs-container-errors-pseudo-html-line\n            >\n              {spaces}\n              {'<' + component + '>\\n'}\n            </span>\n          )\n        } else if (isHtmlCollapsed && lastText !== '...') {\n          lastText = '...'\n          nestedHtmlStack.push(\n            <span\n              {...adjProps}\n              key={nestedHtmlStack.length}\n              data-nextjs-container-errors-pseudo-html-line\n            >\n              {spaces}\n              {'...\\n'}\n            </span>\n          )\n        }\n      }\n    })\n    // Hydration mismatch: text or text-tag\n    if (!isHtmlTagsWarning) {\n      const spaces = ' '.repeat(nestedHtmlStack.length * 2)\n      let wrappedCodeLine\n      if (hydrationMismatchType === 'text') {\n        // hydration type is \"text\", represent [server content, client content]\n        wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            <span\n              data-nextjs-container-errors-pseudo-html-line\n              data-nextjs-container-errors-pseudo-html--diff=\"remove\"\n            >\n              {spaces + `\"${firstContent}\"\\n`}\n            </span>\n            <span\n              data-nextjs-container-errors-pseudo-html-line\n              data-nextjs-container-errors-pseudo-html--diff=\"add\"\n            >\n              {spaces + `\"${secondContent}\"\\n`}\n            </span>\n          </Fragment>\n        )\n      } else if (hydrationMismatchType === 'text-in-tag') {\n        // hydration type is \"text-in-tag\", represent [parent tag, mismatch content]\n        wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            <span\n              data-nextjs-container-errors-pseudo-html-line\n              data-nextjs-container-errors-pseudo-html--tag-adjacent\n            >\n              {spaces + `<${secondContent}>\\n`}\n            </span>\n            <span\n              data-nextjs-container-errors-pseudo-html-line\n              data-nextjs-container-errors-pseudo-html--diff=\"remove\"\n            >\n              {spaces + `  \"${firstContent}\"\\n`}\n            </span>\n          </Fragment>\n        )\n      }\n      nestedHtmlStack.push(wrappedCodeLine)\n    }\n\n    return nestedHtmlStack\n  }, [\n    componentStackFrames,\n    isHtmlCollapsed,\n    firstContent,\n    secondContent,\n    isHtmlTagsWarning,\n    hydrationMismatchType,\n    MAX_NON_COLLAPSED_FRAMES,\n    isReactHydrationDiff,\n    reactOutputComponentDiff,\n  ])\n\n  return (\n    <div data-nextjs-container-errors-pseudo-html>\n      <button\n        tabIndex={10} // match CallStackFrame\n        data-nextjs-container-errors-pseudo-html-collapse\n        onClick={() => toggleCollapseHtml(!isHtmlCollapsed)}\n      >\n        <CollapseIcon collapsed={isHtmlCollapsed} />\n      </button>\n      <pre {...props}>\n        <code>{htmlComponents}</code>\n      </pre>\n    </div>\n  )\n}\n\nexport const PSEUDO_HTML_DIFF_STYLES = css`\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-3) 0;\n    margin: var(--size-2) var(--size-4) var(--size-4);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    background: var(--color-amber-300);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error]::before {\n    content: '>';\n    color: var(--color-red-900);\n    float: left;\n    width: 0;\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-8);\n  }\n\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']::before {\n    content: '+';\n    color: var(--color-green-900);\n    float: left;\n    width: 0;\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-8);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']::before {\n    content: '-';\n    color: var(--color-red-900);\n    float: left;\n    width: 0;\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-8);\n  }\n  ${/* hide but text are still accessible in DOM */ ''}\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n`\n"],"names":["PSEUDO_HTML_DIFF_STYLES","PseudoHtmlDiff","getAdjacentProps","isAdj","componentStackFrames","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","props","isHtmlTagsWarning","isReactHydrationDiff","MAX_NON_COLLAPSED_FRAMES","isHtmlCollapsed","toggleCollapseHtml","useState","htmlComponents","useMemo","componentStacks","currentComponentIndex","length","reactComponentDiffLines","split","diffHtmlStack","forEach","line","index","trimmedLine","trim","isDiffLine","spaces","repeat","Math","max","sign","slice","push","span","data-nextjs-container-errors-pseudo-html-line","data-nextjs-container-errors-pseudo-html--diff","isUserLandComponent","startsWith","component","concat","nestedHtmlStack","tagNames","replace","lastText","componentStack","map","frame","reverse","matchedIndex","i","componentList","isHighlightedTag","includes","isAdjacentTag","abs","isLastFewFrames","adjProps","codeLine","undefined","wrappedCodeLine","Fragment","data-nextjs-container-errors-pseudo-html--hint","key","data-nextjs-container-errors-pseudo-html--tag-adjacent","div","data-nextjs-container-errors-pseudo-html","button","tabIndex","data-nextjs-container-errors-pseudo-html-collapse","onClick","CollapseIcon","collapsed","pre","code","css"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.tsx"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nexport { PseudoHtmlDiff } from '../../../../hydration-diff/diff-view'\n\nexport const PSEUDO_HTML_DIFF_STYLES = css`\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-3) 0;\n    margin: var(--size-2) var(--size-4) var(--size-4);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error]\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  ${/* hide but text are still accessible in DOM */ ''}\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n`\n"],"names":["PSEUDO_HTML_DIFF_STYLES","PseudoHtmlDiff","css"],"mappings":";;;;;;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAFJC,cAAc;eAAdA,wBAAc;;;;8BAFK;0BAEG;;;;;;;;;;;AAExB,MAAMD,8BAA0BE,kBAAG,qBAqDU"}

package/dist/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.stories.js

@@ -40,27 +40,8 @@ const meta = {
     ]
 };
 const _default = meta;
-const sampleComponentStack = [
-    {
-        component: 'div',
-        canOpenInEditor: false
-    },
-    {
-        component: 'article',
-        canOpenInEditor: false
-    },
-    {
-        component: 'main',
-        canOpenInEditor: false
-    },
-    {
-        component: 'Home',
-        canOpenInEditor: false
-    }
-];
 const TextMismatch = {
     args: {
-        componentStackFrames: sampleComponentStack,
         firstContent: 'Server rendered content',
         secondContent: 'Client rendered content',
         hydrationMismatchType: 'text',
@@ -69,7 +50,6 @@ const TextMismatch = {
 };
 const TextInTagMismatch = {
     args: {
-        componentStackFrames: sampleComponentStack,
         firstContent: 'Mismatched content',
         secondContent: 'p',
         hydrationMismatchType: 'text-in-tag',
@@ -78,7 +58,6 @@ const TextInTagMismatch = {
 };
 const ReactUnifiedMismatch = {
     args: {
-        componentStackFrames: sampleComponentStack,
         hydrationMismatchType: 'tag',
         reactOutputComponentDiff: "<Page>\n  <Layout>\n    <div>\n-     <p>Server content</p>\n+     <p>Client content</p>"
     }

package/dist/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { PseudoHtmlDiff } from './component-stack-pseudo-html'\nimport { withShadowPortal } from '../../storybook/with-shadow-portal'\n\nconst meta: Meta<typeof PseudoHtmlDiff> = {\n  component: PseudoHtmlDiff,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof PseudoHtmlDiff>\n\nconst sampleComponentStack = [\n  {\n    component: 'div',\n    canOpenInEditor: false,\n  },\n  {\n    component: 'article',\n    canOpenInEditor: false,\n  },\n  {\n    component: 'main',\n    canOpenInEditor: false,\n  },\n  {\n    component: 'Home',\n    canOpenInEditor: false,\n  },\n]\n\nexport const TextMismatch: Story = {\n  args: {\n    componentStackFrames: sampleComponentStack,\n    firstContent: 'Server rendered content',\n    secondContent: 'Client rendered content',\n    hydrationMismatchType: 'text',\n    reactOutputComponentDiff: undefined,\n  },\n}\n\nexport const TextInTagMismatch: Story = {\n  args: {\n    componentStackFrames: sampleComponentStack,\n    firstContent: 'Mismatched content',\n    secondContent: 'p',\n    hydrationMismatchType: 'text-in-tag',\n    reactOutputComponentDiff: undefined,\n  },\n}\n\nexport const ReactUnifiedMismatch: Story = {\n  args: {\n    componentStackFrames: sampleComponentStack,\n    hydrationMismatchType: 'tag',\n    reactOutputComponentDiff: `<Page>\n  <Layout>\n    <div>\n-     <p>Server content</p>\n+     <p>Client content</p>`,\n  },\n}\n"],"names":["ReactUnifiedMismatch","TextInTagMismatch","TextMismatch","meta","component","PseudoHtmlDiff","parameters","layout","decorators","withShadowPortal","sampleComponentStack","canOpenInEditor","args","componentStackFrames","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","undefined"],"mappings":";;;;;;;;;;;;;;;;;IAsDaA,oBAAoB;eAApBA;;IAVAC,iBAAiB;eAAjBA;;IAVAC,YAAY;eAAZA;;IAtBb,OAAmB;eAAnB;;;0CAX+B;kCACE;AAEjC,MAAMC,OAAoC;IACxCC,WAAWC,wCAAc;IACzBC,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACC,kCAAgB;KAAC;AAChC;MAEA,WAAeN;AAGf,MAAMO,uBAAuB;IAC3B;QACEN,WAAW;QACXO,iBAAiB;IACnB;IACA;QACEP,WAAW;QACXO,iBAAiB;IACnB;IACA;QACEP,WAAW;QACXO,iBAAiB;IACnB;IACA;QACEP,WAAW;QACXO,iBAAiB;IACnB;CACD;AAEM,MAAMT,eAAsB;IACjCU,MAAM;QACJC,sBAAsBH;QACtBI,cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF;AAEO,MAAMjB,oBAA2B;IACtCW,MAAM;QACJC,sBAAsBH;QACtBI,cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF;AAEO,MAAMlB,uBAA8B;IACzCY,MAAM;QACJC,sBAAsBH;QACtBM,uBAAuB;QACvBC,0BAA2B;IAK7B;AACF"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { PseudoHtmlDiff } from './component-stack-pseudo-html'\nimport { withShadowPortal } from '../../storybook/with-shadow-portal'\n\nconst meta: Meta<typeof PseudoHtmlDiff> = {\n  component: PseudoHtmlDiff,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof PseudoHtmlDiff>\n\nexport const TextMismatch: Story = {\n  args: {\n    firstContent: 'Server rendered content',\n    secondContent: 'Client rendered content',\n    hydrationMismatchType: 'text',\n    reactOutputComponentDiff: undefined,\n  },\n}\n\nexport const TextInTagMismatch: Story = {\n  args: {\n    firstContent: 'Mismatched content',\n    secondContent: 'p',\n    hydrationMismatchType: 'text-in-tag',\n    reactOutputComponentDiff: undefined,\n  },\n}\n\nexport const ReactUnifiedMismatch: Story = {\n  args: {\n    hydrationMismatchType: 'tag',\n    reactOutputComponentDiff: `<Page>\n  <Layout>\n    <div>\n-     <p>Server content</p>\n+     <p>Client content</p>`,\n  },\n}\n"],"names":["ReactUnifiedMismatch","TextInTagMismatch","TextMismatch","meta","component","PseudoHtmlDiff","parameters","layout","decorators","withShadowPortal","args","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","undefined"],"mappings":";;;;;;;;;;;;;;;;;IAiCaA,oBAAoB;eAApBA;;IATAC,iBAAiB;eAAjBA;;IATAC,YAAY;eAAZA;;IAHb,OAAmB;eAAnB;;;0CAX+B;kCACE;AAEjC,MAAMC,OAAoC;IACxCC,WAAWC,wCAAc;IACzBC,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACC,kCAAgB;KAAC;AAChC;MAEA,WAAeN;AAGR,MAAMD,eAAsB;IACjCQ,MAAM;QACJC,cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF;AAEO,MAAMd,oBAA2B;IACtCS,MAAM;QACJC,cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF;AAEO,MAAMf,uBAA8B;IACzCU,MAAM;QACJG,uBAAuB;QACvBC,0BAA2B;IAK7B;AACF"}

package/dist/client/components/react-dev-overlay/hydration-diff/diff-view.d.ts

@@ -0,0 +1,54 @@
+/**
+ *
+ * Format component stack into pseudo HTML
+ * component stack is an array of strings, e.g.: ['p', 'p', 'Page', ...]
+ *
+ * For html tags mismatch, it will render it for the code block
+ *
+ * ```
+ * <pre>
+ *  <code>{`
+ *    <Page>
+ *       <p red>
+ *         <p red>
+ *  `}</code>
+ * </pre>
+ * ```
+ *
+ * For text mismatch, it will render it for the code block
+ *
+ * ```
+ * <pre>
+ * <code>{`
+ *   <Page>
+ *     <p>
+ *       "Server Text" (green)
+ *       "Client Text" (red)
+ *     </p>
+ *   </Page>
+ * `}</code>
+ * ```
+ *
+ * For bad text under a tag it will render it for the code block,
+ * e.g. "Mismatched Text" under <p>
+ *
+ * ```
+ * <pre>
+ * <code>{`
+ *   <Page>
+ *     <div>
+ *       <p>
+ *         "Mismatched Text" (red)
+ *      </p>
+ *     </div>
+ *   </Page>
+ * `}</code>
+ * ```
+ *
+ */
+export declare function PseudoHtmlDiff({ firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props }: {
+    firstContent: string;
+    secondContent: string;
+    reactOutputComponentDiff: string;
+    hydrationMismatchType: 'tag' | 'text' | 'text-in-tag';
+} & React.HTMLAttributes<HTMLPreElement>): import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/hydration-diff/diff-view.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PseudoHtmlDiff", {
+    enumerable: true,
+    get: function() {
+        return PseudoHtmlDiff;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _CollapseIcon = require("../internal/icons/CollapseIcon");
+function PseudoHtmlDiff(param) {
+    let { firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props } = param;
+    const [isDiffCollapsed, toggleCollapseHtml] = (0, _react.useState)(true);
+    const htmlComponents = (0, _react.useMemo)(()=>{
+        const componentStacks = [];
+        const reactComponentDiffLines = reactOutputComponentDiff.split('\n');
+        reactComponentDiffLines.forEach((line, index)=>{
+            let trimmedLine = line.trim();
+            const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-';
+            const isHighlightedLine = trimmedLine[0] === '>';
+            const hasSign = isDiffLine || isHighlightedLine;
+            const sign = hasSign ? trimmedLine[0] : '';
+            const signIndex = hasSign ? line.indexOf(sign) : -1;
+            const [prefix, suffix] = hasSign ? [
+                line.slice(0, signIndex),
+                line.slice(signIndex + 1)
+            ] : [
+                line,
+                ''
+            ];
+            if (isDiffLine) {
+                componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    "data-nextjs-container-errors-pseudo-html-line": true,
+                    "data-nextjs-container-errors-pseudo-html--diff": sign === '+' ? 'add' : 'remove',
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                        children: [
+                            prefix,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                "data-nextjs-container-errors-pseudo-html-line-sign": true,
+                                children: sign
+                            }),
+                            suffix,
+                            '\n'
+                        ]
+                    })
+                }, 'comp-diff' + index));
+            } else {
+                // In general, if it's not collapsed, show the whole diff
+                componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                    "data-nextjs-container-errors-pseudo-html-line": true,
+                    ...isHighlightedLine ? {
+                        'data-nextjs-container-errors-pseudo-html-line--error': true
+                    } : undefined,
+                    children: [
+                        prefix,
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            "data-nextjs-container-errors-pseudo-html-line-sign": true,
+                            children: sign
+                        }),
+                        suffix,
+                        '\n'
+                    ]
+                }, 'comp-diff' + index));
+            }
+        });
+        return componentStacks;
+    }, [
+        reactOutputComponentDiff
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-nextjs-container-errors-pseudo-html": true,
+        "data-nextjs-container-errors-pseudo-html-collapse": isDiffCollapsed,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                tabIndex: 10,
+                "data-nextjs-container-errors-pseudo-html-collapse-button": true,
+                onClick: ()=>toggleCollapseHtml(!isDiffCollapsed),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollapseIcon.CollapseIcon, {
+                    collapsed: isDiffCollapsed
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                    children: htmlComponents
+                })
+            })
+        ]
+    });
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=diff-view.js.map

package/dist/client/components/react-dev-overlay/hydration-diff/diff-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/hydration-diff/diff-view.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { CollapseIcon } from '../internal/icons/CollapseIcon'\n\n/**\n *\n * Format component stack into pseudo HTML\n * component stack is an array of strings, e.g.: ['p', 'p', 'Page', ...]\n *\n * For html tags mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n *  <code>{`\n *    <Page>\n *       <p red>\n *         <p red>\n *  `}</code>\n * </pre>\n * ```\n *\n * For text mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <p>\n *       \"Server Text\" (green)\n *       \"Client Text\" (red)\n *     </p>\n *   </Page>\n * `}</code>\n * ```\n *\n * For bad text under a tag it will render it for the code block,\n * e.g. \"Mismatched Text\" under <p>\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <div>\n *       <p>\n *         \"Mismatched Text\" (red)\n *      </p>\n *     </div>\n *   </Page>\n * `}</code>\n * ```\n *\n */\nexport function PseudoHtmlDiff({\n  firstContent,\n  secondContent,\n  hydrationMismatchType,\n  reactOutputComponentDiff,\n  ...props\n}: {\n  firstContent: string\n  secondContent: string\n  reactOutputComponentDiff: string\n  hydrationMismatchType: 'tag' | 'text' | 'text-in-tag'\n} & React.HTMLAttributes<HTMLPreElement>) {\n  const [isDiffCollapsed, toggleCollapseHtml] = useState(true)\n\n  const htmlComponents = useMemo(() => {\n    const componentStacks: React.ReactNode[] = []\n    const reactComponentDiffLines = reactOutputComponentDiff!.split('\\n')\n    reactComponentDiffLines.forEach((line, index) => {\n      let trimmedLine = line.trim()\n      const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-'\n      const isHighlightedLine = trimmedLine[0] === '>'\n      const hasSign = isDiffLine || isHighlightedLine\n      const sign = hasSign ? trimmedLine[0] : ''\n      const signIndex = hasSign ? line.indexOf(sign) : -1\n      const [prefix, suffix] = hasSign\n        ? [line.slice(0, signIndex), line.slice(signIndex + 1)]\n        : [line, '']\n\n      if (isDiffLine) {\n        componentStacks.push(\n          <span\n            key={'comp-diff' + index}\n            data-nextjs-container-errors-pseudo-html-line\n            data-nextjs-container-errors-pseudo-html--diff={\n              sign === '+' ? 'add' : 'remove'\n            }\n          >\n            <span>\n              {/* Slice 2 spaces for the icon */}\n              {prefix}\n              <span data-nextjs-container-errors-pseudo-html-line-sign>\n                {sign}\n              </span>\n              {suffix}\n              {'\\n'}\n            </span>\n          </span>\n        )\n      } else {\n        // In general, if it's not collapsed, show the whole diff\n        componentStacks.push(\n          <span\n            data-nextjs-container-errors-pseudo-html-line\n            key={'comp-diff' + index}\n            {...(isHighlightedLine\n              ? {\n                  'data-nextjs-container-errors-pseudo-html-line--error': true,\n                }\n              : undefined)}\n          >\n            {prefix}\n            <span data-nextjs-container-errors-pseudo-html-line-sign>\n              {sign}\n            </span>\n            {suffix}\n            {'\\n'}\n          </span>\n        )\n      }\n    })\n    return componentStacks\n  }, [reactOutputComponentDiff])\n\n  return (\n    <div\n      data-nextjs-container-errors-pseudo-html\n      data-nextjs-container-errors-pseudo-html-collapse={isDiffCollapsed}\n    >\n      <button\n        tabIndex={10} // match CallStackFrame\n        data-nextjs-container-errors-pseudo-html-collapse-button\n        onClick={() => toggleCollapseHtml(!isDiffCollapsed)}\n      >\n        <CollapseIcon collapsed={isDiffCollapsed} />\n      </button>\n      <pre {...props}>\n        <code>{htmlComponents}</code>\n      </pre>\n    </div>\n  )\n}\n"],"names":["PseudoHtmlDiff","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","props","isDiffCollapsed","toggleCollapseHtml","useState","htmlComponents","useMemo","componentStacks","reactComponentDiffLines","split","forEach","line","index","trimmedLine","trim","isDiffLine","isHighlightedLine","hasSign","sign","signIndex","indexOf","prefix","suffix","slice","push","span","data-nextjs-container-errors-pseudo-html-line","data-nextjs-container-errors-pseudo-html--diff","data-nextjs-container-errors-pseudo-html-line-sign","undefined","div","data-nextjs-container-errors-pseudo-html","data-nextjs-container-errors-pseudo-html-collapse","button","tabIndex","data-nextjs-container-errors-pseudo-html-collapse-button","onClick","CollapseIcon","collapsed","pre","code"],"mappings":";;;;+BAmDgBA;;;eAAAA;;;;uBAnDkB;8BACL;AAkDtB,SAASA,eAAe,KAWS;IAXT,IAAA,EAC7BC,YAAY,EACZC,aAAa,EACbC,qBAAqB,EACrBC,wBAAwB,EACxB,GAAGC,OAMmC,GAXT;IAY7B,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGC,IAAAA,eAAQ,EAAC;IAEvD,MAAMC,iBAAiBC,IAAAA,cAAO,EAAC;QAC7B,MAAMC,kBAAqC,EAAE;QAC7C,MAAMC,0BAA0BR,yBAA0BS,KAAK,CAAC;QAChED,wBAAwBE,OAAO,CAAC,CAACC,MAAMC;YACrC,IAAIC,cAAcF,KAAKG,IAAI;YAC3B,MAAMC,aAAaF,WAAW,CAAC,EAAE,KAAK,OAAOA,WAAW,CAAC,EAAE,KAAK;YAChE,MAAMG,oBAAoBH,WAAW,CAAC,EAAE,KAAK;YAC7C,MAAMI,UAAUF,cAAcC;YAC9B,MAAME,OAAOD,UAAUJ,WAAW,CAAC,EAAE,GAAG;YACxC,MAAMM,YAAYF,UAAUN,KAAKS,OAAO,CAACF,QAAQ,CAAC;YAClD,MAAM,CAACG,QAAQC,OAAO,GAAGL,UACrB;gBAACN,KAAKY,KAAK,CAAC,GAAGJ;gBAAYR,KAAKY,KAAK,CAACJ,YAAY;aAAG,GACrD;gBAACR;gBAAM;aAAG;YAEd,IAAII,YAAY;gBACdR,gBAAgBiB,IAAI,eAClB,qBAACC;oBAECC,+CAA6C;oBAC7CC,kDACET,SAAS,MAAM,QAAQ;8BAGzB,cAAA,sBAACO;;4BAEEJ;0CACD,qBAACI;gCAAKG,oDAAkD;0CACrDV;;4BAEFI;4BACA;;;mBAbE,cAAcV;YAiBzB,OAAO;gBACL,yDAAyD;gBACzDL,gBAAgBiB,IAAI,eAClB,sBAACC;oBACCC,+CAA6C;oBAE5C,GAAIV,oBACD;wBACE,wDAAwD;oBAC1D,IACAa,SAAS;;wBAEZR;sCACD,qBAACI;4BAAKG,oDAAkD;sCACrDV;;wBAEFI;wBACA;;mBAZI,cAAcV;YAezB;QACF;QACA,OAAOL;IACT,GAAG;QAACP;KAAyB;IAE7B,qBACE,sBAAC8B;QACCC,0CAAwC;QACxCC,qDAAmD9B;;0BAEnD,qBAAC+B;gBACCC,UAAU;gBACVC,0DAAwD;gBACxDC,SAAS,IAAMjC,mBAAmB,CAACD;0BAEnC,cAAA,qBAACmC,0BAAY;oBAACC,WAAWpC;;;0BAE3B,qBAACqC;gBAAK,GAAGtC,KAAK;0BACZ,cAAA,qBAACuC;8BAAMnC;;;;;AAIf"}

package/dist/client/components/react-dev-overlay/internal/container/Errors.js

@@ -360,10 +360,9 @@ function Errors(param) {
                             hydrationWarning && (((_activeError_componentStackFrames = activeError.componentStackFrames) == null ? void 0 : _activeError_componentStackFrames.length) || !!errorDetails.reactOutputComponentDiff) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_componentstackpseudohtml.PseudoHtmlDiff, {
                                 className: "nextjs__container_errors__component-stack",
                                 hydrationMismatchType: hydrationErrorType,
-                                componentStackFrames: activeError.componentStackFrames || [],
                                 firstContent: serverContent,
                                 secondContent: clientContent,
-                                reactOutputComponentDiff: errorDetails.reactOutputComponentDiff
+                                reactOutputComponentDiff: errorDetails.reactOutputComponentDiff || ''
                             }) : null,
                             isServerError ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)("small", {