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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/container/Errors.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useCallback, Suspense } from 'react'\nimport {\n  ACTION_UNHANDLED_ERROR,\n  ACTION_UNHANDLED_REJECTION,\n  type UnhandledErrorAction,\n  type UnhandledRejectionAction,\n} from '../../shared'\nimport type { DebugInfo } from '../../types'\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogHeader,\n} from '../components/Dialog'\nimport { LeftRightDialogHeader } from '../components/LeftRightDialogHeader'\nimport { Overlay } from '../components/Overlay'\nimport { Toast } from '../components/Toast'\nimport { getErrorByType } from '../helpers/get-error-by-type'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\nimport { noop as css } from '../helpers/noop-template'\nimport { CloseIcon } from '../icons/CloseIcon'\nimport { RuntimeError } from './RuntimeError'\nimport { VersionStalenessInfo } from '../components/VersionStalenessInfo'\nimport type { VersionInfo } from '../../../../../server/dev/parse-version-info'\nimport { getErrorSource } from '../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../errors/hydration-error-info'\nimport { NodejsInspectorCopyButton } from '../components/nodejs-inspector'\nimport { CopyButton } from '../components/copy-button'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'\n\nexport type SupportedErrorEvent = {\n  id: number\n  event: UnhandledErrorAction | UnhandledRejectionAction\n}\nexport type ErrorsProps = {\n  isAppDir: boolean\n  errors: SupportedErrorEvent[]\n  initialDisplayState: DisplayState\n  versionInfo?: VersionInfo\n  hasStaticIndicator?: boolean\n  debugInfo?: DebugInfo\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\ntype DisplayState = 'minimized' | 'fullscreen' | 'hidden'\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  // If it's replayed error, display the environment name\n  const environmentName =\n    'environmentName' in error ? error['environmentName'] : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n  return (\n    <>\n      {envPrefix}\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || error.message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nfunction getErrorSignature(ev: SupportedErrorEvent): string {\n  const { event } = ev\n  switch (event.type) {\n    case ACTION_UNHANDLED_ERROR:\n    case ACTION_UNHANDLED_REJECTION: {\n      return `${event.reason.name}::${event.reason.message}::${event.reason.stack}`\n    }\n    default: {\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const _: never = event\n  return ''\n}\n\nexport function Errors({\n  isAppDir,\n  errors,\n  initialDisplayState,\n  versionInfo,\n  hasStaticIndicator,\n  debugInfo,\n}: ErrorsProps) {\n  const [lookups, setLookups] = useState(\n    {} as { [eventId: string]: ReadyErrorEvent }\n  )\n\n  const [readyErrors, nextError] = useMemo<\n    [ReadyErrorEvent[], SupportedErrorEvent | null]\n  >(() => {\n    let ready: ReadyErrorEvent[] = []\n    let next: SupportedErrorEvent | null = null\n\n    // Ensure errors are displayed in the order they occurred in:\n    for (let idx = 0; idx < errors.length; ++idx) {\n      const e = errors[idx]\n      const { id } = e\n      if (id in lookups) {\n        ready.push(lookups[id])\n        continue\n      }\n\n      // Check for duplicate errors\n      if (idx > 0) {\n        const prev = errors[idx - 1]\n        if (getErrorSignature(prev) === getErrorSignature(e)) {\n          continue\n        }\n      }\n\n      next = e\n      break\n    }\n\n    return [ready, next]\n  }, [errors, lookups])\n\n  const isLoading = useMemo<boolean>(() => {\n    return readyErrors.length < 1 && Boolean(errors.length)\n  }, [errors.length, readyErrors.length])\n\n  useEffect(() => {\n    if (nextError == null) {\n      return\n    }\n\n    let mounted = true\n    getErrorByType(nextError, isAppDir).then((resolved) => {\n      if (mounted) {\n        // We don't care if the desired error changed while we were resolving,\n        // thus we're not tracking it using a ref. Once the work has been done,\n        // we'll store it.\n        setLookups((m) => ({ ...m, [resolved.id]: resolved }))\n      }\n    })\n\n    return () => {\n      mounted = false\n    }\n  }, [nextError, isAppDir])\n\n  const [displayState, setDisplayState] =\n    useState<DisplayState>(initialDisplayState)\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n  const previous = useCallback(\n    () => setActiveIndex((v) => Math.max(0, v - 1)),\n    []\n  )\n  const next = useCallback(\n    () =>\n      setActiveIndex((v) =>\n        Math.max(0, Math.min(readyErrors.length - 1, v + 1))\n      ),\n    [readyErrors.length]\n  )\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => readyErrors[activeIdx] ?? null,\n    [activeIdx, readyErrors]\n  )\n\n  // Reset component state when there are no errors to be displayed.\n  // This should never happen, but lets handle it.\n  useEffect(() => {\n    if (errors.length < 1) {\n      setLookups({})\n      setDisplayState('hidden')\n      setActiveIndex(0)\n    }\n  }, [errors.length])\n\n  const minimize = useCallback(() => setDisplayState('minimized'), [])\n  const hide = useCallback(() => setDisplayState('hidden'), [])\n  const fullscreen = useCallback(() => setDisplayState('fullscreen'), [])\n\n  // This component shouldn't be rendered with no errors, but if it is, let's\n  // handle it gracefully by rendering nothing.\n  if (errors.length < 1 || activeError == null) {\n    return null\n  }\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (displayState === 'hidden') {\n    return null\n  }\n\n  if (displayState === 'minimized') {\n    return (\n      <Toast\n        data-nextjs-toast\n        data-issues\n        className={`nextjs-toast-errors-parent${hasStaticIndicator ? ' nextjs-error-with-static' : ''}`}\n        onClick={fullscreen}\n      >\n        <div className=\"nextjs-toast-errors\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n          </svg>\n          <span>\n            <span data-issues-count>{readyErrors.length}</span> issue\n            {readyErrors.length > 1 ? 's' : ''}\n          </span>\n          <button\n            data-nextjs-toast-errors-hide-button\n            className=\"nextjs-toast-hide-button\"\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              hide()\n            }}\n            aria-label=\"Hide Issues\"\n          >\n            <CloseIcon />\n          </button>\n        </div>\n      </Toast>\n    )\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  return (\n    <Overlay>\n      <Dialog\n        type=\"error\"\n        aria-labelledby=\"nextjs__container_errors_label\"\n        aria-describedby=\"nextjs__container_errors_desc\"\n        onClose={isServerError ? undefined : minimize}\n      >\n        <DialogContent>\n          <DialogHeader className=\"nextjs-container-errors-header\">\n            <LeftRightDialogHeader\n              previous={activeIdx > 0 ? previous : null}\n              next={activeIdx < readyErrors.length - 1 ? next : null}\n              close={isServerError ? undefined : minimize}\n            >\n              <small>\n                <span>{activeIdx + 1}</span> of{' '}\n                <span data-nextjs-dialog-header-total-count>\n                  {readyErrors.length}\n                </span>\n                {' issue'}\n                {readyErrors.length < 2 ? '' : 's'}\n              </small>\n              <VersionStalenessInfo versionInfo={versionInfo} />\n            </LeftRightDialogHeader>\n\n            <div\n              className=\"nextjs__container_errors__error_title\"\n              data-nextjs-error-code={extractNextErrorCode(error)} // allow assertion in tests before error rating is implemented\n            >\n              <h1\n                id=\"nextjs__container_errors_label\"\n                className=\"nextjs__container_errors_label\"\n              >\n                {isServerError\n                  ? 'Server Error'\n                  : isUnhandledError\n                    ? 'Console Error'\n                    : 'Unhandled Runtime Error'}\n              </h1>\n              <span>\n                <CopyButton\n                  data-nextjs-data-runtime-error-copy-stack\n                  actionLabel=\"Copy error stack\"\n                  successLabel=\"Copied\"\n                  content={error.stack || ''}\n                  disabled={!error.stack}\n                />\n\n                <NodejsInspectorCopyButton\n                  devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}\n                />\n              </span>\n            </div>\n            <p\n              id=\"nextjs__container_errors_desc\"\n              className=\"nextjs__container_errors_desc\"\n            >\n              <ErrorDescription\n                error={error}\n                hydrationWarning={hydrationWarning}\n              />\n            </p>\n            {notes ? (\n              <>\n                <p\n                  id=\"nextjs__container_errors__notes\"\n                  className=\"nextjs__container_errors__notes\"\n                >\n                  {notes}\n                </p>\n              </>\n            ) : null}\n            {hydrationWarning ? (\n              <p\n                id=\"nextjs__container_errors__link\"\n                className=\"nextjs__container_errors__link\"\n              >\n                <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n              </p>\n            ) : null}\n\n            {hydrationWarning &&\n            (activeError.componentStackFrames?.length ||\n              !!errorDetails.reactOutputComponentDiff) ? (\n              <PseudoHtmlDiff\n                className=\"nextjs__container_errors__component-stack\"\n                hydrationMismatchType={hydrationErrorType}\n                componentStackFrames={activeError.componentStackFrames || []}\n                firstContent={serverContent}\n                secondContent={clientContent}\n                reactOutputComponentDiff={errorDetails.reactOutputComponentDiff}\n              />\n            ) : null}\n            {isServerError ? (\n              <div>\n                <small>\n                  This error happened while generating the page. Any console\n                  logs will be displayed in the terminal window.\n                </small>\n              </div>\n            ) : undefined}\n          </DialogHeader>\n          <Suspense fallback={<div data-nextjs-error-suspended />}>\n            <DialogBody className=\"nextjs-container-errors-body\">\n              <RuntimeError\n                key={activeError.id.toString()}\n                error={activeError}\n              />\n            </DialogBody>\n          </Suspense>\n        </DialogContent>\n      </Dialog>\n    </Overlay>\n  )\n}\n\nexport const styles = css`\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header p {\n    font-size: var(--size-font-small);\n    line-height: var(--size-font-big);\n    white-space: pre-wrap;\n  }\n  .nextjs__container_errors_desc {\n    font-family: var(--font-stack-monospace);\n    padding: var(--size-gap) var(--size-gap-double);\n    border-left: 2px solid var(--color-text-color-red-1);\n    margin-top: var(--size-gap);\n    font-weight: bold;\n    color: var(--color-text-color-red-1);\n    background-color: var(--color-text-background-red-1);\n  }\n  p.nextjs__container_errors__link {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-text-color-red-1);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  p.nextjs__container_errors__notes {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-stack-notes);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs__container_errors__component-stack {\n    padding: 12px 32px;\n    color: var(--color-ansi-fg);\n    background: var(--color-ansi-bg);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .nextjs-data-runtime-error-inspect-link,\n  .nextjs-data-runtime-error-inspect-link:hover {\n    margin: 0 8px;\n    color: inherit;\n  }\n`\n"],"names":["useState","useEffect","useMemo","useCallback","Suspense","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","Dialog","DialogBody","DialogContent","DialogHeader","LeftRightDialogHeader","Overlay","Toast","getErrorByType","noop","css","CloseIcon","RuntimeError","VersionStalenessInfo","getErrorSource","HotlinkedText","PseudoHtmlDiff","getHydrationWarningType","NodejsInspectorCopyButton","CopyButton","getUnhandledErrorType","isUnhandledConsoleOrRejection","extractNextErrorCode","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","unhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","message","matcher","getErrorSignature","ev","event","type","reason","stack","_","Errors","isAppDir","errors","initialDisplayState","versionInfo","hasStaticIndicator","debugInfo","activeError","lookups","setLookups","readyErrors","nextError","ready","next","idx","length","e","id","push","prev","isLoading","Boolean","mounted","then","resolved","m","displayState","setDisplayState","activeIdx","setActiveIndex","previous","v","Math","max","min","minimize","hide","fullscreen","data-nextjs-toast","data-issues","className","onClick","div","svg","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","circle","cx","cy","r","line","x1","y1","x2","y2","span","data-issues-count","button","data-nextjs-toast-errors-hide-button","stopPropagation","aria-label","isServerError","includes","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","replace","aria-labelledby","aria-describedby","onClose","undefined","close","small","data-nextjs-dialog-header-total-count","data-nextjs-error-code","h1","data-nextjs-data-runtime-error-copy-stack","actionLabel","successLabel","content","disabled","devtoolsFrontendUrl","p","componentStackFrames","reactOutputComponentDiff","hydrationMismatchType","firstContent","secondContent","fallback","data-nextjs-error-suspended","toString","styles"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/container/Errors.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useCallback, Suspense } from 'react'\nimport {\n  ACTION_UNHANDLED_ERROR,\n  ACTION_UNHANDLED_REJECTION,\n  type UnhandledErrorAction,\n  type UnhandledRejectionAction,\n} from '../../shared'\nimport type { DebugInfo } from '../../types'\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogHeader,\n} from '../components/Dialog'\nimport { LeftRightDialogHeader } from '../components/LeftRightDialogHeader'\nimport { Overlay } from '../components/Overlay'\nimport { Toast } from '../components/Toast'\nimport { getErrorByType } from '../helpers/get-error-by-type'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\nimport { noop as css } from '../helpers/noop-template'\nimport { CloseIcon } from '../icons/CloseIcon'\nimport { RuntimeError } from './RuntimeError'\nimport { VersionStalenessInfo } from '../components/VersionStalenessInfo'\nimport type { VersionInfo } from '../../../../../server/dev/parse-version-info'\nimport { getErrorSource } from '../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../errors/hydration-error-info'\nimport { NodejsInspectorCopyButton } from '../components/nodejs-inspector'\nimport { CopyButton } from '../components/copy-button'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'\n\nexport type SupportedErrorEvent = {\n  id: number\n  event: UnhandledErrorAction | UnhandledRejectionAction\n}\nexport type ErrorsProps = {\n  isAppDir: boolean\n  errors: SupportedErrorEvent[]\n  initialDisplayState: DisplayState\n  versionInfo?: VersionInfo\n  hasStaticIndicator?: boolean\n  debugInfo?: DebugInfo\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\ntype DisplayState = 'minimized' | 'fullscreen' | 'hidden'\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  // If it's replayed error, display the environment name\n  const environmentName =\n    'environmentName' in error ? error['environmentName'] : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n  return (\n    <>\n      {envPrefix}\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || error.message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nfunction getErrorSignature(ev: SupportedErrorEvent): string {\n  const { event } = ev\n  switch (event.type) {\n    case ACTION_UNHANDLED_ERROR:\n    case ACTION_UNHANDLED_REJECTION: {\n      return `${event.reason.name}::${event.reason.message}::${event.reason.stack}`\n    }\n    default: {\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const _: never = event\n  return ''\n}\n\nexport function Errors({\n  isAppDir,\n  errors,\n  initialDisplayState,\n  versionInfo,\n  hasStaticIndicator,\n  debugInfo,\n}: ErrorsProps) {\n  const [lookups, setLookups] = useState(\n    {} as { [eventId: string]: ReadyErrorEvent }\n  )\n\n  const [readyErrors, nextError] = useMemo<\n    [ReadyErrorEvent[], SupportedErrorEvent | null]\n  >(() => {\n    let ready: ReadyErrorEvent[] = []\n    let next: SupportedErrorEvent | null = null\n\n    // Ensure errors are displayed in the order they occurred in:\n    for (let idx = 0; idx < errors.length; ++idx) {\n      const e = errors[idx]\n      const { id } = e\n      if (id in lookups) {\n        ready.push(lookups[id])\n        continue\n      }\n\n      // Check for duplicate errors\n      if (idx > 0) {\n        const prev = errors[idx - 1]\n        if (getErrorSignature(prev) === getErrorSignature(e)) {\n          continue\n        }\n      }\n\n      next = e\n      break\n    }\n\n    return [ready, next]\n  }, [errors, lookups])\n\n  const isLoading = useMemo<boolean>(() => {\n    return readyErrors.length < 1 && Boolean(errors.length)\n  }, [errors.length, readyErrors.length])\n\n  useEffect(() => {\n    if (nextError == null) {\n      return\n    }\n\n    let mounted = true\n    getErrorByType(nextError, isAppDir).then((resolved) => {\n      if (mounted) {\n        // We don't care if the desired error changed while we were resolving,\n        // thus we're not tracking it using a ref. Once the work has been done,\n        // we'll store it.\n        setLookups((m) => ({ ...m, [resolved.id]: resolved }))\n      }\n    })\n\n    return () => {\n      mounted = false\n    }\n  }, [nextError, isAppDir])\n\n  const [displayState, setDisplayState] =\n    useState<DisplayState>(initialDisplayState)\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n  const previous = useCallback(\n    () => setActiveIndex((v) => Math.max(0, v - 1)),\n    []\n  )\n  const next = useCallback(\n    () =>\n      setActiveIndex((v) =>\n        Math.max(0, Math.min(readyErrors.length - 1, v + 1))\n      ),\n    [readyErrors.length]\n  )\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => readyErrors[activeIdx] ?? null,\n    [activeIdx, readyErrors]\n  )\n\n  // Reset component state when there are no errors to be displayed.\n  // This should never happen, but lets handle it.\n  useEffect(() => {\n    if (errors.length < 1) {\n      setLookups({})\n      setDisplayState('hidden')\n      setActiveIndex(0)\n    }\n  }, [errors.length])\n\n  const minimize = useCallback(() => setDisplayState('minimized'), [])\n  const hide = useCallback(() => setDisplayState('hidden'), [])\n  const fullscreen = useCallback(() => setDisplayState('fullscreen'), [])\n\n  // This component shouldn't be rendered with no errors, but if it is, let's\n  // handle it gracefully by rendering nothing.\n  if (errors.length < 1 || activeError == null) {\n    return null\n  }\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (displayState === 'hidden') {\n    return null\n  }\n\n  if (displayState === 'minimized') {\n    return (\n      <Toast\n        data-nextjs-toast\n        data-issues\n        className={`nextjs-toast-errors-parent${hasStaticIndicator ? ' nextjs-error-with-static' : ''}`}\n        onClick={fullscreen}\n      >\n        <div className=\"nextjs-toast-errors\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n          </svg>\n          <span>\n            <span data-issues-count>{readyErrors.length}</span> issue\n            {readyErrors.length > 1 ? 's' : ''}\n          </span>\n          <button\n            data-nextjs-toast-errors-hide-button\n            className=\"nextjs-toast-hide-button\"\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              hide()\n            }}\n            aria-label=\"Hide Issues\"\n          >\n            <CloseIcon />\n          </button>\n        </div>\n      </Toast>\n    )\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  return (\n    <Overlay>\n      <Dialog\n        type=\"error\"\n        aria-labelledby=\"nextjs__container_errors_label\"\n        aria-describedby=\"nextjs__container_errors_desc\"\n        onClose={isServerError ? undefined : minimize}\n      >\n        <DialogContent>\n          <DialogHeader className=\"nextjs-container-errors-header\">\n            <LeftRightDialogHeader\n              previous={activeIdx > 0 ? previous : null}\n              next={activeIdx < readyErrors.length - 1 ? next : null}\n              close={isServerError ? undefined : minimize}\n            >\n              <small>\n                <span>{activeIdx + 1}</span> of{' '}\n                <span data-nextjs-dialog-header-total-count>\n                  {readyErrors.length}\n                </span>\n                {' issue'}\n                {readyErrors.length < 2 ? '' : 's'}\n              </small>\n              <VersionStalenessInfo versionInfo={versionInfo} />\n            </LeftRightDialogHeader>\n\n            <div\n              className=\"nextjs__container_errors__error_title\"\n              data-nextjs-error-code={extractNextErrorCode(error)} // allow assertion in tests before error rating is implemented\n            >\n              <h1\n                id=\"nextjs__container_errors_label\"\n                className=\"nextjs__container_errors_label\"\n              >\n                {isServerError\n                  ? 'Server Error'\n                  : isUnhandledError\n                    ? 'Console Error'\n                    : 'Unhandled Runtime Error'}\n              </h1>\n              <span>\n                <CopyButton\n                  data-nextjs-data-runtime-error-copy-stack\n                  actionLabel=\"Copy error stack\"\n                  successLabel=\"Copied\"\n                  content={error.stack || ''}\n                  disabled={!error.stack}\n                />\n\n                <NodejsInspectorCopyButton\n                  devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}\n                />\n              </span>\n            </div>\n            <p\n              id=\"nextjs__container_errors_desc\"\n              className=\"nextjs__container_errors_desc\"\n            >\n              <ErrorDescription\n                error={error}\n                hydrationWarning={hydrationWarning}\n              />\n            </p>\n            {notes ? (\n              <>\n                <p\n                  id=\"nextjs__container_errors__notes\"\n                  className=\"nextjs__container_errors__notes\"\n                >\n                  {notes}\n                </p>\n              </>\n            ) : null}\n            {hydrationWarning ? (\n              <p\n                id=\"nextjs__container_errors__link\"\n                className=\"nextjs__container_errors__link\"\n              >\n                <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n              </p>\n            ) : null}\n\n            {hydrationWarning &&\n            (activeError.componentStackFrames?.length ||\n              !!errorDetails.reactOutputComponentDiff) ? (\n              <PseudoHtmlDiff\n                className=\"nextjs__container_errors__component-stack\"\n                hydrationMismatchType={hydrationErrorType}\n                firstContent={serverContent}\n                secondContent={clientContent}\n                reactOutputComponentDiff={\n                  errorDetails.reactOutputComponentDiff || ''\n                }\n              />\n            ) : null}\n            {isServerError ? (\n              <div>\n                <small>\n                  This error happened while generating the page. Any console\n                  logs will be displayed in the terminal window.\n                </small>\n              </div>\n            ) : undefined}\n          </DialogHeader>\n          <Suspense fallback={<div data-nextjs-error-suspended />}>\n            <DialogBody className=\"nextjs-container-errors-body\">\n              <RuntimeError\n                key={activeError.id.toString()}\n                error={activeError}\n              />\n            </DialogBody>\n          </Suspense>\n        </DialogContent>\n      </Dialog>\n    </Overlay>\n  )\n}\n\nexport const styles = css`\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header p {\n    font-size: var(--size-font-small);\n    line-height: var(--size-font-big);\n    white-space: pre-wrap;\n  }\n  .nextjs__container_errors_desc {\n    font-family: var(--font-stack-monospace);\n    padding: var(--size-gap) var(--size-gap-double);\n    border-left: 2px solid var(--color-text-color-red-1);\n    margin-top: var(--size-gap);\n    font-weight: bold;\n    color: var(--color-text-color-red-1);\n    background-color: var(--color-text-background-red-1);\n  }\n  p.nextjs__container_errors__link {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-text-color-red-1);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  p.nextjs__container_errors__notes {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-stack-notes);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs__container_errors__component-stack {\n    padding: 12px 32px;\n    color: var(--color-ansi-fg);\n    background: var(--color-ansi-bg);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .nextjs-data-runtime-error-inspect-link,\n  .nextjs-data-runtime-error-inspect-link:hover {\n    margin: 0 8px;\n    color: inherit;\n  }\n`\n"],"names":["useState","useEffect","useMemo","useCallback","Suspense","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","Dialog","DialogBody","DialogContent","DialogHeader","LeftRightDialogHeader","Overlay","Toast","getErrorByType","noop","css","CloseIcon","RuntimeError","VersionStalenessInfo","getErrorSource","HotlinkedText","PseudoHtmlDiff","getHydrationWarningType","NodejsInspectorCopyButton","CopyButton","getUnhandledErrorType","isUnhandledConsoleOrRejection","extractNextErrorCode","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","unhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","message","matcher","getErrorSignature","ev","event","type","reason","stack","_","Errors","isAppDir","errors","initialDisplayState","versionInfo","hasStaticIndicator","debugInfo","activeError","lookups","setLookups","readyErrors","nextError","ready","next","idx","length","e","id","push","prev","isLoading","Boolean","mounted","then","resolved","m","displayState","setDisplayState","activeIdx","setActiveIndex","previous","v","Math","max","min","minimize","hide","fullscreen","data-nextjs-toast","data-issues","className","onClick","div","svg","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","circle","cx","cy","r","line","x1","y1","x2","y2","span","data-issues-count","button","data-nextjs-toast-errors-hide-button","stopPropagation","aria-label","isServerError","includes","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","replace","aria-labelledby","aria-describedby","onClose","undefined","close","small","data-nextjs-dialog-header-total-count","data-nextjs-error-code","h1","data-nextjs-data-runtime-error-copy-stack","actionLabel","successLabel","content","disabled","devtoolsFrontendUrl","p","componentStackFrames","reactOutputComponentDiff","hydrationMismatchType","firstContent","secondContent","fallback","data-nextjs-error-suspended","toString","styles"],"mappings":"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"}

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

@@ -1,275 +1,16 @@
-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
+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    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\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-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    font-size: var(--size-font-small);\n    line-height: calc(5 / 3);\n    white-space: pre;\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-line--error] {\n    color: var(--color-ansi-yellow);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\n  }\n  ",
+        "\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 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"
     ]);
-    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
-                })
-            })
-        ]
-    });
+    _templateObject = function() {
+        return data;
+    };
+    return data;
 }
