npm - next - Versions diffs - 15.2.0-canary.50 → 15.2.0-canary.52 - Mend

next 15.2.0-canary.50 → 15.2.0-canary.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of next might be problematic. Click here for more details.

Files changed (91) hide show

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

@@ -1,300 +1,16 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 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;
 }
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useMemo, Fragment, useState } from 'react';
-import { CollapseIcon } from '../../icons/collapse-icon';
 import { noop as css } from '../../helpers/noop-template';
-function getAdjacentProps(isAdj) {
-    return {
-        'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj
-    };
-}
-/**
- *
- * 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 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] = useState(true);
-    const htmlComponents = 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__*/ _jsx("span", {
-                        "data-nextjs-container-errors-pseudo-html-line": true,
-                        "data-nextjs-container-errors-pseudo-html--diff": sign === '+' ? 'add' : 'remove',
-                        children: /*#__PURE__*/ _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__*/ _jsxs("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            children: [
-                                spaces,
-                                trimmedLine,
-                                '\n'
-                            ]
-                        }, 'comp-diff' + index));
-                    } else if (!isHtmlCollapsed) {
-                        componentStacks.push(/*#__PURE__*/ _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__*/ _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__*/ _jsxs("span", {
-                    "data-nextjs-container-errors-pseudo-html-line": true,
-                    ...isHighlightedTag ? {
-                        'data-nextjs-container-errors-pseudo-html-line--error': true
-                    } : undefined,
-                    children: [
-                        spaces,
-                        /*#__PURE__*/ _jsx("span", {
-                            ...adjProps,
-                            children: "<" + component + ">\n"
-                        })
-                    ]
-                });
-                lastText = component;
-                const wrappedCodeLine = /*#__PURE__*/ _jsxs(Fragment, {
-                    children: [
-                        codeLine,
-                        isHighlightedTag && /*#__PURE__*/ _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__*/ _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__*/ _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__*/ _jsxs(Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            "data-nextjs-container-errors-pseudo-html--diff": "remove",
-                            children: spaces + ('"' + firstContent + '"\n')
-                        }),
-                        /*#__PURE__*/ _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__*/ _jsxs(Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx("span", {
-                            "data-nextjs-container-errors-pseudo-html-line": true,
-                            "data-nextjs-container-errors-pseudo-html--tag-adjacent": true,
-                            children: spaces + ("<" + secondContent + ">\n")
-                        }),
-                        /*#__PURE__*/ _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__*/ _jsxs("div", {
-        "data-nextjs-container-errors-pseudo-html": true,
-        children: [
-            /*#__PURE__*/ _jsx("button", {
-                tabIndex: 10,
-                "data-nextjs-container-errors-pseudo-html-collapse": true,
-                onClick: ()=>toggleCollapseHtml(!isHtmlCollapsed),
-                children: /*#__PURE__*/ _jsx(CollapseIcon, {
-                    collapsed: isHtmlCollapsed
-                })
-            }),
-            /*#__PURE__*/ _jsx("pre", {
-                ...props,
-                children: /*#__PURE__*/ _jsx("code", {
-                    children: htmlComponents
-                })
-            })
-        ]
-    });
-}
+export { PseudoHtmlDiff } from '../../../../hydration-diff/diff-view';
 export const PSEUDO_HTML_DIFF_STYLES = css(_templateObject(), '');
 //# sourceMappingURL=component-stack-pseudo-html.js.map

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

	@@ -1 +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":["useMemo","Fragment","useState","CollapseIcon","noop","css","getAdjacentProps","isAdj","PseudoHtmlDiff","componentStackFrames","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","props","isHtmlTagsWarning","isReactHydrationDiff","MAX_NON_COLLAPSED_FRAMES","isHtmlCollapsed","toggleCollapseHtml","htmlComponents","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","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","collapsed","pre","code","PSEUDO_HTML_DIFF_STYLES"],"mappings":";;;;;;;;;;;;;AAAA,SAASA,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,QAAO;AAEnD,SAASC,YAAY,QAAQ,4BAA2B;AACxD,SAASC,QAAQC,GAAG,QAAQ,8BAA6B;AAEzD,SAASC,iBAAiBC,KAAc;IACtC,OAAO;QAAE,0DAA0DA;IAAM;AAC3E;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,eAAe,KAaS;IAbT,IAAA,EAC7BC,oBAAoB,EACpBC,YAAY,EACZC,aAAa,EACbC,qBAAqB,EACrBC,wBAAwB,EACxB,GAAGC,OAOmC,GAbT;IAc7B,MAAMC,oBAAoBH,0BAA0B;IACpD,MAAMI,uBAAuB,CAAC,CAACH;IAE/B,+FAA+F;IAC/F,MAAMI,2BAA2BF,oBAAoB,IAAI;IACzD,MAAM,CAACG,iBAAiBC,mBAAmB,GAAGjB,SAAS;IAEvD,MAAMkB,iBAAiBpB,QAAQ;QAC7B,MAAMqB,kBAAqC,EAAE;QAC7C,4BAA4B;QAC5B,IAAIL,sBAAsB;YACxB,IAAIM,wBAAwBb,qBAAqBc,MAAM,GAAG;YAC1D,MAAMC,0BAA0BX,yBAAyBY,KAAK,CAAC;YAC/D,MAAMC,gBAAmC,EAAE;YAC3CF,wBAAwBG,OAAO,CAAC,CAACC,MAAMC;gBACrC,IAAIC,cAAcF,KAAKG,IAAI;gBAC3B,MAAMC,aAAaF,WAAW,CAAC,EAAE,KAAK,OAAOA,WAAW,CAAC,EAAE,KAAK;gBAChE,MAAMG,SAAS,IAAIC,MAAM,CAACC,KAAKC,GAAG,CAACf,gBAAgBE,MAAM,GAAG,GAAG;gBAE/D,IAAIS,YAAY;oBACd,MAAMK,OAAOP,WAAW,CAAC,EAAE;oBAC3BA,cAAcA,YAAYQ,KAAK,CAAC,GAAGP,IAAI,GAAG,yBAAyB;;oBACnEL,cAAca,IAAI,eAChB,KAACC;wBAECC,+CAA6C;wBAC7CC,kDACEL,SAAS,MAAM,QAAQ;kCAGzB,cAAA,MAACG;;gCAEEP,OAAOK,KAAK,CAAC;gCACbR;gCACA;;;uBAVE,cAAcD;gBAczB,OAAO,IAAIP,yBAAyB,GAAG;oBACrC,MAAMqB,sBAAsBb,YAAYc,UAAU,CAChD,MAAMnC,oBAAoB,CAACa,sBAAsB,CAACuB,SAAS;oBAE7D,0FAA0F;oBAC1F,IAAIF,uBAAuBb,gBAAgB,OAAO;wBAChDR;wBACAD,gBAAgBkB,IAAI,eAClB,MAACC;4BACCC,+CAA6C;;gCAG5CR;gCACAH;gCACA;;2BAJI,cAAcD;oBAOzB,OAAO,IAAI,CAACX,iBAAiB;wBAC3BG,gBAAgBkB,IAAI,eAClB,MAACC;4BACCC,+CAA6C;;gCAG5CR;gCACAH;gCACA;;2BAJI,cAAcD;oBAOzB;gBACF,OAAO,IAAI,CAACX,iBAAiB;oBAC3B,yDAAyD;oBACzDG,gBAAgBkB,IAAI,eAClB,MAACC;wBACCC,+CAA6C;;4BAG5CR;4BACAH;4BACA;;uBAJI,cAAcD;gBAOzB;YACF;YACA,OAAOR,gBAAgByB,MAAM,CAACpB;QAChC;QAEA,MAAMqB,kBAAqC,EAAE;QAC7C,MAAMC,WAAWjC,oBAEb;YAACL,aAAauC,OAAO,CAAC,QAAQ;YAAKtC,cAAcsC,OAAO,CAAC,QAAQ;SAAI,GACrE,EAAE;QAEN,IAAIC,WAAW;QAEf,MAAMC,iBAAiB1C,qBACpB2C,GAAG,CAAC,CAACC,QAAUA,MAAMR,SAAS,EAC9BS,OAAO;QAEV,8BAA8B;QAC9B,MAAMC,eAAe;YAAC,CAAC;YAAG,CAAC;SAAE;QAC7B,IAAIxC,mBAAmB;YACrB,mCAAmC;YACnC,IAAK,IAAIyC,IAAIL,eAAe5B,MAAM,GAAG,GAAGiC,KAAK,GAAGA,IAAK;gBACnD,IAAIL,cAAc,CAACK,EAAE,KAAKR,QAAQ,CAAC,EAAE,EAAE;oBACrCO,YAAY,CAAC,EAAE,GAAGC;oBAClB;gBACF;YACF;YACA,kDAAkD;YAClD,IAAK,IAAIA,IAAID,YAAY,CAAC,EAAE,GAAG,GAAGC,KAAK,GAAGA,IAAK;gBAC7C,IAAIL,cAAc,CAACK,EAAE,KAAKR,QAAQ,CAAC,EAAE,EAAE;oBACrCO,YAAY,CAAC,EAAE,GAAGC;oBAClB;gBACF;YACF;QACF;QAEAL,eAAexB,OAAO,CAAC,CAACkB,WAAWhB,OAAO4B;YACxC,MAAMxB,SAAS,IAAIC,MAAM,CAACa,gBAAgBxB,MAAM,GAAG;YAEnD,gEAAgE;YAChE,MAAMmC,mBAAmB3C,oBACrBc,UAAU0B,YAAY,CAAC,EAAE,IAAI1B,UAAU0B,YAAY,CAAC,EAAE,GACtDP,SAASW,QAAQ,CAACd;YACtB,MAAMe,gBACJF,oBACAvB,KAAK0B,GAAG,CAAChC,QAAQ0B,YAAY,CAAC,EAAE,KAAK,KACrCpB,KAAK0B,GAAG,CAAChC,QAAQ0B,YAAY,CAAC,EAAE,KAAK;YAEvC,MAAMO,kBACJ,CAAC/C,qBAAqBc,SAAS4B,cAAclC,MAAM,GAAG;YAExD,MAAMwC,WAAWzD,iBAAiBsD;YAElC,IAAI,AAAC7C,qBAAqB6C,iBAAkBE,iBAAiB;gBAC3D,MAAME,yBACJ,MAACxB;oBACCC,+CAA6C;oBAC5C,GAAIiB,mBACD;wBACE,wDAAwD;oBAC1D,IACAO,SAAS;;wBAEZhC;sCACD,KAACO;4BAAM,GAAGuB,QAAQ;sCAAG,AAAC,MAAGlB,YAAU;;;;gBAGvCK,WAAWL;gBAEX,MAAMqB,gCACJ,MAACjE;;wBACE+D;wBAEAN,kCACC,KAAClB;4BAAK2B,gDAA8C;sCACjDlC,SAAS,IAAIC,MAAM,CAACW,UAAUtB,MAAM,GAAG,KAAK;;;mBALpCwB,gBAAgBxB,MAAM;gBAUvCwB,gBAAgBR,IAAI,CAAC2B;YACvB,OAAO;gBACL,IACEnB,gBAAgBxB,MAAM,IAAIN,4BAC1BC,iBACA;oBACA;gBACF;gBAEA,IAAI,CAACA,mBAAmB4C,iBAAiB;oBACvCf,gBAAgBR,IAAI,eAClB,eAACC;wBACE,GAAGuB,QAAQ;wBACZK,KAAKrB,gBAAgBxB,MAAM;wBAC3BkB,+CAA6C;;4BAE5CR;4BACA,MAAMY,YAAY;;;gBAGzB,OAAO,IAAI3B,mBAAmBgC,aAAa,OAAO;oBAChDA,WAAW;oBACXH,gBAAgBR,IAAI,eAClB,eAACC;wBACE,GAAGuB,QAAQ;wBACZK,KAAKrB,gBAAgBxB,MAAM;wBAC3BkB,+CAA6C;;4BAE5CR;4BACA;;;gBAGP;YACF;QACF;QACA,uCAAuC;QACvC,IAAI,CAAClB,mBAAmB;YACtB,MAAMkB,SAAS,IAAIC,MAAM,CAACa,gBAAgBxB,MAAM,GAAG;YACnD,IAAI2C;YACJ,IAAItD,0BAA0B,QAAQ;gBACpC,uEAAuE;gBACvEsD,gCACE,MAACjE;;sCACC,KAACuC;4BACCC,+CAA6C;4BAC7CC,kDAA+C;sCAE9CT,SAAS,CAAA,AAAC,MAAGvB,eAAa,KAAG;;sCAEhC,KAAC8B;4BACCC,+CAA6C;4BAC7CC,kDAA+C;sCAE9CT,SAAS,CAAA,AAAC,MAAGtB,gBAAc,KAAG;;;mBAXpBoC,gBAAgBxB,MAAM;YAezC,OAAO,IAAIX,0BAA0B,eAAe;gBAClD,4EAA4E;gBAC5EsD,gCACE,MAACjE;;sCACC,KAACuC;4BACCC,+CAA6C;4BAC7C4B,wDAAsD;sCAErDpC,SAAS,CAAA,AAAC,MAAGtB,gBAAc,KAAG;;sCAEjC,KAAC6B;4BACCC,+CAA6C;4BAC7CC,kDAA+C;sCAE9CT,SAAS,CAAA,AAAC,QAAKvB,eAAa,KAAG;;;mBAXrBqC,gBAAgBxB,MAAM;YAezC;YACAwB,gBAAgBR,IAAI,CAAC2B;QACvB;QAEA,OAAOnB;IACT,GAAG;QACDtC;QACAS;QACAR;QACAC;QACAI;QACAH;QACAK;QACAD;QACAH;KACD;IAED,qBACE,MAACyD;QAAIC,0CAAwC;;0BAC3C,KAACC;gBACCC,UAAU;gBACVC,mDAAiD;gBACjDC,SAAS,IAAMxD,mBAAmB,CAACD;0BAEnC,cAAA,KAACf;oBAAayE,WAAW1D;;;0BAE3B,KAAC2D;gBAAK,GAAG/D,KAAK;0BACZ,cAAA,KAACgE;8BAAM1D;;;;;AAIf;AAEA,OAAO,MAAM2D,0BAA0B1E,uBA4Da,IAuBnD"}
1	+ {"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":["noop","css","PseudoHtmlDiff","PSEUDO_HTML_DIFF_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,8BAA6B;AAEzD,SAASC,cAAc,QAAQ,uCAAsC;AAErE,OAAO,MAAMC,0BAA0BF,uBAqDa,IAmCnD"}

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

@@ -10,27 +10,8 @@ const meta = {
     ]
 };
 export default meta;
-const sampleComponentStack = [
-    {
-        component: 'div',
-        canOpenInEditor: false
-    },
-    {
-        component: 'article',
-        canOpenInEditor: false
-    },
-    {
-        component: 'main',
-        canOpenInEditor: false
-    },
-    {
-        component: 'Home',
-        canOpenInEditor: false
-    }
-];
 export const TextMismatch = {
     args: {
-        componentStackFrames: sampleComponentStack,
         firstContent: 'Server rendered content',
         secondContent: 'Client rendered content',
         hydrationMismatchType: 'text',
@@ -39,7 +20,6 @@ export const TextMismatch = {
 };
 export const TextInTagMismatch = {
     args: {
-        componentStackFrames: sampleComponentStack,
         firstContent: 'Mismatched content',
         secondContent: 'p',
         hydrationMismatchType: 'text-in-tag',
@@ -48,7 +28,6 @@ export const TextInTagMismatch = {
 };
 export 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/esm/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.stories.js.map CHANGED Viewed

	@@ -1 +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":["PseudoHtmlDiff","withShadowPortal","meta","component","parameters","layout","decorators","~~sampleComponentStack","canOpenInEditor","~~TextMismatch","args","~~componentStackFrames","~~firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","undefined","TextInTagMismatch","ReactUnifiedMismatch"],"mappings":"AACA,SAASA,cAAc,QAAQ,gCAA+B;AAC9D,SAASC,gBAAgB,QAAQ,qCAAoC;AAErE,MAAMC,OAAoC;IACxCC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACL;KAAiB;AAChC;AAEA,eAAeC,KAAI;AAGnB,~~MAAMK,uBAAuB;IAC3B;QACEJ,WAAW;QACXK,iBAAiB;IACnB;IACA;QACEL,WAAW;QACXK,iBAAiB;IACnB;IACA;QACEL,WAAW;QACXK,iBAAiB;IACnB;IACA;QACEL,WAAW;QACXK,iBAAiB;IACnB;CACD;AAED,~~OAAO,~~MAAMC~~,eAAsB;IACjCC,MAAM;QACJC,~~sBAAsBJ;QACtBK,~~cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF,EAAC;AAED,OAAO,MAAMC,oBAA2B;~~IACtCP~~,MAAM;QACJC,~~sBAAsBJ;QACtBK,~~cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF,EAAC;AAED,OAAO,MAAME,uBAA8B;~~IACzCR~~,MAAM;~~QACJC~~,~~sBAAsBJ;QACtBO,~~uBAAuB;QACvBC,0BAA2B;IAK7B;AACF,EAAC"}
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\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":["PseudoHtmlDiff","withShadowPortal","meta","component","parameters","layout","decorators","TextMismatch","args","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","undefined","TextInTagMismatch","ReactUnifiedMismatch"],"mappings":"AACA,SAASA,cAAc,QAAQ,gCAA+B;AAC9D,SAASC,gBAAgB,QAAQ,qCAAoC;AAErE,MAAMC,OAAoC;IACxCC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACL;KAAiB;AAChC;AAEA,eAAeC,KAAI;AAGnB,OAAO,MAAMK,eAAsB;IACjCC,MAAM;QACJC,cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF,EAAC;AAED,OAAO,MAAMC,oBAA2B;IACtCN,MAAM;QACJC,cAAc;QACdC,eAAe;QACfC,uBAAuB;QACvBC,0BAA0BC;IAC5B;AACF,EAAC;AAED,OAAO,MAAME,uBAA8B;IACzCP,MAAM;QACJG,uBAAuB;QACvBC,0BAA2B;IAK7B;AACF,EAAC"}

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { CollapseIcon } from '../internal/icons/CollapseIcon';
+/**
+ *
+ * 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 function PseudoHtmlDiff(param) {
+    let { firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props } = param;
+    const [isDiffCollapsed, toggleCollapseHtml] = useState(true);
+    const htmlComponents = 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__*/ _jsx("span", {
+                    "data-nextjs-container-errors-pseudo-html-line": true,
+                    "data-nextjs-container-errors-pseudo-html--diff": sign === '+' ? 'add' : 'remove',
+                    children: /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            prefix,
+                            /*#__PURE__*/ _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__*/ _jsxs("span", {
+                    "data-nextjs-container-errors-pseudo-html-line": true,
+                    ...isHighlightedLine ? {
+                        'data-nextjs-container-errors-pseudo-html-line--error': true
+                    } : undefined,
+                    children: [
+                        prefix,
+                        /*#__PURE__*/ _jsx("span", {
+                            "data-nextjs-container-errors-pseudo-html-line-sign": true,
+                            children: sign
+                        }),
+                        suffix,
+                        '\n'
+                    ]
+                }, 'comp-diff' + index));
+            }
+        });
+        return componentStacks;
+    }, [
+        reactOutputComponentDiff
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-nextjs-container-errors-pseudo-html": true,
+        "data-nextjs-container-errors-pseudo-html-collapse": isDiffCollapsed,
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                tabIndex: 10,
+                "data-nextjs-container-errors-pseudo-html-collapse-button": true,
+                onClick: ()=>toggleCollapseHtml(!isDiffCollapsed),
+                children: /*#__PURE__*/ _jsx(CollapseIcon, {
+                    collapsed: isDiffCollapsed
+                })
+            }),
+            /*#__PURE__*/ _jsx("pre", {
+                ...props,
+                children: /*#__PURE__*/ _jsx("code", {
+                    children: htmlComponents
+                })
+            })
+        ]
+    });
+}
+//# sourceMappingURL=diff-view.js.map

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

