next 15.1.1-canary.11 → 15.1.1-canary.12

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getFrameSource } from '../../helpers/stack-frame';
+import { useOpenInEditor } from '../../helpers/use-open-in-editor';
+import { HotlinkedText } from '../../components/hot-linked-text';
+export const CallStackFrame = function CallStackFrame(param) {
+    let { frame } = param;
+    var _frame_originalStackFrame;
+    // TODO: ability to expand resolved frames
+    // TODO: render error or external indicator
+    const f = (_frame_originalStackFrame = frame.originalStackFrame) != null ? _frame_originalStackFrame : frame.sourceStackFrame;
+    const hasSource = Boolean(frame.originalCodeFrame);
+    const open = useOpenInEditor(hasSource ? {
+        file: f.file,
+        lineNumber: f.lineNumber,
+        column: f.column
+    } : undefined);
+    // Format method to strip out the webpack layer prefix.
+    // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx
+    const formattedMethod = f.methodName.replace(/^\([\w-]+\)\//, '');
+    // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
+    // we'll skip rendering the frame in this case.
+    const fileSource = getFrameSource(f);
+    if (!fileSource) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-nextjs-call-stack-frame": true,
+        children: [
+            /*#__PURE__*/ _jsx("h3", {
+                "data-nextjs-frame-expanded": !frame.ignored,
+                children: /*#__PURE__*/ _jsx(HotlinkedText, {
+                    text: formattedMethod
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                "data-has-source": hasSource ? 'true' : undefined,
+                "data-no-source": hasSource ? undefined : 'true',
+                tabIndex: hasSource ? 10 : undefined,
+                role: hasSource ? 'link' : undefined,
+                onClick: open,
+                title: hasSource ? 'Click to open in your editor' : undefined,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        children: fileSource
+                    }),
+                    /*#__PURE__*/ _jsxs("svg", {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                            /*#__PURE__*/ _jsx("path", {
+                                d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                            }),
+                            /*#__PURE__*/ _jsx("polyline", {
+                                points: "15 3 21 3 21 9"
+                            }),
+                            /*#__PURE__*/ _jsx("line", {
+                                x1: "10",
+                                y1: "14",
+                                x2: "21",
+                                y2: "3"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=CallStackFrame.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport {\n  getFrameSource,\n  type OriginalStackFrame,\n} from '../../helpers/stack-frame'\nimport { useOpenInEditor } from '../../helpers/use-open-in-editor'\nimport { HotlinkedText } from '../../components/hot-linked-text'\n\nexport const CallStackFrame: React.FC<{\n  frame: OriginalStackFrame\n}> = function CallStackFrame({ frame }) {\n  // TODO: ability to expand resolved frames\n  // TODO: render error or external indicator\n\n  const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame\n  const hasSource = Boolean(frame.originalCodeFrame)\n  const open = useOpenInEditor(\n    hasSource\n      ? {\n          file: f.file,\n          lineNumber: f.lineNumber,\n          column: f.column,\n        }\n      : undefined\n  )\n\n  // Format method to strip out the webpack layer prefix.\n  // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx\n  const formattedMethod = f.methodName.replace(/^\\([\\w-]+\\)\\//, '')\n\n  // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,\n  // we'll skip rendering the frame in this case.\n  const fileSource = getFrameSource(f)\n  if (!fileSource) {\n    return null\n  }\n\n  return (\n    <div data-nextjs-call-stack-frame>\n      <h3 data-nextjs-frame-expanded={!frame.ignored}>\n        <HotlinkedText text={formattedMethod} />\n      </h3>\n      <div\n        data-has-source={hasSource ? 'true' : undefined}\n        data-no-source={hasSource ? undefined : 'true'}\n        tabIndex={hasSource ? 10 : undefined}\n        role={hasSource ? 'link' : undefined}\n        onClick={open}\n        title={hasSource ? 'Click to open in your editor' : undefined}\n      >\n        <span>{fileSource}</span>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path>\n          <polyline points=\"15 3 21 3 21 9\"></polyline>\n          <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\n        </svg>\n      </div>\n    </div>\n  )\n}\n"],"names":["getFrameSource","useOpenInEditor","HotlinkedText","CallStackFrame","frame","f","originalStackFrame","sourceStackFrame","hasSource","Boolean","originalCodeFrame","open","file","lineNumber","column","undefined","formattedMethod","methodName","replace","fileSource","div","data-nextjs-call-stack-frame","h3","data-nextjs-frame-expanded","ignored","text","data-has-source","data-no-source","tabIndex","role","onClick","title","span","svg","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d","polyline","points","line","x1","y1","x2","y2"],"mappings":";AACA,SACEA,cAAc,QAET,4BAA2B;AAClC,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,aAAa,QAAQ,mCAAkC;AAEhE,OAAO,MAAMC,iBAER,SAASA,eAAe,KAAS;IAAT,IAAA,EAAEC,KAAK,EAAE,GAAT;QAILA;IAHtB,0CAA0C;IAC1C,2CAA2C;IAE3C,MAAMC,IAAgBD,CAAAA,4BAAAA,MAAME,kBAAkB,YAAxBF,4BAA4BA,MAAMG,gBAAgB;IACxE,MAAMC,YAAYC,QAAQL,MAAMM,iBAAiB;IACjD,MAAMC,OAAOV,gBACXO,YACI;QACEI,MAAMP,EAAEO,IAAI;QACZC,YAAYR,EAAEQ,UAAU;QACxBC,QAAQT,EAAES,MAAM;IAClB,IACAC;IAGN,uDAAuD;IACvD,4DAA4D;IAC5D,MAAMC,kBAAkBX,EAAEY,UAAU,CAACC,OAAO,CAAC,iBAAiB;IAE9D,4FAA4F;IAC5F,+CAA+C;IAC/C,MAAMC,aAAanB,eAAeK;IAClC,IAAI,CAACc,YAAY;QACf,OAAO;IACT;IAEA,qBACE,MAACC;QAAIC,8BAA4B;;0BAC/B,KAACC;gBAAGC,8BAA4B,CAACnB,MAAMoB,OAAO;0BAC5C,cAAA,KAACtB;oBAAcuB,MAAMT;;;0BAEvB,MAACI;gBACCM,mBAAiBlB,YAAY,SAASO;gBACtCY,kBAAgBnB,YAAYO,YAAY;gBACxCa,UAAUpB,YAAY,KAAKO;gBAC3Bc,MAAMrB,YAAY,SAASO;gBAC3Be,SAASnB;gBACToB,OAAOvB,YAAY,iCAAiCO;;kCAEpD,KAACiB;kCAAMb;;kCACP,MAACc;wBACCC,OAAM;wBACNC,SAAQ;wBACRC,MAAK;wBACLC,QAAO;wBACPC,aAAY;wBACZC,eAAc;wBACdC,gBAAe;;0CAEf,KAACC;gCAAKC,GAAE;;0CACR,KAACC;gCAASC,QAAO;;0CACjB,KAACC;gCAAKC,IAAG;gCAAKC,IAAG;gCAAKC,IAAG;gCAAKC,IAAG;;;;;;;;AAK3C,EAAC"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useOpenInEditor } from '../../helpers/use-open-in-editor';
+import { HotlinkedText } from '../../components/hot-linked-text';
+function EditorLink(param) {
+    let { children, componentStackFrame: { file, column, lineNumber } } = param;
+    const open = useOpenInEditor({
+        file,
+        column,
+        lineNumber
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        tabIndex: 10,
+        role: 'link',
+        onClick: open,
+        title: 'Click to open in your editor',
+        children: [
+            children,
+            /*#__PURE__*/ _jsxs("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                    }),
+                    /*#__PURE__*/ _jsx("polyline", {
+                        points: "15 3 21 3 21 9"
+                    }),
+                    /*#__PURE__*/ _jsx("line", {
+                        x1: "10",
+                        y1: "14",
+                        x2: "21",
+                        y2: "3"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function formatLineNumber(lineNumber, column) {
+    if (!column) {
+        return lineNumber;
+    }
+    return lineNumber + ":" + column;
+}
+function LocationLine(param) {
+    let { componentStackFrame } = param;
+    const { file, lineNumber, column } = componentStackFrame;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            file,
+            " ",
+            lineNumber ? "(" + formatLineNumber(lineNumber, column) + ")" : ''
+        ]
+    });
+}
+function SourceLocation(param) {
+    let { componentStackFrame } = param;
+    const { file, canOpenInEditor } = componentStackFrame;
+    if (file && canOpenInEditor) {
+        return /*#__PURE__*/ _jsx(EditorLink, {
+            componentStackFrame: componentStackFrame,
+            children: /*#__PURE__*/ _jsx("span", {
+                children: /*#__PURE__*/ _jsx(LocationLine, {
+                    componentStackFrame: componentStackFrame
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        children: /*#__PURE__*/ _jsx(LocationLine, {
+            componentStackFrame: componentStackFrame
+        })
+    });
+}
+export function ComponentStackFrameRow(param) {
+    let { componentStackFrame } = param;
+    const { component } = componentStackFrame;
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-nextjs-component-stack-frame": true,
+        children: [
+            /*#__PURE__*/ _jsx("h3", {
+                children: /*#__PURE__*/ _jsx(HotlinkedText, {
+                    text: component
+                })
+            }),
+            /*#__PURE__*/ _jsx(SourceLocation, {
+                componentStackFrame: componentStackFrame
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ComponentStackFrameRow.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.tsx"],"sourcesContent":["import React from 'react'\nimport type { ComponentStackFrame } from '../../helpers/parse-component-stack'\nimport { useOpenInEditor } from '../../helpers/use-open-in-editor'\nimport { HotlinkedText } from '../../components/hot-linked-text'\n\nfunction EditorLink({\n  children,\n  componentStackFrame: { file, column, lineNumber },\n}: {\n  children: React.ReactNode\n  componentStackFrame: ComponentStackFrame\n}) {\n  const open = useOpenInEditor({\n    file,\n    column,\n    lineNumber,\n  })\n\n  return (\n    <div\n      tabIndex={10} // match CallStackFrame\n      role={'link'}\n      onClick={open}\n      title={'Click to open in your editor'}\n    >\n      {children}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path>\n        <polyline points=\"15 3 21 3 21 9\"></polyline>\n        <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\n      </svg>\n    </div>\n  )\n}\n\nfunction formatLineNumber(lineNumber: number, column: number | undefined) {\n  if (!column) {\n    return lineNumber\n  }\n\n  return `${lineNumber}:${column}`\n}\n\nfunction LocationLine({\n  componentStackFrame,\n}: {\n  componentStackFrame: ComponentStackFrame\n}) {\n  const { file, lineNumber, column } = componentStackFrame\n  return (\n    <>\n      {file} {lineNumber ? `(${formatLineNumber(lineNumber, column)})` : ''}\n    </>\n  )\n}\n\nfunction SourceLocation({\n  componentStackFrame,\n}: {\n  componentStackFrame: ComponentStackFrame\n}) {\n  const { file, canOpenInEditor } = componentStackFrame\n\n  if (file && canOpenInEditor) {\n    return (\n      <EditorLink componentStackFrame={componentStackFrame}>\n        <span>\n          <LocationLine componentStackFrame={componentStackFrame} />\n        </span>\n      </EditorLink>\n    )\n  }\n\n  return (\n    <div>\n      <LocationLine componentStackFrame={componentStackFrame} />\n    </div>\n  )\n}\n\nexport function ComponentStackFrameRow({\n  componentStackFrame,\n}: {\n  componentStackFrame: ComponentStackFrame\n}) {\n  const { component } = componentStackFrame\n\n  return (\n    <div data-nextjs-component-stack-frame>\n      <h3>\n        <HotlinkedText text={component} />\n      </h3>\n      <SourceLocation componentStackFrame={componentStackFrame} />\n    </div>\n  )\n}\n"],"names":["React","useOpenInEditor","HotlinkedText","EditorLink","children","componentStackFrame","file","column","lineNumber","open","div","tabIndex","role","onClick","title","svg","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d","polyline","points","line","x1","y1","x2","y2","formatLineNumber","LocationLine","SourceLocation","canOpenInEditor","span","ComponentStackFrameRow","component","data-nextjs-component-stack-frame","h3","text"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,aAAa,QAAQ,mCAAkC;AAEhE,SAASC,WAAW,KAMnB;IANmB,IAAA,EAClBC,QAAQ,EACRC,qBAAqB,EAAEC,IAAI,EAAEC,MAAM,EAAEC,UAAU,EAAE,EAIlD,GANmB;IAOlB,MAAMC,OAAOR,gBAAgB;QAC3BK;QACAC;QACAC;IACF;IAEA,qBACE,MAACE;QACCC,UAAU;QACVC,MAAM;QACNC,SAASJ;QACTK,OAAO;;YAENV;0BACD,MAACW;gBACCC,OAAM;gBACNC,SAAQ;gBACRC,MAAK;gBACLC,QAAO;gBACPC,aAAY;gBACZC,eAAc;gBACdC,gBAAe;;kCAEf,KAACC;wBAAKC,GAAE;;kCACR,KAACC;wBAASC,QAAO;;kCACjB,KAACC;wBAAKC,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;;;;;;AAIzC;AAEA,SAASC,iBAAiBxB,UAAkB,EAAED,MAA0B;IACtE,IAAI,CAACA,QAAQ;QACX,OAAOC;IACT;IAEA,OAAO,AAAGA,aAAW,MAAGD;AAC1B;AAEA,SAAS0B,aAAa,KAIrB;IAJqB,IAAA,EACpB5B,mBAAmB,EAGpB,GAJqB;IAKpB,MAAM,EAAEC,IAAI,EAAEE,UAAU,EAAED,MAAM,EAAE,GAAGF;IACrC,qBACE;;YACGC;YAAK;YAAEE,aAAa,AAAC,MAAGwB,iBAAiBxB,YAAYD,UAAQ,MAAK;;;AAGzE;AAEA,SAAS2B,eAAe,KAIvB;IAJuB,IAAA,EACtB7B,mBAAmB,EAGpB,GAJuB;IAKtB,MAAM,EAAEC,IAAI,EAAE6B,eAAe,EAAE,GAAG9B;IAElC,IAAIC,QAAQ6B,iBAAiB;QAC3B,qBACE,KAAChC;YAAWE,qBAAqBA;sBAC/B,cAAA,KAAC+B;0BACC,cAAA,KAACH;oBAAa5B,qBAAqBA;;;;IAI3C;IAEA,qBACE,KAACK;kBACC,cAAA,KAACuB;YAAa5B,qBAAqBA;;;AAGzC;AAEA,OAAO,SAASgC,uBAAuB,KAItC;IAJsC,IAAA,EACrChC,mBAAmB,EAGpB,GAJsC;IAKrC,MAAM,EAAEiC,SAAS,EAAE,GAAGjC;IAEtB,qBACE,MAACK;QAAI6B,mCAAiC;;0BACpC,KAACC;0BACC,cAAA,KAACtC;oBAAcuC,MAAMH;;;0BAEvB,KAACJ;gBAAe7B,qBAAqBA;;;;AAG3C"}

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

@@ -0,0 +1,275 @@
+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/CollapseIcon';
+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__*/ _jsxs("span", {
+                        "data-nextjs-container-errors-pseudo-html--diff": sign === '+' ? 'add' : 'remove',
+                        children: [
+                            sign,
+                            spaces,
+                            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", {
+                            children: [
+                                spaces,
+                                trimmedLine,
+                                '\n'
+                            ]
+                        }, 'comp-diff' + index));
+                    } else if (!isHtmlCollapsed) {
+                        componentStacks.push(/*#__PURE__*/ _jsxs("span", {
+                            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", {
+                        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", {
+                    children: [
+                        spaces,
+                        /*#__PURE__*/ _jsx("span", {
+                            ...adjProps,
+                            ...isHighlightedTag ? {
+                                'data-nextjs-container-errors-pseudo-html--tag-error': true
+                            } : undefined,
+                            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,
+                        children: [
+                            spaces,
+                            '<' + component + '>\n'
+                        ]
+                    }));
+                } else if (isHtmlCollapsed && lastText !== '...') {
+                    lastText = '...';
+                    nestedHtmlStack.push(/*#__PURE__*/ _createElement("span", {
+                        ...adjProps,
+                        key: nestedHtmlStack.length,
+                        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--diff": "remove",
+                            children: spaces + ('"' + firstContent + '"\n')
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            "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--tag-adjacent": true,
+                            children: spaces + ("<" + secondContent + ">\n")
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            "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
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=component-stack-pseudo-html.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx"],"sourcesContent":["import { useMemo, Fragment, useState } from 'react'\nimport type { ComponentStackFrame } from '../../helpers/parse-component-stack'\nimport { CollapseIcon } from '../../icons/CollapseIcon'\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--diff={\n                sign === '+' ? 'add' : 'remove'\n              }\n            >\n              {sign}\n              {spaces}\n              {trimmedLine}\n              {'\\n'}\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 key={'comp-diff' + index}>\n                {spaces}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            )\n          } else if (!isHtmlCollapsed) {\n            componentStacks.push(\n              <span key={'comp-diff' + index}>\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 key={'comp-diff' + index}>\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            {spaces}\n            <span\n              {...adjProps}\n              {...{\n                ...(isHighlightedTag\n                  ? {\n                      'data-nextjs-container-errors-pseudo-html--tag-error':\n                        true,\n                    }\n                  : undefined),\n              }}\n            >\n              {`<${component}>\\n`}\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 {...adjProps} key={nestedHtmlStack.length}>\n              {spaces}\n              {'<' + component + '>\\n'}\n            </span>\n          )\n        } else if (isHtmlCollapsed && lastText !== '...') {\n          lastText = '...'\n          nestedHtmlStack.push(\n            <span {...adjProps} key={nestedHtmlStack.length}>\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 data-nextjs-container-errors-pseudo-html--diff=\"remove\">\n              {spaces + `\"${firstContent}\"\\n`}\n            </span>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"add\">\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 data-nextjs-container-errors-pseudo-html--tag-adjacent>\n              {spaces + `<${secondContent}>\\n`}\n            </span>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"remove\">\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"],"names":["useMemo","Fragment","useState","CollapseIcon","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--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"],"mappings":"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"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.js

@@ -0,0 +1,63 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+function _templateObject() {
+    const data = _tagged_template_literal_loose([
+        "\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\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  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { CodeFrame } from '../../components/CodeFrame';
+import { noop as css } from '../../helpers/noop-template';
+import { CallStackFrame } from './CallStackFrame';
+export function RuntimeError(param) {
+    let { error } = param;
+    const [isIgnoredExpanded, setIsIgnoredExpanded] = React.useState(false);
+    const { firstFrame, allLeadingFrames, trailingCallStackFrames, displayedFramesCount } = React.useMemo(()=>{
+        const filteredFrames = error.frames.filter((frame)=>isIgnoredExpanded ? true : !frame.ignored);
+        const firstFirstPartyFrameIndex = filteredFrames.findIndex((entry)=>!entry.ignored && Boolean(entry.originalCodeFrame) && Boolean(entry.originalStackFrame));
+        var _filteredFrames_firstFirstPartyFrameIndex;
+        return {
+            displayedFramesCount: filteredFrames.length,
+            firstFrame: (_filteredFrames_firstFirstPartyFrameIndex = filteredFrames[firstFirstPartyFrameIndex]) != null ? _filteredFrames_firstFirstPartyFrameIndex : null,
+            allLeadingFrames: firstFirstPartyFrameIndex < 0 ? [] : filteredFrames.slice(0, firstFirstPartyFrameIndex),
+            trailingCallStackFrames: filteredFrames.slice(firstFirstPartyFrameIndex + 1)
+        };
+    }, [
+        error.frames,
+        isIgnoredExpanded
+    ]);
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            firstFrame ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        children: "Source"
+                    }),
+                    allLeadingFrames.map((frame, frameIndex)=>/*#__PURE__*/ _jsx(CallStackFrame, {
+                            frame: frame
+                        }, "call-stack-leading-" + frameIndex)),
+                    /*#__PURE__*/ _jsx(CodeFrame, {
+                        stackFrame: firstFrame.originalStackFrame,
+                        codeFrame: firstFrame.originalCodeFrame
+                    })
+                ]
+            }) : undefined,
+            trailingCallStackFrames.map((frame, frameIndex)=>/*#__PURE__*/ _jsx(CallStackFrame, {
+                    frame: frame
+                }, "call-stack-leading-" + frameIndex)),
+            // if the default displayed ignored frames count is equal equal to the total frames count, hide the button
+            displayedFramesCount === error.frames.length && !isIgnoredExpanded ? null : /*#__PURE__*/ _jsx("button", {
+                "data-expand-ignore-button": isIgnoredExpanded,
+                onClick: ()=>setIsIgnoredExpanded(!isIgnoredExpanded),
+                children: "" + (isIgnoredExpanded ? 'Hide' : 'Show') + " ignored frames"
+            })
+        ]
+    });
+}
+export const styles = css(_templateObject());
+
+//# sourceMappingURL=index.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CodeFrame } from '../../components/CodeFrame'\nimport type { ReadyRuntimeError } from '../../helpers/get-error-by-type'\nimport { noop as css } from '../../helpers/noop-template'\nimport { CallStackFrame } from './CallStackFrame'\n\nexport type RuntimeErrorProps = { error: ReadyRuntimeError }\n\nexport function RuntimeError({ error }: RuntimeErrorProps) {\n  const [isIgnoredExpanded, setIsIgnoredExpanded] = React.useState(false)\n  const {\n    firstFrame,\n    allLeadingFrames,\n    trailingCallStackFrames,\n    displayedFramesCount,\n  } = React.useMemo(() => {\n    const filteredFrames = error.frames.filter((frame) =>\n      isIgnoredExpanded ? true : !frame.ignored\n    )\n\n    const firstFirstPartyFrameIndex = filteredFrames.findIndex(\n      (entry) =>\n        !entry.ignored &&\n        Boolean(entry.originalCodeFrame) &&\n        Boolean(entry.originalStackFrame)\n    )\n\n    return {\n      displayedFramesCount: filteredFrames.length,\n      firstFrame: filteredFrames[firstFirstPartyFrameIndex] ?? null,\n      allLeadingFrames:\n        firstFirstPartyFrameIndex < 0\n          ? []\n          : filteredFrames.slice(0, firstFirstPartyFrameIndex),\n      trailingCallStackFrames: filteredFrames.slice(\n        firstFirstPartyFrameIndex + 1\n      ),\n    }\n  }, [error.frames, isIgnoredExpanded])\n\n  return (\n    <React.Fragment>\n      {firstFrame ? (\n        <>\n          <h2>Source</h2>\n          {allLeadingFrames.map((frame, frameIndex) => (\n            <CallStackFrame\n              key={`call-stack-leading-${frameIndex}`}\n              frame={frame}\n            />\n          ))}\n          <CodeFrame\n            stackFrame={firstFrame.originalStackFrame!}\n            codeFrame={firstFrame.originalCodeFrame!}\n          />\n        </>\n      ) : undefined}\n\n      {trailingCallStackFrames.map((frame, frameIndex) => (\n        <CallStackFrame\n          key={`call-stack-leading-${frameIndex}`}\n          frame={frame}\n        />\n      ))}\n      {\n        // if the default displayed ignored frames count is equal equal to the total frames count, hide the button\n        displayedFramesCount === error.frames.length &&\n        !isIgnoredExpanded ? null : (\n          <button\n            data-expand-ignore-button={isIgnoredExpanded}\n            onClick={() => setIsIgnoredExpanded(!isIgnoredExpanded)}\n          >\n            {`${isIgnoredExpanded ? 'Hide' : 'Show'} ignored frames`}\n          </button>\n        )\n      }\n    </React.Fragment>\n  )\n}\n\nexport const styles = css`\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\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  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n`\n"],"names":["React","CodeFrame","noop","css","CallStackFrame","RuntimeError","error","isIgnoredExpanded","setIsIgnoredExpanded","useState","firstFrame","allLeadingFrames","trailingCallStackFrames","displayedFramesCount","useMemo","filteredFrames","frames","filter","frame","ignored","firstFirstPartyFrameIndex","findIndex","entry","Boolean","originalCodeFrame","originalStackFrame","length","slice","Fragment","h2","map","frameIndex","stackFrame","codeFrame","undefined","button","data-expand-ignore-button","onClick","styles"],"mappings":";;;;;;;;;;;AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,SAAS,QAAQ,6BAA4B;AAEtD,SAASC,QAAQC,GAAG,QAAQ,8BAA6B;AACzD,SAASC,cAAc,QAAQ,mBAAkB;AAIjD,OAAO,SAASC,aAAa,KAA4B;IAA5B,IAAA,EAAEC,KAAK,EAAqB,GAA5B;IAC3B,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGR,MAAMS,QAAQ,CAAC;IACjE,MAAM,EACJC,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,EACvBC,oBAAoB,EACrB,GAAGb,MAAMc,OAAO,CAAC;QAChB,MAAMC,iBAAiBT,MAAMU,MAAM,CAACC,MAAM,CAAC,CAACC,QAC1CX,oBAAoB,OAAO,CAACW,MAAMC,OAAO;QAG3C,MAAMC,4BAA4BL,eAAeM,SAAS,CACxD,CAACC,QACC,CAACA,MAAMH,OAAO,IACdI,QAAQD,MAAME,iBAAiB,KAC/BD,QAAQD,MAAMG,kBAAkB;YAKtBV;QAFd,OAAO;YACLF,sBAAsBE,eAAeW,MAAM;YAC3ChB,YAAYK,CAAAA,4CAAAA,cAAc,CAACK,0BAA0B,YAAzCL,4CAA6C;YACzDJ,kBACES,4BAA4B,IACxB,EAAE,GACFL,eAAeY,KAAK,CAAC,GAAGP;YAC9BR,yBAAyBG,eAAeY,KAAK,CAC3CP,4BAA4B;QAEhC;IACF,GAAG;QAACd,MAAMU,MAAM;QAAET;KAAkB;IAEpC,qBACE,MAACP,MAAM4B,QAAQ;;YACZlB,2BACC;;kCACE,KAACmB;kCAAG;;oBACHlB,iBAAiBmB,GAAG,CAAC,CAACZ,OAAOa,2BAC5B,KAAC3B;4BAECc,OAAOA;2BADF,AAAC,wBAAqBa;kCAI/B,KAAC9B;wBACC+B,YAAYtB,WAAWe,kBAAkB;wBACzCQ,WAAWvB,WAAWc,iBAAiB;;;iBAGzCU;YAEHtB,wBAAwBkB,GAAG,CAAC,CAACZ,OAAOa,2BACnC,KAAC3B;oBAECc,OAAOA;mBADF,AAAC,wBAAqBa;YAK7B,0GAA0G;YAC1GlB,yBAAyBP,MAAMU,MAAM,CAACU,MAAM,IAC5C,CAACnB,oBAAoB,qBACnB,KAAC4B;gBACCC,6BAA2B7B;gBAC3B8B,SAAS,IAAM7B,qBAAqB,CAACD;0BAEpC,AAAC,KAAEA,CAAAA,oBAAoB,SAAS,MAAK,IAAE;;;;AAMpD;AAEA,OAAO,MAAM+B,SAASnC,uBAsJrB"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/StaticIndicator.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Toast } from '../components/Toast';
+import { LightningBolt } from '../icons/LightningBolt';
+import { CloseIcon } from '../icons/CloseIcon';
+export function StaticIndicator(param) {
+    let { dispatcher } = param;
+    return /*#__PURE__*/ _jsxs(Toast, {
+        role: "status",
+        className: "nextjs-static-indicator-toast-wrapper",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "nextjs-static-indicator-toast-icon",
+                children: /*#__PURE__*/ _jsx(LightningBolt, {})
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "nextjs-static-indicator-toast-text",
+                children: [
+                    "Static route",
+                    /*#__PURE__*/ _jsx("button", {
+                        onClick: ()=>{
+                            var _localStorage;
+                            // When dismissed, we hide the indicator for 1 hour. Store the
+                            // timestamp for when to show it again.
+                            const oneHourAway = Date.now() + 1 * 60 * 60 * 1000;
+                            (_localStorage = localStorage) == null ? void 0 : _localStorage.setItem('__NEXT_DISMISS_PRERENDER_INDICATOR', oneHourAway.toString());
+                            dispatcher == null ? void 0 : dispatcher.onStaticIndicator(false);
+                        },
+                        className: "nextjs-toast-hide-button",
+                        "aria-label": "Hide static indicator",
+                        children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=StaticIndicator.js.map