+import { noop as css } from '../../helpers/noop-template';
+export { PseudoHtmlDiff } from '../../../hydration-diff/diff-view';
+export const styles = css(_templateObject(), '');
 
 //# sourceMappingURL=component-stack-pseudo-html.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/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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"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/internal/container/RuntimeError/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 styles = css`\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\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-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    font-size: var(--size-font-small);\n    line-height: calc(5 / 3);\n    white-space: pre;\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-line--error] {\n    color: var(--color-ansi-yellow);\n    font-weight: bold;\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-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`\n"],"names":["noop","css","PseudoHtmlDiff","styles"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,8BAA6B;AAEzD,SAASC,cAAc,QAAQ,oCAAmC;AAElE,OAAO,MAAMC,SAASF,uBAmC8B,IAsBnD"}

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

@@ -1,7 +1,7 @@
 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"
+        "\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"
     ]);
     _templateObject = function() {
         return data;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CodeFrame } from '../../components/CodeFrame'\nimport {\n  useFrames,\n  type ReadyRuntimeError,\n} 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\n  const frames = useFrames(error)\n  const {\n    firstFrame,\n    allLeadingFrames,\n    trailingCallStackFrames,\n    displayedFramesCount,\n  } = React.useMemo(() => {\n    const filteredFrames = 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 < 0 ? 0 : firstFirstPartyFrameIndex\n      ),\n    }\n  }, [frames, isIgnoredExpanded])\n\n  return (\n    <>\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 === frames.length && !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    </>\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","useFrames","noop","css","CallStackFrame","RuntimeError","error","isIgnoredExpanded","setIsIgnoredExpanded","useState","frames","firstFrame","allLeadingFrames","trailingCallStackFrames","displayedFramesCount","useMemo","filteredFrames","filter","frame","ignored","firstFirstPartyFrameIndex","findIndex","entry","Boolean","originalCodeFrame","originalStackFrame","length","slice","h2","map","frameIndex","stackFrame","codeFrame","undefined","button","data-expand-ignore-button","onClick","styles"],"mappings":";;;;;;;;;;;AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,SAAS,QAAQ,6BAA4B;AACtD,SACEC,SAAS,QAEJ,kCAAiC;AACxC,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,GAAGT,MAAMU,QAAQ,CAAC;IAEjE,MAAMC,SAAST,UAAUK;IACzB,MAAM,EACJK,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,EACvBC,oBAAoB,EACrB,GAAGf,MAAMgB,OAAO,CAAC;QAChB,MAAMC,iBAAiBN,OAAOO,MAAM,CAAC,CAACC,QACpCX,oBAAoB,OAAO,CAACW,MAAMC,OAAO;QAG3C,MAAMC,4BAA4BJ,eAAeK,SAAS,CACxD,CAACC,QACC,CAACA,MAAMH,OAAO,IACdI,QAAQD,MAAME,iBAAiB,KAC/BD,QAAQD,MAAMG,kBAAkB;YAKtBT;QAFd,OAAO;YACLF,sBAAsBE,eAAeU,MAAM;YAC3Cf,YAAYK,CAAAA,4CAAAA,cAAc,CAACI,0BAA0B,YAAzCJ,4CAA6C;YACzDJ,kBACEQ,4BAA4B,IACxB,EAAE,GACFJ,eAAeW,KAAK,CAAC,GAAGP;YAC9BP,yBAAyBG,eAAeW,KAAK,CAC3CP,4BAA4B,IAAI,IAAIA;QAExC;IACF,GAAG;QAACV;QAAQH;KAAkB;IAE9B,qBACE;;YACGI,2BACC;;kCACE,KAACiB;kCAAG;;oBACHhB,iBAAiBiB,GAAG,CAAC,CAACX,OAAOY,2BAC5B,KAAC1B;4BAECc,OAAOA;2BADF,AAAC,wBAAqBY;kCAI/B,KAAC9B;wBACC+B,YAAYpB,WAAWc,kBAAkB;wBACzCO,WAAWrB,WAAWa,iBAAiB;;;iBAGzCS;YAEHpB,wBAAwBgB,GAAG,CAAC,CAACX,OAAOY,2BACnC,KAAC1B;oBAECc,OAAOA;mBADF,AAAC,wBAAqBY;YAK7B,0GAA0G;YAC1GhB,yBAAyBJ,OAAOgB,MAAM,IAAI,CAACnB,oBAAoB,qBAC7D,KAAC2B;gBACCC,6BAA2B5B;gBAC3B6B,SAAS,IAAM5B,qBAAqB,CAACD;0BAEpC,AAAC,KAAEA,CAAAA,oBAAoB,SAAS,MAAK,IAAE;;;;AAMpD;AAEA,OAAO,MAAM8B,SAASlC,uBAsJrB"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CodeFrame } from '../../components/CodeFrame'\nimport {\n  useFrames,\n  type ReadyRuntimeError,\n} 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\n  const frames = useFrames(error)\n  const {\n    firstFrame,\n    allLeadingFrames,\n    trailingCallStackFrames,\n    displayedFramesCount,\n  } = React.useMemo(() => {\n    const filteredFrames = 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 < 0 ? 0 : firstFirstPartyFrameIndex\n      ),\n    }\n  }, [frames, isIgnoredExpanded])\n\n  return (\n    <>\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 === frames.length && !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    </>\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"],"names":["React","CodeFrame","useFrames","noop","css","CallStackFrame","RuntimeError","error","isIgnoredExpanded","setIsIgnoredExpanded","useState","frames","firstFrame","allLeadingFrames","trailingCallStackFrames","displayedFramesCount","useMemo","filteredFrames","filter","frame","ignored","firstFirstPartyFrameIndex","findIndex","entry","Boolean","originalCodeFrame","originalStackFrame","length","slice","h2","map","frameIndex","stackFrame","codeFrame","undefined","button","data-expand-ignore-button","onClick","styles"],"mappings":";;;;;;;;;;;AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,SAAS,QAAQ,6BAA4B;AACtD,SACEC,SAAS,QAEJ,kCAAiC;AACxC,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,GAAGT,MAAMU,QAAQ,CAAC;IAEjE,MAAMC,SAAST,UAAUK;IACzB,MAAM,EACJK,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,EACvBC,oBAAoB,EACrB,GAAGf,MAAMgB,OAAO,CAAC;QAChB,MAAMC,iBAAiBN,OAAOO,MAAM,CAAC,CAACC,QACpCX,oBAAoB,OAAO,CAACW,MAAMC,OAAO;QAG3C,MAAMC,4BAA4BJ,eAAeK,SAAS,CACxD,CAACC,QACC,CAACA,MAAMH,OAAO,IACdI,QAAQD,MAAME,iBAAiB,KAC/BD,QAAQD,MAAMG,kBAAkB;YAKtBT;QAFd,OAAO;YACLF,sBAAsBE,eAAeU,MAAM;YAC3Cf,YAAYK,CAAAA,4CAAAA,cAAc,CAACI,0BAA0B,YAAzCJ,4CAA6C;YACzDJ,kBACEQ,4BAA4B,IACxB,EAAE,GACFJ,eAAeW,KAAK,CAAC,GAAGP;YAC9BP,yBAAyBG,eAAeW,KAAK,CAC3CP,4BAA4B,IAAI,IAAIA;QAExC;IACF,GAAG;QAACV;QAAQH;KAAkB;IAE9B,qBACE;;YACGI,2BACC;;kCACE,KAACiB;kCAAG;;oBACHhB,iBAAiBiB,GAAG,CAAC,CAACX,OAAOY,2BAC5B,KAAC1B;4BAECc,OAAOA;2BADF,AAAC,wBAAqBY;kCAI/B,KAAC9B;wBACC+B,YAAYpB,WAAWc,kBAAkB;wBACzCO,WAAWrB,WAAWa,iBAAiB;;;iBAGzCS;YAEHpB,wBAAwBgB,GAAG,CAAC,CAACX,OAAOY,2BACnC,KAAC1B;oBAECc,OAAOA;mBADF,AAAC,wBAAqBY;YAK7B,0GAA0G;YAC1GhB,yBAAyBJ,OAAOgB,MAAM,IAAI,CAACnB,oBAAoB,qBAC7D,KAAC2B;gBACCC,6BAA2B5B;gBAC3B6B,SAAS,IAAM5B,qBAAqB,CAACD;0BAEpC,AAAC,KAAEA,CAAAA,oBAAoB,SAAS,MAAK,IAAE;;;;AAMpD;AAEA,OAAO,MAAM8B,SAASlC,uBAuHrB"}