@@ -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":["useMemo","useState","CollapseIcon","PseudoHtmlDiff","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","props","isDiffCollapsed","toggleCollapseHtml","htmlComponents","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","collapsed","pre","code"],"mappings":";AAAA,SAASA,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACzC,SAASC,YAAY,QAAQ,iCAAgC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,eAAe,KAWS;IAXT,IAAA,EAC7BC,YAAY,EACZC,aAAa,EACbC,qBAAqB,EACrBC,wBAAwB,EACxB,GAAGC,OAMmC,GAXT;IAY7B,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGT,SAAS;IAEvD,MAAMU,iBAAiBX,QAAQ;QAC7B,MAAMY,kBAAqC,EAAE;QAC7C,MAAMC,0BAA0BN,yBAA0BO,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,KAACC;oBAECC,+CAA6C;oBAC7CC,kDACET,SAAS,MAAM,QAAQ;8BAGzB,cAAA,MAACO;;4BAEEJ;0CACD,KAACI;gCAAKG,oDAAkD;0CACrDV;;4BAEFI;4BACA;;;mBAbE,cAAcV;YAiBzB,OAAO;gBACL,yDAAyD;gBACzDL,gBAAgBiB,IAAI,eAClB,MAACC;oBACCC,+CAA6C;oBAE5C,GAAIV,oBACD;wBACE,wDAAwD;oBAC1D,IACAa,SAAS;;wBAEZR;sCACD,KAACI;4BAAKG,oDAAkD;sCACrDV;;wBAEFI;wBACA;;mBAZI,cAAcV;YAezB;QACF;QACA,OAAOL;IACT,GAAG;QAACL;KAAyB;IAE7B,qBACE,MAAC4B;QACCC,0CAAwC;QACxCC,qDAAmD5B;;0BAEnD,KAAC6B;gBACCC,UAAU;gBACVC,0DAAwD;gBACxDC,SAAS,IAAM/B,mBAAmB,CAACD;0BAEnC,cAAA,KAACP;oBAAawC,WAAWjC;;;0BAE3B,KAACkC;gBAAK,GAAGnC,KAAK;0BACZ,cAAA,KAACoC;8BAAMjC;;;;;AAIf"}

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

@@ -338,10 +338,9 @@ export function Errors(param) {
                             hydrationWarning && (((_activeError_componentStackFrames = activeError.componentStackFrames) == null ? void 0 : _activeError_componentStackFrames.length) || !!errorDetails.reactOutputComponentDiff) ? /*#__PURE__*/ _jsx(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__*/ _jsx("div", {
                                 children: /*#__PURE__*/ _jsx("small", {