package/dist/esm/client/components/react-dev-overlay/internal/styles/ComponentStyles.js

@@ -11,6 +11,7 @@ function _templateObject() {
         "\n        ",
         "\n        ",
         "\n        ",
+        "\n        ",
         "\n      "
     ]);
     _templateObject = function() {
@@ -29,10 +30,11 @@ import { styles as versionStaleness } from '../components/VersionStalenessInfo';
 import { styles as buildErrorStyles } from '../container/BuildError';
 import { styles as containerErrorStyles } from '../container/Errors';
 import { styles as containerRuntimeErrorStyles } from '../container/RuntimeError';
+import { styles as pseudoHtmlStyles } from '../container/RuntimeError/component-stack-pseudo-html';
 import { noop as css } from '../helpers/noop-template';
 export function ComponentStyles() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject(), overlay, toast, dialog, leftRightDialogHeader, codeFrame, terminal, buildErrorStyles, containerErrorStyles, containerRuntimeErrorStyles, versionStaleness)
+        children: css(_templateObject(), overlay, toast, dialog, leftRightDialogHeader, codeFrame, terminal, buildErrorStyles, containerErrorStyles, containerRuntimeErrorStyles, versionStaleness, pseudoHtmlStyles)
     });
 }
 

package/dist/esm/client/components/react-dev-overlay/internal/styles/ComponentStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/styles/ComponentStyles.tsx"],"sourcesContent":["import { styles as codeFrame } from '../components/CodeFrame/styles'\nimport { styles as dialog } from '../components/Dialog'\nimport { styles as leftRightDialogHeader } from '../components/LeftRightDialogHeader/styles'\nimport { styles as overlay } from '../components/Overlay/styles'\nimport { styles as terminal } from '../components/Terminal/styles'\nimport { styles as toast } from '../components/Toast'\nimport { styles as versionStaleness } from '../components/VersionStalenessInfo'\nimport { styles as buildErrorStyles } from '../container/BuildError'\nimport { styles as containerErrorStyles } from '../container/Errors'\nimport { styles as containerRuntimeErrorStyles } from '../container/RuntimeError'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function ComponentStyles() {\n  return (\n    <style>\n      {css`\n        ${overlay}\n        ${toast}\n        ${dialog}\n        ${leftRightDialogHeader}\n        ${codeFrame}\n        ${terminal}\n        ${buildErrorStyles}\n        ${containerErrorStyles}\n        ${containerRuntimeErrorStyles}\n        ${versionStaleness}\n      `}\n    </style>\n  )\n}\n"],"names":["styles","codeFrame","dialog","leftRightDialogHeader","overlay","terminal","toast","versionStaleness","buildErrorStyles","containerErrorStyles","containerRuntimeErrorStyles","noop","css","ComponentStyles","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,UAAUC,SAAS,QAAQ,iCAAgC;AACpE,SAASD,UAAUE,MAAM,QAAQ,uBAAsB;AACvD,SAASF,UAAUG,qBAAqB,QAAQ,6CAA4C;AAC5F,SAASH,UAAUI,OAAO,QAAQ,+BAA8B;AAChE,SAASJ,UAAUK,QAAQ,QAAQ,gCAA+B;AAClE,SAASL,UAAUM,KAAK,QAAQ,sBAAqB;AACrD,SAASN,UAAUO,gBAAgB,QAAQ,qCAAoC;AAC/E,SAASP,UAAUQ,gBAAgB,QAAQ,0BAAyB;AACpE,SAASR,UAAUS,oBAAoB,QAAQ,sBAAqB;AACpE,SAAST,UAAUU,2BAA2B,QAAQ,4BAA2B;AACjF,SAASC,QAAQC,GAAG,QAAQ,2BAA0B;AAEtD,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF,uBACGR,SACAE,OACAJ,QACAC,uBACAF,WACAI,UACAG,kBACAC,sBACAC,6BACAH;;AAIV"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/styles/ComponentStyles.tsx"],"sourcesContent":["import { styles as codeFrame } from '../components/CodeFrame/styles'\nimport { styles as dialog } from '../components/Dialog'\nimport { styles as leftRightDialogHeader } from '../components/LeftRightDialogHeader/styles'\nimport { styles as overlay } from '../components/Overlay/styles'\nimport { styles as terminal } from '../components/Terminal/styles'\nimport { styles as toast } from '../components/Toast'\nimport { styles as versionStaleness } from '../components/VersionStalenessInfo'\nimport { styles as buildErrorStyles } from '../container/BuildError'\nimport { styles as containerErrorStyles } from '../container/Errors'\nimport { styles as containerRuntimeErrorStyles } from '../container/RuntimeError'\nimport { styles as pseudoHtmlStyles } from '../container/RuntimeError/component-stack-pseudo-html'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function ComponentStyles() {\n  return (\n    <style>\n      {css`\n        ${overlay}\n        ${toast}\n        ${dialog}\n        ${leftRightDialogHeader}\n        ${codeFrame}\n        ${terminal}\n        ${buildErrorStyles}\n        ${containerErrorStyles}\n        ${containerRuntimeErrorStyles}\n        ${versionStaleness}\n        ${pseudoHtmlStyles}\n      `}\n    </style>\n  )\n}\n"],"names":["styles","codeFrame","dialog","leftRightDialogHeader","overlay","terminal","toast","versionStaleness","buildErrorStyles","containerErrorStyles","containerRuntimeErrorStyles","pseudoHtmlStyles","noop","css","ComponentStyles","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,UAAUC,SAAS,QAAQ,iCAAgC;AACpE,SAASD,UAAUE,MAAM,QAAQ,uBAAsB;AACvD,SAASF,UAAUG,qBAAqB,QAAQ,6CAA4C;AAC5F,SAASH,UAAUI,OAAO,QAAQ,+BAA8B;AAChE,SAASJ,UAAUK,QAAQ,QAAQ,gCAA+B;AAClE,SAASL,UAAUM,KAAK,QAAQ,sBAAqB;AACrD,SAASN,UAAUO,gBAAgB,QAAQ,qCAAoC;AAC/E,SAASP,UAAUQ,gBAAgB,QAAQ,0BAAyB;AACpE,SAASR,UAAUS,oBAAoB,QAAQ,sBAAqB;AACpE,SAAST,UAAUU,2BAA2B,QAAQ,4BAA2B;AACjF,SAASV,UAAUW,gBAAgB,QAAQ,wDAAuD;AAClG,SAASC,QAAQC,GAAG,QAAQ,2BAA0B;AAEtD,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF,uBACGT,SACAE,OACAJ,QACAC,uBACAF,WACAI,UACAG,kBACAC,sBACAC,6BACAH,kBACAI;;AAIV"}

package/dist/esm/client/index.js

@@ -27,7 +27,7 @@ import { onRecoverableError } from './react-client-callbacks/on-recoverable-erro
 import tracer from './tracing/tracer';
 import reportToSocket from './tracing/report-to-socket';
 import { isNextRouterError } from './components/is-next-router-error';
-export const version = "15.2.0-canary.50";
+export const version = "15.2.0-canary.52";
 export let router;
 export const emitter = mitt();
 const looseToArray = (input)=>[].slice.call(input);

package/dist/esm/lib/metadata/metadata.js

@@ -68,14 +68,14 @@ export function createMetadataComponents({ tree, searchParams, metadataContext,
                 } catch (notFoundMetadataErr) {
                     // In PPR rendering we still need to throw the postpone error.
                     // If metadata is postponed, React needs to be aware of the location of error.
-                    if (isPostpone(notFoundMetadataErr)) {
+                    if (serveStreamingMetadata && isPostpone(notFoundMetadataErr)) {
                         throw notFoundMetadataErr;
                     }
                 }
             }
             // In PPR rendering we still need to throw the postpone error.
             // If metadata is postponed, React needs to be aware of the location of error.
-            if (isPostpone(metadataErr)) {
+            if (serveStreamingMetadata && isPostpone(metadataErr)) {
                 throw metadataErr;
             }
             // We don't actually want to error in this component. We will