next 15.3.0-canary.5 → 15.3.0-canary.8

package/dist/cli/next-build.d.ts

@@ -8,7 +8,7 @@ export type NextBuildOptions = {
     experimentalDebugMemoryUsage: boolean;
     experimentalAppOnly?: boolean;
     experimentalTurbo?: boolean;
-    experimentalBuildMode: 'default' | 'compile' | 'generate';
+    experimentalBuildMode: 'default' | 'compile' | 'generate' | 'generate-env';
     experimentalUploadTrace?: string;
 };
 declare const nextBuild: (options: NextBuildOptions, directory?: string) => Promise<void>;

package/dist/cli/next-build.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/cli/next-build.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport '../server/lib/cpu-profile'\nimport { existsSync } from 'fs'\nimport { italic } from '../lib/picocolors'\nimport build from '../build'\nimport { warn } from '../build/output/log'\nimport { printAndExit } from '../server/lib/utils'\nimport isError from '../lib/is-error'\nimport { getProjectDir } from '../lib/get-project-dir'\nimport { enableMemoryDebuggingMode } from '../lib/memory/startup'\nimport { disableMemoryDebuggingMode } from '../lib/memory/shutdown'\n\nexport type NextBuildOptions = {\n  debug?: boolean\n  profile?: boolean\n  lint: boolean\n  mangling: boolean\n  experimentalDebugMemoryUsage: boolean\n  experimentalAppOnly?: boolean\n  experimentalTurbo?: boolean\n  experimentalBuildMode: 'default' | 'compile' | 'generate'\n  experimentalUploadTrace?: string\n}\n\nconst nextBuild = (options: NextBuildOptions, directory?: string) => {\n  process.on('SIGTERM', () => process.exit(143))\n  process.on('SIGINT', () => process.exit(130))\n\n  const {\n    debug,\n    experimentalDebugMemoryUsage,\n    profile,\n    lint,\n    mangling,\n    experimentalAppOnly,\n    experimentalTurbo,\n    experimentalBuildMode,\n    experimentalUploadTrace,\n  } = options\n\n  let traceUploadUrl: string | undefined\n  if (experimentalUploadTrace && !process.env.NEXT_TRACE_UPLOAD_DISABLED) {\n    traceUploadUrl = experimentalUploadTrace\n  }\n\n  if (!lint) {\n    warn('Linting is disabled.')\n  }\n\n  if (!mangling) {\n    warn(\n      'Mangling is disabled. Note: This may affect performance and should only be used for debugging purposes.'\n    )\n  }\n\n  if (profile) {\n    warn(\n      `Profiling is enabled. ${italic('Note: This may affect performance.')}`\n    )\n  }\n\n  if (experimentalDebugMemoryUsage) {\n    process.env.EXPERIMENTAL_DEBUG_MEMORY_USAGE = '1'\n    enableMemoryDebuggingMode()\n  }\n\n  const dir = getProjectDir(directory)\n\n  if (!existsSync(dir)) {\n    printAndExit(`> No such directory exists as the project root: ${dir}`)\n  }\n\n  if (experimentalTurbo) {\n    process.env.TURBOPACK = '1'\n  }\n\n  return build(\n    dir,\n    profile,\n    debug || Boolean(process.env.NEXT_DEBUG_BUILD),\n    lint,\n    !mangling,\n    experimentalAppOnly,\n    !!process.env.TURBOPACK,\n    experimentalBuildMode,\n    traceUploadUrl\n  )\n    .catch((err) => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n      console.error('')\n      if (\n        isError(err) &&\n        (err.code === 'INVALID_RESOLVE_ALIAS' ||\n          err.code === 'WEBPACK_ERRORS' ||\n          err.code === 'BUILD_OPTIMIZATION_FAILED' ||\n          err.code === 'NEXT_EXPORT_ERROR' ||\n          err.code === 'NEXT_STATIC_GEN_BAILOUT' ||\n          err.code === 'EDGE_RUNTIME_UNSUPPORTED_API')\n      ) {\n        printAndExit(`> ${err.message}`)\n      } else {\n        console.error('> Build error occurred')\n        printAndExit(err)\n      }\n    })\n    .finally(() => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n    })\n}\n\nexport { nextBuild }\n"],"names":["nextBuild","options","directory","process","on","exit","debug","experimentalDebugMemoryUsage","profile","lint","mangling","experimentalAppOnly","experimentalTurbo","experimentalBuildMode","experimentalUploadTrace","traceUploadUrl","env","NEXT_TRACE_UPLOAD_DISABLED","warn","italic","EXPERIMENTAL_DEBUG_MEMORY_USAGE","enableMemoryDebuggingMode","dir","getProjectDir","existsSync","printAndExit","TURBOPACK","build","Boolean","NEXT_DEBUG_BUILD","catch","err","disableMemoryDebuggingMode","console","error","isError","code","message","finally"],"mappings":";;;;;+BAmHSA;;;eAAAA;;;QAjHF;oBACoB;4BACJ;8DACL;qBACG;uBACQ;gEACT;+BACU;yBACY;0BACC;;;;;;AAc3C,MAAMA,YAAY,CAACC,SAA2BC;IAC5CC,QAAQC,EAAE,CAAC,WAAW,IAAMD,QAAQE,IAAI,CAAC;IACzCF,QAAQC,EAAE,CAAC,UAAU,IAAMD,QAAQE,IAAI,CAAC;IAExC,MAAM,EACJC,KAAK,EACLC,4BAA4B,EAC5BC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,mBAAmB,EACnBC,iBAAiB,EACjBC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGb;IAEJ,IAAIc;IACJ,IAAID,2BAA2B,CAACX,QAAQa,GAAG,CAACC,0BAA0B,EAAE;QACtEF,iBAAiBD;IACnB;IAEA,IAAI,CAACL,MAAM;QACTS,IAAAA,SAAI,EAAC;IACP;IAEA,IAAI,CAACR,UAAU;QACbQ,IAAAA,SAAI,EACF;IAEJ;IAEA,IAAIV,SAAS;QACXU,IAAAA,SAAI,EACF,CAAC,sBAAsB,EAAEC,IAAAA,kBAAM,EAAC,uCAAuC;IAE3E;IAEA,IAAIZ,8BAA8B;QAChCJ,QAAQa,GAAG,CAACI,+BAA+B,GAAG;QAC9CC,IAAAA,kCAAyB;IAC3B;IAEA,MAAMC,MAAMC,IAAAA,4BAAa,EAACrB;IAE1B,IAAI,CAACsB,IAAAA,cAAU,EAACF,MAAM;QACpBG,IAAAA,mBAAY,EAAC,CAAC,gDAAgD,EAAEH,KAAK;IACvE;IAEA,IAAIV,mBAAmB;QACrBT,QAAQa,GAAG,CAACU,SAAS,GAAG;IAC1B;IAEA,OAAOC,IAAAA,cAAK,EACVL,KACAd,SACAF,SAASsB,QAAQzB,QAAQa,GAAG,CAACa,gBAAgB,GAC7CpB,MACA,CAACC,UACDC,qBACA,CAAC,CAACR,QAAQa,GAAG,CAACU,SAAS,EACvBb,uBACAE,gBAECe,KAAK,CAAC,CAACC;QACN,IAAIxB,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;QACAC,QAAQC,KAAK,CAAC;QACd,IACEC,IAAAA,gBAAO,EAACJ,QACPA,CAAAA,IAAIK,IAAI,KAAK,2BACZL,IAAIK,IAAI,KAAK,oBACbL,IAAIK,IAAI,KAAK,+BACbL,IAAIK,IAAI,KAAK,uBACbL,IAAIK,IAAI,KAAK,6BACbL,IAAIK,IAAI,KAAK,8BAA6B,GAC5C;YACAX,IAAAA,mBAAY,EAAC,CAAC,EAAE,EAAEM,IAAIM,OAAO,EAAE;QACjC,OAAO;YACLJ,QAAQC,KAAK,CAAC;YACdT,IAAAA,mBAAY,EAACM;QACf;IACF,GACCO,OAAO,CAAC;QACP,IAAI/B,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;IACF;AACJ"}
+{"version":3,"sources":["../../src/cli/next-build.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport '../server/lib/cpu-profile'\nimport { existsSync } from 'fs'\nimport { italic } from '../lib/picocolors'\nimport build from '../build'\nimport { warn } from '../build/output/log'\nimport { printAndExit } from '../server/lib/utils'\nimport isError from '../lib/is-error'\nimport { getProjectDir } from '../lib/get-project-dir'\nimport { enableMemoryDebuggingMode } from '../lib/memory/startup'\nimport { disableMemoryDebuggingMode } from '../lib/memory/shutdown'\n\nexport type NextBuildOptions = {\n  debug?: boolean\n  profile?: boolean\n  lint: boolean\n  mangling: boolean\n  experimentalDebugMemoryUsage: boolean\n  experimentalAppOnly?: boolean\n  experimentalTurbo?: boolean\n  experimentalBuildMode: 'default' | 'compile' | 'generate' | 'generate-env'\n  experimentalUploadTrace?: string\n}\n\nconst nextBuild = (options: NextBuildOptions, directory?: string) => {\n  process.on('SIGTERM', () => process.exit(143))\n  process.on('SIGINT', () => process.exit(130))\n\n  const {\n    debug,\n    experimentalDebugMemoryUsage,\n    profile,\n    lint,\n    mangling,\n    experimentalAppOnly,\n    experimentalTurbo,\n    experimentalBuildMode,\n    experimentalUploadTrace,\n  } = options\n\n  let traceUploadUrl: string | undefined\n  if (experimentalUploadTrace && !process.env.NEXT_TRACE_UPLOAD_DISABLED) {\n    traceUploadUrl = experimentalUploadTrace\n  }\n\n  if (!lint) {\n    warn('Linting is disabled.')\n  }\n\n  if (!mangling) {\n    warn(\n      'Mangling is disabled. Note: This may affect performance and should only be used for debugging purposes.'\n    )\n  }\n\n  if (profile) {\n    warn(\n      `Profiling is enabled. ${italic('Note: This may affect performance.')}`\n    )\n  }\n\n  if (experimentalDebugMemoryUsage) {\n    process.env.EXPERIMENTAL_DEBUG_MEMORY_USAGE = '1'\n    enableMemoryDebuggingMode()\n  }\n\n  const dir = getProjectDir(directory)\n\n  if (!existsSync(dir)) {\n    printAndExit(`> No such directory exists as the project root: ${dir}`)\n  }\n\n  if (experimentalTurbo) {\n    process.env.TURBOPACK = '1'\n  }\n\n  return build(\n    dir,\n    profile,\n    debug || Boolean(process.env.NEXT_DEBUG_BUILD),\n    lint,\n    !mangling,\n    experimentalAppOnly,\n    !!process.env.TURBOPACK,\n    experimentalBuildMode,\n    traceUploadUrl\n  )\n    .catch((err) => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n      console.error('')\n      if (\n        isError(err) &&\n        (err.code === 'INVALID_RESOLVE_ALIAS' ||\n          err.code === 'WEBPACK_ERRORS' ||\n          err.code === 'BUILD_OPTIMIZATION_FAILED' ||\n          err.code === 'NEXT_EXPORT_ERROR' ||\n          err.code === 'NEXT_STATIC_GEN_BAILOUT' ||\n          err.code === 'EDGE_RUNTIME_UNSUPPORTED_API')\n      ) {\n        printAndExit(`> ${err.message}`)\n      } else {\n        console.error('> Build error occurred')\n        printAndExit(err)\n      }\n    })\n    .finally(() => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n    })\n}\n\nexport { nextBuild }\n"],"names":["nextBuild","options","directory","process","on","exit","debug","experimentalDebugMemoryUsage","profile","lint","mangling","experimentalAppOnly","experimentalTurbo","experimentalBuildMode","experimentalUploadTrace","traceUploadUrl","env","NEXT_TRACE_UPLOAD_DISABLED","warn","italic","EXPERIMENTAL_DEBUG_MEMORY_USAGE","enableMemoryDebuggingMode","dir","getProjectDir","existsSync","printAndExit","TURBOPACK","build","Boolean","NEXT_DEBUG_BUILD","catch","err","disableMemoryDebuggingMode","console","error","isError","code","message","finally"],"mappings":";;;;;+BAmHSA;;;eAAAA;;;QAjHF;oBACoB;4BACJ;8DACL;qBACG;uBACQ;gEACT;+BACU;yBACY;0BACC;;;;;;AAc3C,MAAMA,YAAY,CAACC,SAA2BC;IAC5CC,QAAQC,EAAE,CAAC,WAAW,IAAMD,QAAQE,IAAI,CAAC;IACzCF,QAAQC,EAAE,CAAC,UAAU,IAAMD,QAAQE,IAAI,CAAC;IAExC,MAAM,EACJC,KAAK,EACLC,4BAA4B,EAC5BC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,mBAAmB,EACnBC,iBAAiB,EACjBC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGb;IAEJ,IAAIc;IACJ,IAAID,2BAA2B,CAACX,QAAQa,GAAG,CAACC,0BAA0B,EAAE;QACtEF,iBAAiBD;IACnB;IAEA,IAAI,CAACL,MAAM;QACTS,IAAAA,SAAI,EAAC;IACP;IAEA,IAAI,CAACR,UAAU;QACbQ,IAAAA,SAAI,EACF;IAEJ;IAEA,IAAIV,SAAS;QACXU,IAAAA,SAAI,EACF,CAAC,sBAAsB,EAAEC,IAAAA,kBAAM,EAAC,uCAAuC;IAE3E;IAEA,IAAIZ,8BAA8B;QAChCJ,QAAQa,GAAG,CAACI,+BAA+B,GAAG;QAC9CC,IAAAA,kCAAyB;IAC3B;IAEA,MAAMC,MAAMC,IAAAA,4BAAa,EAACrB;IAE1B,IAAI,CAACsB,IAAAA,cAAU,EAACF,MAAM;QACpBG,IAAAA,mBAAY,EAAC,CAAC,gDAAgD,EAAEH,KAAK;IACvE;IAEA,IAAIV,mBAAmB;QACrBT,QAAQa,GAAG,CAACU,SAAS,GAAG;IAC1B;IAEA,OAAOC,IAAAA,cAAK,EACVL,KACAd,SACAF,SAASsB,QAAQzB,QAAQa,GAAG,CAACa,gBAAgB,GAC7CpB,MACA,CAACC,UACDC,qBACA,CAAC,CAACR,QAAQa,GAAG,CAACU,SAAS,EACvBb,uBACAE,gBAECe,KAAK,CAAC,CAACC;QACN,IAAIxB,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;QACAC,QAAQC,KAAK,CAAC;QACd,IACEC,IAAAA,gBAAO,EAACJ,QACPA,CAAAA,IAAIK,IAAI,KAAK,2BACZL,IAAIK,IAAI,KAAK,oBACbL,IAAIK,IAAI,KAAK,+BACbL,IAAIK,IAAI,KAAK,uBACbL,IAAIK,IAAI,KAAK,6BACbL,IAAIK,IAAI,KAAK,8BAA6B,GAC5C;YACAX,IAAAA,mBAAY,EAAC,CAAC,EAAE,EAAEM,IAAIM,OAAO,EAAE;QACjC,OAAO;YACLJ,QAAQC,KAAK,CAAC;YACdT,IAAAA,mBAAY,EAACM;QACf;IACF,GACCO,OAAO,CAAC;QACP,IAAI/B,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;IACF;AACJ"}

package/dist/client/app-bootstrap.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "appBootstrap", {
         return appBootstrap;
     }
 });
-const version = "15.3.0-canary.5";
+const version = "15.3.0-canary.8";
 window.next = {
     version,
     appDir: true

package/dist/client/app-index.js

@@ -178,6 +178,7 @@ function Root(param) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         _react.default.useEffect(()=>{
             window.__NEXT_HYDRATED = true;
+            window.__NEXT_HYDRATED_AT = performance.now();
             window.__NEXT_HYDRATED_CB == null ? void 0 : window.__NEXT_HYDRATED_CB.call(window);
         }, []);
     }

package/dist/client/app-index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-index.tsx"],"sourcesContent":["// imports polyfill from `@next/polyfill-module` after build.\nimport '../build/polyfills/polyfill-module'\n\nimport './components/globals/patch-console'\nimport './components/globals/handle-global-errors'\n\nimport ReactDOMClient from 'react-dom/client'\nimport React, { use } from 'react'\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { createFromReadableStream } from 'react-server-dom-webpack/client'\nimport { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'\nimport { onRecoverableError } from './react-client-callbacks/on-recoverable-error'\nimport {\n  onCaughtError,\n  onUncaughtError,\n} from './react-client-callbacks/error-boundary-callbacks'\nimport { callServer } from './app-call-server'\nimport { findSourceMapURL } from './app-find-source-map-url'\nimport {\n  type AppRouterActionQueue,\n  createMutableActionQueue,\n} from '../shared/lib/router/action-queue'\nimport AppRouter from './components/app-router'\nimport type { InitialRSCPayload } from '../server/app-render/types'\nimport { createInitialRouterState } from './components/router-reducer/create-initial-router-state'\nimport { MissingSlotContext } from '../shared/lib/app-router-context.shared-runtime'\nimport { setAppBuildId } from './app-build-id'\nimport { shouldRenderRootLevelErrorOverlay } from './lib/is-error-thrown-while-rendering-rsc'\n\n/// <reference types=\"react-dom/experimental\" />\n\nconst appElement: HTMLElement | Document = document\n\nconst encoder = new TextEncoder()\n\nlet initialServerDataBuffer: (string | Uint8Array)[] | undefined = undefined\nlet initialServerDataWriter: ReadableStreamDefaultController | undefined =\n  undefined\nlet initialServerDataLoaded = false\nlet initialServerDataFlushed = false\n\nlet initialFormStateData: null | any = null\n\ntype FlightSegment =\n  | [isBootStrap: 0]\n  | [isNotBootstrap: 1, responsePartial: string]\n  | [isFormState: 2, formState: any]\n  | [isBinary: 3, responseBase64Partial: string]\n\ntype NextFlight = Omit<Array<FlightSegment>, 'push'> & {\n  push: (seg: FlightSegment) => void\n}\n\ndeclare global {\n  // If you're working in a browser environment\n  interface Window {\n    __next_f: NextFlight\n  }\n}\n\nfunction nextServerDataCallback(seg: FlightSegment): void {\n  if (seg[0] === 0) {\n    initialServerDataBuffer = []\n  } else if (seg[0] === 1) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(encoder.encode(seg[1]))\n    } else {\n      initialServerDataBuffer.push(seg[1])\n    }\n  } else if (seg[0] === 2) {\n    initialFormStateData = seg[1]\n  } else if (seg[0] === 3) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    // Decode the base64 string back to binary data.\n    const binaryString = atob(seg[1])\n    const decodedChunk = new Uint8Array(binaryString.length)\n    for (var i = 0; i < binaryString.length; i++) {\n      decodedChunk[i] = binaryString.charCodeAt(i)\n    }\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(decodedChunk)\n    } else {\n      initialServerDataBuffer.push(decodedChunk)\n    }\n  }\n}\n\nfunction isStreamErrorOrUnfinished(ctr: ReadableStreamDefaultController) {\n  // If `desiredSize` is null, it means the stream is closed or errored. If it is lower than 0, the stream is still unfinished.\n  return ctr.desiredSize === null || ctr.desiredSize < 0\n}\n\n// There might be race conditions between `nextServerDataRegisterWriter` and\n// `DOMContentLoaded`. The former will be called when React starts to hydrate\n// the root, the latter will be called when the DOM is fully loaded.\n// For streaming, the former is called first due to partial hydration.\n// For non-streaming, the latter can be called first.\n// Hence, we use two variables `initialServerDataLoaded` and\n// `initialServerDataFlushed` to make sure the writer will be closed and\n// `initialServerDataBuffer` will be cleared in the right time.\nfunction nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {\n  if (initialServerDataBuffer) {\n    initialServerDataBuffer.forEach((val) => {\n      ctr.enqueue(typeof val === 'string' ? encoder.encode(val) : val)\n    })\n    if (initialServerDataLoaded && !initialServerDataFlushed) {\n      if (isStreamErrorOrUnfinished(ctr)) {\n        ctr.error(\n          new Error(\n            'The connection to the page was unexpectedly closed, possibly due to the stop button being clicked, loss of Wi-Fi, or an unstable internet connection.'\n          )\n        )\n      } else {\n        ctr.close()\n      }\n      initialServerDataFlushed = true\n      initialServerDataBuffer = undefined\n    }\n  }\n\n  initialServerDataWriter = ctr\n}\n\n// When `DOMContentLoaded`, we can close all pending writers to finish hydration.\nconst DOMContentLoaded = function () {\n  if (initialServerDataWriter && !initialServerDataFlushed) {\n    initialServerDataWriter.close()\n    initialServerDataFlushed = true\n    initialServerDataBuffer = undefined\n  }\n  initialServerDataLoaded = true\n}\n\n// It's possible that the DOM is already loaded.\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', DOMContentLoaded, false)\n} else {\n  // Delayed in marco task to ensure it's executed later than hydration\n  setTimeout(DOMContentLoaded)\n}\n\nconst nextServerDataLoadingGlobal = (self.__next_f = self.__next_f || [])\nnextServerDataLoadingGlobal.forEach(nextServerDataCallback)\nnextServerDataLoadingGlobal.push = nextServerDataCallback\n\nconst readable = new ReadableStream({\n  start(controller) {\n    nextServerDataRegisterWriter(controller)\n  },\n})\n\nconst initialServerResponse = createFromReadableStream<InitialRSCPayload>(\n  readable,\n  { callServer, findSourceMapURL }\n)\n\n// React overrides `.then` and doesn't return a new promise chain,\n// so we wrap the action queue in a promise to ensure that its value\n// is defined when the promise resolves.\n// https://github.com/facebook/react/blob/163365a07872337e04826c4f501565d43dbd2fd4/packages/react-client/src/ReactFlightClient.js#L189-L190\nconst pendingActionQueue: Promise<AppRouterActionQueue> = new Promise(\n  (resolve, reject) => {\n    initialServerResponse.then(\n      (initialRSCPayload) => {\n        // setAppBuildId should be called only once, during JS initialization\n        // and before any components have hydrated.\n        setAppBuildId(initialRSCPayload.b)\n\n        resolve(\n          createMutableActionQueue(\n            createInitialRouterState({\n              initialFlightData: initialRSCPayload.f,\n              initialCanonicalUrlParts: initialRSCPayload.c,\n              initialParallelRoutes: new Map(),\n              location: window.location,\n              couldBeIntercepted: initialRSCPayload.i,\n              postponed: initialRSCPayload.s,\n              prerendered: initialRSCPayload.S,\n            })\n          )\n        )\n      },\n      (err: Error) => reject(err)\n    )\n  }\n)\n\nfunction ServerRoot(): React.ReactNode {\n  const initialRSCPayload = use(initialServerResponse)\n  const actionQueue = use<AppRouterActionQueue>(pendingActionQueue)\n\n  const router = (\n    <AppRouter\n      actionQueue={actionQueue}\n      globalErrorComponentAndStyles={initialRSCPayload.G}\n      assetPrefix={initialRSCPayload.p}\n    />\n  )\n\n  if (process.env.NODE_ENV === 'development' && initialRSCPayload.m) {\n    // We provide missing slot information in a context provider only during development\n    // as we log some additional information about the missing slots in the console.\n    return (\n      <MissingSlotContext value={initialRSCPayload.m}>\n        {router}\n      </MissingSlotContext>\n    )\n  }\n\n  return router\n}\n\nconst StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP\n  ? React.StrictMode\n  : React.Fragment\n\nfunction Root({ children }: React.PropsWithChildren<{}>) {\n  if (process.env.__NEXT_TEST_MODE) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      window.__NEXT_HYDRATED = true\n      window.__NEXT_HYDRATED_CB?.()\n    }, [])\n  }\n\n  return children\n}\n\nconst reactRootOptions: ReactDOMClient.RootOptions = {\n  onRecoverableError,\n  onCaughtError,\n  onUncaughtError,\n}\n\nexport function hydrate() {\n  const reactEl = (\n    <StrictModeIfEnabled>\n      <HeadManagerContext.Provider value={{ appDir: true }}>\n        <Root>\n          <ServerRoot />\n        </Root>\n      </HeadManagerContext.Provider>\n    </StrictModeIfEnabled>\n  )\n\n  if (\n    document.documentElement.id === '__next_error__' ||\n    !!window.__next_root_layout_missing_tags?.length\n  ) {\n    let element = reactEl\n    // Server rendering failed, fall back to client-side rendering\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      shouldRenderRootLevelErrorOverlay()\n    ) {\n      const { createRootLevelDevOverlayElement } =\n        require('./components/react-dev-overlay/app/client-entry') as typeof import('./components/react-dev-overlay/app/client-entry')\n\n      // Note this won't cause hydration mismatch because we are doing CSR w/o hydration\n      element = createRootLevelDevOverlayElement(element)\n    }\n\n    ReactDOMClient.createRoot(appElement, reactRootOptions).render(element)\n  } else {\n    React.startTransition(() => {\n      ReactDOMClient.hydrateRoot(appElement, reactEl, {\n        ...reactRootOptions,\n        formState: initialFormStateData,\n      })\n    })\n  }\n\n  // TODO-APP: Remove this logic when Float has GC built-in in development.\n  if (process.env.NODE_ENV !== 'production') {\n    const { linkGc } =\n      require('./app-link-gc') as typeof import('./app-link-gc')\n    linkGc()\n  }\n}\n"],"names":["hydrate","appElement","document","encoder","TextEncoder","initialServerDataBuffer","undefined","initialServerDataWriter","initialServerDataLoaded","initialServerDataFlushed","initialFormStateData","nextServerDataCallback","seg","Error","enqueue","encode","push","binaryString","atob","decodedChunk","Uint8Array","length","i","charCodeAt","isStreamErrorOrUnfinished","ctr","desiredSize","nextServerDataRegisterWriter","forEach","val","error","close","DOMContentLoaded","readyState","addEventListener","setTimeout","nextServerDataLoadingGlobal","self","__next_f","readable","ReadableStream","start","controller","initialServerResponse","createFromReadableStream","callServer","findSourceMapURL","pendingActionQueue","Promise","resolve","reject","then","initialRSCPayload","setAppBuildId","b","createMutableActionQueue","createInitialRouterState","initialFlightData","f","initialCanonicalUrlParts","c","initialParallelRoutes","Map","location","window","couldBeIntercepted","postponed","s","prerendered","S","err","ServerRoot","use","actionQueue","router","AppRouter","globalErrorComponentAndStyles","G","assetPrefix","p","process","env","NODE_ENV","m","MissingSlotContext","value","StrictModeIfEnabled","__NEXT_STRICT_MODE_APP","React","StrictMode","Fragment","Root","children","__NEXT_TEST_MODE","useEffect","__NEXT_HYDRATED","__NEXT_HYDRATED_CB","reactRootOptions","onRecoverableError","onCaughtError","onUncaughtError","reactEl","HeadManagerContext","Provider","appDir","documentElement","id","__next_root_layout_missing_tags","element","shouldRenderRootLevelErrorOverlay","createRootLevelDevOverlayElement","require","ReactDOMClient","createRoot","render","startTransition","hydrateRoot","formState","linkGc"],"mappings":"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"}
+{"version":3,"sources":["../../src/client/app-index.tsx"],"sourcesContent":["// imports polyfill from `@next/polyfill-module` after build.\nimport '../build/polyfills/polyfill-module'\n\nimport './components/globals/patch-console'\nimport './components/globals/handle-global-errors'\n\nimport ReactDOMClient from 'react-dom/client'\nimport React, { use } from 'react'\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { createFromReadableStream } from 'react-server-dom-webpack/client'\nimport { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'\nimport { onRecoverableError } from './react-client-callbacks/on-recoverable-error'\nimport {\n  onCaughtError,\n  onUncaughtError,\n} from './react-client-callbacks/error-boundary-callbacks'\nimport { callServer } from './app-call-server'\nimport { findSourceMapURL } from './app-find-source-map-url'\nimport {\n  type AppRouterActionQueue,\n  createMutableActionQueue,\n} from '../shared/lib/router/action-queue'\nimport AppRouter from './components/app-router'\nimport type { InitialRSCPayload } from '../server/app-render/types'\nimport { createInitialRouterState } from './components/router-reducer/create-initial-router-state'\nimport { MissingSlotContext } from '../shared/lib/app-router-context.shared-runtime'\nimport { setAppBuildId } from './app-build-id'\nimport { shouldRenderRootLevelErrorOverlay } from './lib/is-error-thrown-while-rendering-rsc'\n\n/// <reference types=\"react-dom/experimental\" />\n\nconst appElement: HTMLElement | Document = document\n\nconst encoder = new TextEncoder()\n\nlet initialServerDataBuffer: (string | Uint8Array)[] | undefined = undefined\nlet initialServerDataWriter: ReadableStreamDefaultController | undefined =\n  undefined\nlet initialServerDataLoaded = false\nlet initialServerDataFlushed = false\n\nlet initialFormStateData: null | any = null\n\ntype FlightSegment =\n  | [isBootStrap: 0]\n  | [isNotBootstrap: 1, responsePartial: string]\n  | [isFormState: 2, formState: any]\n  | [isBinary: 3, responseBase64Partial: string]\n\ntype NextFlight = Omit<Array<FlightSegment>, 'push'> & {\n  push: (seg: FlightSegment) => void\n}\n\ndeclare global {\n  // If you're working in a browser environment\n  interface Window {\n    __next_f: NextFlight\n  }\n}\n\nfunction nextServerDataCallback(seg: FlightSegment): void {\n  if (seg[0] === 0) {\n    initialServerDataBuffer = []\n  } else if (seg[0] === 1) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(encoder.encode(seg[1]))\n    } else {\n      initialServerDataBuffer.push(seg[1])\n    }\n  } else if (seg[0] === 2) {\n    initialFormStateData = seg[1]\n  } else if (seg[0] === 3) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    // Decode the base64 string back to binary data.\n    const binaryString = atob(seg[1])\n    const decodedChunk = new Uint8Array(binaryString.length)\n    for (var i = 0; i < binaryString.length; i++) {\n      decodedChunk[i] = binaryString.charCodeAt(i)\n    }\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(decodedChunk)\n    } else {\n      initialServerDataBuffer.push(decodedChunk)\n    }\n  }\n}\n\nfunction isStreamErrorOrUnfinished(ctr: ReadableStreamDefaultController) {\n  // If `desiredSize` is null, it means the stream is closed or errored. If it is lower than 0, the stream is still unfinished.\n  return ctr.desiredSize === null || ctr.desiredSize < 0\n}\n\n// There might be race conditions between `nextServerDataRegisterWriter` and\n// `DOMContentLoaded`. The former will be called when React starts to hydrate\n// the root, the latter will be called when the DOM is fully loaded.\n// For streaming, the former is called first due to partial hydration.\n// For non-streaming, the latter can be called first.\n// Hence, we use two variables `initialServerDataLoaded` and\n// `initialServerDataFlushed` to make sure the writer will be closed and\n// `initialServerDataBuffer` will be cleared in the right time.\nfunction nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {\n  if (initialServerDataBuffer) {\n    initialServerDataBuffer.forEach((val) => {\n      ctr.enqueue(typeof val === 'string' ? encoder.encode(val) : val)\n    })\n    if (initialServerDataLoaded && !initialServerDataFlushed) {\n      if (isStreamErrorOrUnfinished(ctr)) {\n        ctr.error(\n          new Error(\n            'The connection to the page was unexpectedly closed, possibly due to the stop button being clicked, loss of Wi-Fi, or an unstable internet connection.'\n          )\n        )\n      } else {\n        ctr.close()\n      }\n      initialServerDataFlushed = true\n      initialServerDataBuffer = undefined\n    }\n  }\n\n  initialServerDataWriter = ctr\n}\n\n// When `DOMContentLoaded`, we can close all pending writers to finish hydration.\nconst DOMContentLoaded = function () {\n  if (initialServerDataWriter && !initialServerDataFlushed) {\n    initialServerDataWriter.close()\n    initialServerDataFlushed = true\n    initialServerDataBuffer = undefined\n  }\n  initialServerDataLoaded = true\n}\n\n// It's possible that the DOM is already loaded.\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', DOMContentLoaded, false)\n} else {\n  // Delayed in marco task to ensure it's executed later than hydration\n  setTimeout(DOMContentLoaded)\n}\n\nconst nextServerDataLoadingGlobal = (self.__next_f = self.__next_f || [])\nnextServerDataLoadingGlobal.forEach(nextServerDataCallback)\nnextServerDataLoadingGlobal.push = nextServerDataCallback\n\nconst readable = new ReadableStream({\n  start(controller) {\n    nextServerDataRegisterWriter(controller)\n  },\n})\n\nconst initialServerResponse = createFromReadableStream<InitialRSCPayload>(\n  readable,\n  { callServer, findSourceMapURL }\n)\n\n// React overrides `.then` and doesn't return a new promise chain,\n// so we wrap the action queue in a promise to ensure that its value\n// is defined when the promise resolves.\n// https://github.com/facebook/react/blob/163365a07872337e04826c4f501565d43dbd2fd4/packages/react-client/src/ReactFlightClient.js#L189-L190\nconst pendingActionQueue: Promise<AppRouterActionQueue> = new Promise(\n  (resolve, reject) => {\n    initialServerResponse.then(\n      (initialRSCPayload) => {\n        // setAppBuildId should be called only once, during JS initialization\n        // and before any components have hydrated.\n        setAppBuildId(initialRSCPayload.b)\n\n        resolve(\n          createMutableActionQueue(\n            createInitialRouterState({\n              initialFlightData: initialRSCPayload.f,\n              initialCanonicalUrlParts: initialRSCPayload.c,\n              initialParallelRoutes: new Map(),\n              location: window.location,\n              couldBeIntercepted: initialRSCPayload.i,\n              postponed: initialRSCPayload.s,\n              prerendered: initialRSCPayload.S,\n            })\n          )\n        )\n      },\n      (err: Error) => reject(err)\n    )\n  }\n)\n\nfunction ServerRoot(): React.ReactNode {\n  const initialRSCPayload = use(initialServerResponse)\n  const actionQueue = use<AppRouterActionQueue>(pendingActionQueue)\n\n  const router = (\n    <AppRouter\n      actionQueue={actionQueue}\n      globalErrorComponentAndStyles={initialRSCPayload.G}\n      assetPrefix={initialRSCPayload.p}\n    />\n  )\n\n  if (process.env.NODE_ENV === 'development' && initialRSCPayload.m) {\n    // We provide missing slot information in a context provider only during development\n    // as we log some additional information about the missing slots in the console.\n    return (\n      <MissingSlotContext value={initialRSCPayload.m}>\n        {router}\n      </MissingSlotContext>\n    )\n  }\n\n  return router\n}\n\nconst StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP\n  ? React.StrictMode\n  : React.Fragment\n\nfunction Root({ children }: React.PropsWithChildren<{}>) {\n  if (process.env.__NEXT_TEST_MODE) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      window.__NEXT_HYDRATED = true\n      window.__NEXT_HYDRATED_AT = performance.now()\n      window.__NEXT_HYDRATED_CB?.()\n    }, [])\n  }\n\n  return children\n}\n\nconst reactRootOptions: ReactDOMClient.RootOptions = {\n  onRecoverableError,\n  onCaughtError,\n  onUncaughtError,\n}\n\nexport function hydrate() {\n  const reactEl = (\n    <StrictModeIfEnabled>\n      <HeadManagerContext.Provider value={{ appDir: true }}>\n        <Root>\n          <ServerRoot />\n        </Root>\n      </HeadManagerContext.Provider>\n    </StrictModeIfEnabled>\n  )\n\n  if (\n    document.documentElement.id === '__next_error__' ||\n    !!window.__next_root_layout_missing_tags?.length\n  ) {\n    let element = reactEl\n    // Server rendering failed, fall back to client-side rendering\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      shouldRenderRootLevelErrorOverlay()\n    ) {\n      const { createRootLevelDevOverlayElement } =\n        require('./components/react-dev-overlay/app/client-entry') as typeof import('./components/react-dev-overlay/app/client-entry')\n\n      // Note this won't cause hydration mismatch because we are doing CSR w/o hydration\n      element = createRootLevelDevOverlayElement(element)\n    }\n\n    ReactDOMClient.createRoot(appElement, reactRootOptions).render(element)\n  } else {\n    React.startTransition(() => {\n      ReactDOMClient.hydrateRoot(appElement, reactEl, {\n        ...reactRootOptions,\n        formState: initialFormStateData,\n      })\n    })\n  }\n\n  // TODO-APP: Remove this logic when Float has GC built-in in development.\n  if (process.env.NODE_ENV !== 'production') {\n    const { linkGc } =\n      require('./app-link-gc') as typeof import('./app-link-gc')\n    linkGc()\n  }\n}\n"],"names":["hydrate","appElement","document","encoder","TextEncoder","initialServerDataBuffer","undefined","initialServerDataWriter","initialServerDataLoaded","initialServerDataFlushed","initialFormStateData","nextServerDataCallback","seg","Error","enqueue","encode","push","binaryString","atob","decodedChunk","Uint8Array","length","i","charCodeAt","isStreamErrorOrUnfinished","ctr","desiredSize","nextServerDataRegisterWriter","forEach","val","error","close","DOMContentLoaded","readyState","addEventListener","setTimeout","nextServerDataLoadingGlobal","self","__next_f","readable","ReadableStream","start","controller","initialServerResponse","createFromReadableStream","callServer","findSourceMapURL","pendingActionQueue","Promise","resolve","reject","then","initialRSCPayload","setAppBuildId","b","createMutableActionQueue","createInitialRouterState","initialFlightData","f","initialCanonicalUrlParts","c","initialParallelRoutes","Map","location","window","couldBeIntercepted","postponed","s","prerendered","S","err","ServerRoot","use","actionQueue","router","AppRouter","globalErrorComponentAndStyles","G","assetPrefix","p","process","env","NODE_ENV","m","MissingSlotContext","value","StrictModeIfEnabled","__NEXT_STRICT_MODE_APP","React","StrictMode","Fragment","Root","children","__NEXT_TEST_MODE","useEffect","__NEXT_HYDRATED","__NEXT_HYDRATED_AT","performance","now","__NEXT_HYDRATED_CB","reactRootOptions","onRecoverableError","onCaughtError","onUncaughtError","reactEl","HeadManagerContext","Provider","appDir","documentElement","id","__next_root_layout_missing_tags","element","shouldRenderRootLevelErrorOverlay","createRootLevelDevOverlayElement","require","ReactDOMClient","createRoot","render","startTransition","hydrateRoot","formState","linkGc"],"mappings":"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"}

package/dist/client/app-next-dev.d.ts

@@ -1 +1,2 @@
 import './app-webpack';
+import '../lib/require-instrumentation-client';

package/dist/client/app-next-dev.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 require("./app-webpack");
+require("../lib/require-instrumentation-client");
 const _appbootstrap = require("./app-bootstrap");
 const _initializeforapprouter = require("./dev/dev-build-indicator/initialize-for-app-router");
 (0, _appbootstrap.appBootstrap)(()=>{

package/dist/client/app-next-dev.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-next-dev.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport './app-webpack'\nimport { appBootstrap } from './app-bootstrap'\nimport { initializeDevBuildIndicatorForAppRouter } from './dev/dev-build-indicator/initialize-for-app-router'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n  initializeDevBuildIndicatorForAppRouter()\n})\n"],"names":["appBootstrap","hydrate","require","initializeDevBuildIndicatorForAppRouter"],"mappings":"AAAA,8BAA8B;;;;;QAEvB;8BACsB;wCAC2B;AAExDA,IAAAA,0BAAY,EAAC;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IACAE,IAAAA,+DAAuC;AACzC"}
+{"version":3,"sources":["../../src/client/app-next-dev.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport './app-webpack'\nimport '../lib/require-instrumentation-client'\nimport { appBootstrap } from './app-bootstrap'\nimport { initializeDevBuildIndicatorForAppRouter } from './dev/dev-build-indicator/initialize-for-app-router'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n  initializeDevBuildIndicatorForAppRouter()\n})\n"],"names":["appBootstrap","hydrate","require","initializeDevBuildIndicatorForAppRouter"],"mappings":"AAAA,8BAA8B;;;;;QAEvB;QACA;8BACsB;wCAC2B;AAExDA,IAAAA,0BAAY,EAAC;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IACAE,IAAAA,+DAAuC;AACzC"}

package/dist/client/app-next-turbopack.d.ts

@@ -1 +1 @@
-export {};
+import '../lib/require-instrumentation-client';

package/dist/client/app-next-turbopack.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+require("../lib/require-instrumentation-client");
 const _appbootstrap = require("./app-bootstrap");
 window.next.version += '-turbo';
 self.__webpack_hash__ = '';

package/dist/client/app-next-turbopack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-next-turbopack.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport { appBootstrap } from './app-bootstrap'\n\nwindow.next.version += '-turbo'\n;(self as any).__webpack_hash__ = ''\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n\n  if (process.env.NODE_ENV !== 'production') {\n    const { initializeDevBuildIndicatorForAppRouter } =\n      require('./dev/dev-build-indicator/initialize-for-app-router') as typeof import('./dev/dev-build-indicator/initialize-for-app-router')\n    initializeDevBuildIndicatorForAppRouter()\n  }\n})\n"],"names":["window","next","version","self","__webpack_hash__","appBootstrap","hydrate","require","process","env","NODE_ENV","initializeDevBuildIndicatorForAppRouter"],"mappings":"AAAA,8BAA8B;;;;;8BAED;AAE7BA,OAAOC,IAAI,CAACC,OAAO,IAAI;AACrBC,KAAaC,gBAAgB,GAAG;AAElCC,IAAAA,0BAAY,EAAC;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IAEA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAM,EAAEC,uCAAuC,EAAE,GAC/CJ,QAAQ;QACVI;IACF;AACF"}
+{"version":3,"sources":["../../src/client/app-next-turbopack.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport '../lib/require-instrumentation-client'\nimport { appBootstrap } from './app-bootstrap'\n\nwindow.next.version += '-turbo'\n;(self as any).__webpack_hash__ = ''\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n\n  if (process.env.NODE_ENV !== 'production') {\n    const { initializeDevBuildIndicatorForAppRouter } =\n      require('./dev/dev-build-indicator/initialize-for-app-router') as typeof import('./dev/dev-build-indicator/initialize-for-app-router')\n    initializeDevBuildIndicatorForAppRouter()\n  }\n})\n"],"names":["window","next","version","self","__webpack_hash__","appBootstrap","hydrate","require","process","env","NODE_ENV","initializeDevBuildIndicatorForAppRouter"],"mappings":"AAAA,8BAA8B;;;;;QAEvB;8BACsB;AAE7BA,OAAOC,IAAI,CAACC,OAAO,IAAI;AACrBC,KAAaC,gBAAgB,GAAG;AAElCC,IAAAA,0BAAY,EAAC;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IAEA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAM,EAAEC,uCAAuC,EAAE,GAC/CJ,QAAQ;QACVI;IACF;AACF"}

package/dist/client/app-next.d.ts

@@ -1 +1,2 @@
 import './app-webpack';
+import '../lib/require-instrumentation-client';

package/dist/client/app-next.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 require("./app-webpack");
+require("../lib/require-instrumentation-client");
 const _appbootstrap = require("./app-bootstrap");
 (0, _appbootstrap.appBootstrap)(()=>{
     const { hydrate } = require('./app-index');

package/dist/client/app-next.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-next.ts"],"sourcesContent":["// This import must go first because it needs to patch webpack chunk loading\n// before React patches chunk loading.\nimport './app-webpack'\nimport { appBootstrap } from './app-bootstrap'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  // Include app-router and layout-router in the main chunk\n  require('next/dist/client/components/app-router')\n  require('next/dist/client/components/layout-router')\n  hydrate()\n})\n"],"names":["appBootstrap","hydrate","require"],"mappings":"AAAA,4EAA4E;AAC5E,sCAAsC;;;;;QAC/B;8BACsB;AAE7BA,IAAAA,0BAAY,EAAC;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5B,yDAAyD;IACzDA,QAAQ;IACRA,QAAQ;IACRD;AACF"}
+{"version":3,"sources":["../../src/client/app-next.ts"],"sourcesContent":["// This import must go first because it needs to patch webpack chunk loading\n// before React patches chunk loading.\nimport './app-webpack'\nimport '../lib/require-instrumentation-client'\nimport { appBootstrap } from './app-bootstrap'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  // Include app-router and layout-router in the main chunk\n  require('next/dist/client/components/app-router')\n  require('next/dist/client/components/layout-router')\n  hydrate()\n})\n"],"names":["appBootstrap","hydrate","require"],"mappings":"AAAA,4EAA4E;AAC5E,sCAAsC;;;;;QAC/B;QACA;8BACsB;AAE7BA,IAAAA,0BAAY,EAAC;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5B,yDAAyD;IACzDA,QAAQ;IACRA,QAAQ;IACRD;AACF"}

package/dist/client/components/react-dev-overlay/ui/components/code-frame/code-frame.d.ts

@@ -4,4 +4,4 @@ export type CodeFrameProps = {
     codeFrame: string;
 };
 export declare function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps): import("react/jsx-runtime").JSX.Element;
-export declare const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--size-16);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";
+export declare const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    --code-frame-padding: 12px;\n    --code-frame-line-height: var(--size-16);\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--code-frame-line-height);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: var(--code-frame-padding);\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"] {\n    position: relative;\n\n    > span { \n      position: relative;\n      z-index: 1;\n    }\n\n    &::after {\n      content: \"\";\n      width: calc(100% + var(--code-frame-padding) * 2);\n      height: var(--code-frame-line-height);\n      left: calc(-1 * var(--code-frame-padding));\n      background: var(--color-red-200);\n      box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n      position: absolute;\n    }\n  }\n\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/code-frame/code-frame.js

@@ -20,40 +20,21 @@ _export(exports, {
         return CodeFrame;
     }
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _jsxruntime = require("react/jsx-runtime");
-const _anser = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/anser"));
-const _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
 const _react = require("react");
 const _hotlinkedtext = require("../hot-linked-text");
 const _stackframe = require("../../../utils/stack-frame");
 const _useopenineditor = require("../../utils/use-open-in-editor");
 const _external = require("../../icons/external");
 const _file = require("../../icons/file");
+const _parsecodeframe = require("./parse-code-frame");
 function CodeFrame(param) {
     let { stackFrame, codeFrame } = param;
     var _stackFrame_file;
-    // Strip leading spaces out of the code frame:
-    const formattedFrame = (0, _react.useMemo)(()=>{
-        const lines = codeFrame.split(/\r?\n/g);
-        // Find the minimum length of leading spaces after `|` in the code frame
-        const miniLeadingSpacesLength = lines.map((line)=>/^>? +\d+ +\| [ ]+/.exec((0, _stripansi.default)(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec((0, _stripansi.default)(line))).filter(Boolean).map((v)=>v.pop()).reduce((c, n)=>isNaN(c) ? n.length : Math.min(c, n.length), NaN);
-        // When the minimum length of leading spaces is greater than 1, remove them
-        // from the code frame to help the indentation looks better when there's a lot leading spaces.
-        if (miniLeadingSpacesLength > 1) {
-            return lines.map((line, a)=>~(a = line.indexOf('|')) ? line.substring(0, a) + line.substring(a).replace("^\\ {" + miniLeadingSpacesLength + "}", '') : line).join('\n');
-        }
-        return lines.join('\n');
-    }, [
+    const formattedFrame = (0, _react.useMemo)(()=>(0, _parsecodeframe.formatCodeFrame)(codeFrame), [
         codeFrame
     ]);
-    const decoded = (0, _react.useMemo)(()=>{
-        return _anser.default.ansiToJson(formattedFrame, {
-            json: true,
-            use_classes: true,
-            remove_empty: true
-        });
-    }, [
+    const decodedLines = (0, _react.useMemo)(()=>(0, _parsecodeframe.groupCodeFrameLines)(formattedFrame), [
         formattedFrame
     ]);
     const open = (0, _useopenineditor.useOpenInEditor)({
@@ -106,24 +87,37 @@ function CodeFrame(param) {
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
                 className: "code-frame-pre",
-                children: decoded.map((entry, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        style: {
-                            color: entry.fg ? "var(--color-" + entry.fg + ")" : undefined,
-                            ...entry.decoration === 'bold' ? // having longer width than expected on Geist Mono font-weight
-                            // above 600, hence a temporary fix is to use 500 for bold.
-                            {
-                                fontWeight: 500
-                            } : entry.decoration === 'italic' ? {
-                                fontStyle: 'italic'
-                            } : undefined
-                        },
-                        children: entry.content
-                    }, "frame-" + index))
+                children: decodedLines.map((line, lineIndex)=>{
+                    const { lineNumber, isErroredLine } = (0, _parsecodeframe.parseLineNumberFromCodeFrameLine)(line, stackFrame);
+                    const lineNumberProps = {};
+                    if (lineNumber) {
+                        lineNumberProps['data-nextjs-codeframe-line'] = lineNumber;
+                    }
+                    if (isErroredLine) {
+                        lineNumberProps['data-nextjs-codeframe-line--errored'] = true;
+                    }
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        ...lineNumberProps,
+                        children: line.map((entry, entryIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                style: {
+                                    color: entry.fg ? "var(--color-" + entry.fg + ")" : undefined,
+                                    ...entry.decoration === 'bold' ? // having longer width than expected on Geist Mono font-weight
+                                    // above 600, hence a temporary fix is to use 500 for bold.
+                                    {
+                                        fontWeight: 500
+                                    } : entry.decoration === 'italic' ? {
+                                        fontStyle: 'italic'
+                                    } : undefined
+                                },
+                                children: entry.content
+                            }, "frame-" + entryIndex))
+                    }, "line-" + lineIndex);
+                })
             })
         ]
     });
 }
-const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--size-16);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";
+const CODE_FRAME_STYLES = '\n  [data-nextjs-codeframe] {\n    --code-frame-padding: 12px;\n    --code-frame-line-height: var(--size-16);\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--code-frame-line-height);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: var(--code-frame-padding);\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored="true"] {\n    position: relative;\n\n    > span { \n      position: relative;\n      z-index: 1;\n    }\n\n    &::after {\n      content: "";\n      width: calc(100% + var(--code-frame-padding) * 2);\n      height: var(--code-frame-line-height);\n      left: calc(-1 * var(--code-frame-padding));\n      background: var(--color-red-200);\n      box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n      position: absolute;\n    }\n  }\n\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon=\'right\'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n';
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/code-frame/code-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\n\nimport Anser from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n  // Strip leading spaces out of the code frame:\n  const formattedFrame = useMemo<string>(() => {\n    const lines = codeFrame.split(/\\r?\\n/g)\n\n    // Find the minimum length of leading spaces after `|` in the code frame\n    const miniLeadingSpacesLength = lines\n      .map((line) =>\n        /^>? +\\d+ +\\| [ ]+/.exec(stripAnsi(line)) === null\n          ? null\n          : /^>? +\\d+ +\\| ( *)/.exec(stripAnsi(line))\n      )\n      .filter(Boolean)\n      .map((v) => v!.pop()!)\n      .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n    // When the minimum length of leading spaces is greater than 1, remove them\n    // from the code frame to help the indentation looks better when there's a lot leading spaces.\n    if (miniLeadingSpacesLength > 1) {\n      return lines\n        .map((line, a) =>\n          ~(a = line.indexOf('|'))\n            ? line.substring(0, a) +\n              line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n            : line\n        )\n        .join('\\n')\n    }\n    return lines.join('\\n')\n  }, [codeFrame])\n\n  const decoded = useMemo(() => {\n    return Anser.ansiToJson(formattedFrame, {\n      json: true,\n      use_classes: true,\n      remove_empty: true,\n    })\n  }, [formattedFrame])\n\n  const open = useOpenInEditor({\n    file: stackFrame.file,\n    lineNumber: stackFrame.lineNumber,\n    column: stackFrame.column,\n  })\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  // TODO: make the caret absolute\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        {/* TODO: This is <div> in `Terminal` component.\n        Changing now will require multiple test snapshots updates.\n        Leaving as <div> as is trivial and does not affect the UI.\n        Change when the new redbox matcher `toDisplayRedbox` is used.\n        */}\n        <p className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {getFrameSource(stackFrame)} @{' '}\n            <HotlinkedText text={stackFrame.methodName} />\n          </span>\n          <button\n            aria-label=\"Open in editor\"\n            data-with-open-in-editor-link-source-file\n            onClick={open}\n          >\n            <span className=\"code-frame-icon\" data-icon=\"right\">\n              <ExternalIcon width={16} height={16} />\n            </span>\n          </button>\n        </p>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decoded.map((entry, index) => (\n          <span\n            key={`frame-${index}`}\n            style={{\n              color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n              ...(entry.decoration === 'bold'\n                ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n                  // having longer width than expected on Geist Mono font-weight\n                  // above 600, hence a temporary fix is to use 500 for bold.\n                  { fontWeight: 500 }\n                : entry.decoration === 'italic'\n                  ? { fontStyle: 'italic' }\n                  : undefined),\n            }}\n          >\n            {entry.content}\n          </span>\n        ))}\n      </pre>\n    </div>\n  )\n}\n\nexport const CODE_FRAME_STYLES = `\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--size-16);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","className","p","span","FileIcon","lang","data-text","getFrameSource","HotlinkedText","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\nimport {\n  formatCodeFrame,\n  groupCodeFrameLines,\n  parseLineNumberFromCodeFrameLine,\n} from './parse-code-frame'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n  const formattedFrame = useMemo<string>(\n    () => formatCodeFrame(codeFrame),\n    [codeFrame]\n  )\n  const decodedLines = useMemo(\n    () => groupCodeFrameLines(formattedFrame),\n    [formattedFrame]\n  )\n\n  const open = useOpenInEditor({\n    file: stackFrame.file,\n    lineNumber: stackFrame.lineNumber,\n    column: stackFrame.column,\n  })\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  // TODO: make the caret absolute\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        {/* TODO: This is <div> in `Terminal` component.\n        Changing now will require multiple test snapshots updates.\n        Leaving as <div> as is trivial and does not affect the UI.\n        Change when the new redbox matcher `toDisplayRedbox` is used.\n        */}\n        <p className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {getFrameSource(stackFrame)} @{' '}\n            <HotlinkedText text={stackFrame.methodName} />\n          </span>\n          <button\n            aria-label=\"Open in editor\"\n            data-with-open-in-editor-link-source-file\n            onClick={open}\n          >\n            <span className=\"code-frame-icon\" data-icon=\"right\">\n              <ExternalIcon width={16} height={16} />\n            </span>\n          </button>\n        </p>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decodedLines.map((line, lineIndex) => {\n          const { lineNumber, isErroredLine } =\n            parseLineNumberFromCodeFrameLine(line, stackFrame)\n\n          const lineNumberProps: Record<string, string | boolean> = {}\n          if (lineNumber) {\n            lineNumberProps['data-nextjs-codeframe-line'] = lineNumber\n          }\n          if (isErroredLine) {\n            lineNumberProps['data-nextjs-codeframe-line--errored'] = true\n          }\n\n          return (\n            <div key={`line-${lineIndex}`} {...lineNumberProps}>\n              {line.map((entry, entryIndex) => (\n                <span\n                  key={`frame-${entryIndex}`}\n                  style={{\n                    color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n                    ...(entry.decoration === 'bold'\n                      ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n                        // having longer width than expected on Geist Mono font-weight\n                        // above 600, hence a temporary fix is to use 500 for bold.\n                        { fontWeight: 500 }\n                      : entry.decoration === 'italic'\n                        ? { fontStyle: 'italic' }\n                        : undefined),\n                  }}\n                >\n                  {entry.content}\n                </span>\n              ))}\n            </div>\n          )\n        })}\n      </pre>\n    </div>\n  )\n}\n\nexport const CODE_FRAME_STYLES = `\n  [data-nextjs-codeframe] {\n    --code-frame-padding: 12px;\n    --code-frame-line-height: var(--size-16);\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--code-frame-line-height);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: var(--code-frame-padding);\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"] {\n    position: relative;\n\n    > span { \n      position: relative;\n      z-index: 1;\n    }\n\n    &::after {\n      content: \"\";\n      width: calc(100% + var(--code-frame-padding) * 2);\n      height: var(--code-frame-line-height);\n      left: calc(-1 * var(--code-frame-padding));\n      background: var(--color-red-200);\n      box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n      position: absolute;\n    }\n  }\n\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","formatCodeFrame","decodedLines","groupCodeFrameLines","open","useOpenInEditor","file","lineNumber","column","fileExtension","split","pop","div","data-nextjs-codeframe","className","p","span","FileIcon","lang","data-text","getFrameSource","HotlinkedText","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","map","line","lineIndex","isErroredLine","parseLineNumberFromCodeFrameLine","lineNumberProps","entry","entryIndex","style","color","fg","undefined","decoration","fontWeight","fontStyle","content"],"mappings":";;;;;;;;;;;;;;;IAsGaA,iBAAiB;eAAjBA;;IAvFGC,SAAS;eAATA;;;;uBAdQ;+BACM;4BACC;iCACC;0BACH;sBACJ;gCAKlB;AAIA,SAASA,UAAU,KAAyC;IAAzC,IAAA,EAAEC,UAAU,EAAEC,SAAS,EAAkB,GAAzC;QAgBFD;IAftB,MAAME,iBAAiBC,IAAAA,cAAO,EAC5B,IAAMC,IAAAA,+BAAe,EAACH,YACtB;QAACA;KAAU;IAEb,MAAMI,eAAeF,IAAAA,cAAO,EAC1B,IAAMG,IAAAA,mCAAmB,EAACJ,iBAC1B;QAACA;KAAe;IAGlB,MAAMK,OAAOC,IAAAA,gCAAe,EAAC;QAC3BC,MAAMT,WAAWS,IAAI;QACrBC,YAAYV,WAAWU,UAAU;QACjCC,QAAQX,WAAWW,MAAM;IAC3B;IAEA,MAAMC,gBAAgBZ,+BAAAA,mBAAAA,WAAYS,IAAI,qBAAhBT,iBAAkBa,KAAK,CAAC,KAAKC,GAAG;IAEtD,gCAAgC;IAChC,qBACE,sBAACC;QAAIC,uBAAqB;;0BACxB,qBAACD;gBAAIE,WAAU;0BAMb,cAAA,sBAACC;oBAAED,WAAU;;sCACX,qBAACE;4BAAKF,WAAU;sCACd,cAAA,qBAACG,cAAQ;gCAACC,MAAMT;;;sCAElB,sBAACO;4BAAKG,WAAS;;gCACZC,IAAAA,0BAAc,EAACvB;gCAAY;gCAAG;8CAC/B,qBAACwB,4BAAa;oCAACC,MAAMzB,WAAW0B,UAAU;;;;sCAE5C,qBAACC;4BACCC,cAAW;4BACXC,2CAAyC;4BACzCC,SAASvB;sCAET,cAAA,qBAACY;gCAAKF,WAAU;gCAAkBc,aAAU;0CAC1C,cAAA,qBAACC,sBAAY;oCAACC,OAAO;oCAAIC,QAAQ;;;;;;;0BAKzC,qBAACC;gBAAIlB,WAAU;0BACZZ,aAAa+B,GAAG,CAAC,CAACC,MAAMC;oBACvB,MAAM,EAAE5B,UAAU,EAAE6B,aAAa,EAAE,GACjCC,IAAAA,gDAAgC,EAACH,MAAMrC;oBAEzC,MAAMyC,kBAAoD,CAAC;oBAC3D,IAAI/B,YAAY;wBACd+B,eAAe,CAAC,6BAA6B,GAAG/B;oBAClD;oBACA,IAAI6B,eAAe;wBACjBE,eAAe,CAAC,sCAAsC,GAAG;oBAC3D;oBAEA,qBACE,qBAAC1B;wBAA+B,GAAG0B,eAAe;kCAC/CJ,KAAKD,GAAG,CAAC,CAACM,OAAOC,2BAChB,qBAACxB;gCAECyB,OAAO;oCACLC,OAAOH,MAAMI,EAAE,GAAG,AAAC,iBAAcJ,MAAMI,EAAE,GAAC,MAAKC;oCAC/C,GAAIL,MAAMM,UAAU,KAAK,SAErB,8DAA8D;oCAC9D,2DAA2D;oCAC3D;wCAAEC,YAAY;oCAAI,IAClBP,MAAMM,UAAU,KAAK,WACnB;wCAAEE,WAAW;oCAAS,IACtBH,SAAS;gCACjB;0CAECL,MAAMS,OAAO;+BAbT,AAAC,WAAQR;uBAHV,AAAC,UAAOL;gBAqBtB;;;;AAIR;AAEO,MAAMxC,oBAAqB"}

package/dist/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.d.ts

@@ -0,0 +1,8 @@
+import type { StackFrame } from 'next/dist/compiled/stacktrace-parser';
+import { type AnserJsonEntry } from 'next/dist/compiled/anser';
+export declare function formatCodeFrame(codeFrame: string): string;
+export declare function groupCodeFrameLines(formattedFrame: string): AnserJsonEntry[][];
+export declare function parseLineNumberFromCodeFrameLine(line: AnserJsonEntry[], stackFrame: StackFrame): {
+    lineNumber: string | undefined;
+    isErroredLine: boolean;
+};

package/dist/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    formatCodeFrame: null,
+    groupCodeFrameLines: null,
+    parseLineNumberFromCodeFrameLine: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    formatCodeFrame: function() {
+        return formatCodeFrame;
+    },
+    groupCodeFrameLines: function() {
+        return groupCodeFrameLines;
+    },
+    parseLineNumberFromCodeFrameLine: function() {
+        return parseLineNumberFromCodeFrameLine;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _anser = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/anser"));
+const _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
+function formatCodeFrame(codeFrame) {
+    const lines = codeFrame.split(/\r?\n/g);
+    // Find the minimum length of leading spaces after `|` in the code frame
+    const miniLeadingSpacesLength = lines.map((line)=>/^>? +\d+ +\| [ ]+/.exec((0, _stripansi.default)(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec((0, _stripansi.default)(line))).filter(Boolean).map((v)=>v.pop()).reduce((c, n)=>isNaN(c) ? n.length : Math.min(c, n.length), NaN);
+    // When the minimum length of leading spaces is greater than 1, remove them
+    // from the code frame to help the indentation looks better when there's a lot leading spaces.
+    if (miniLeadingSpacesLength > 1) {
+        return lines.map((line, a)=>~(a = line.indexOf('|')) ? line.substring(0, a) + line.substring(a).replace("^\\ {" + miniLeadingSpacesLength + "}", '') : line).join('\n');
+    }
+    return lines.join('\n');
+}
+function groupCodeFrameLines(formattedFrame) {
+    // Map the decoded lines to a format that can be rendered
+    const decoded = _anser.default.ansiToJson(formattedFrame, {
+        json: true,
+        use_classes: true,
+        remove_empty: true
+    });
+    const lines = [];
+    let line = [];
+    for (const token of decoded){
+        if (token.content === '\n') {
+            lines.push(line);
+            line = [];
+        } else {
+            line.push(token);
+        }
+    }
+    if (line.length > 0) {
+        lines.push(line);
+    }
+    return lines;
+}
+function parseLineNumberFromCodeFrameLine(line, stackFrame) {
+    var _line_, _line_1, _stackFrame_lineNumber;
+    let lineNumberToken;
+    let lineNumber;
+    // parse line number from line first 2 tokens
+    // e.g. ` > 1 | const foo = 'bar'` => `1`, first token is `1 |`
+    // e.g. `  2 | const foo = 'bar'` => `2`. first 2 tokens are ' ' and ' 2 |'
+    // console.log('line', line)
+    if (((_line_ = line[0]) == null ? void 0 : _line_.content) === '>' || ((_line_1 = line[0]) == null ? void 0 : _line_1.content) === ' ') {
+        var _lineNumberToken_content_replace, _lineNumberToken_content;
+        lineNumberToken = line[1];
+        lineNumber = lineNumberToken == null ? void 0 : (_lineNumberToken_content = lineNumberToken.content) == null ? void 0 : (_lineNumberToken_content_replace = _lineNumberToken_content.replace('|', '')) == null ? void 0 : _lineNumberToken_content_replace.trim();
+    }
+    // When the line number is possibly undefined, it can be just the non-source code line
+    // e.g. the ^ sign can also take a line, we skip rendering line number for it
+    return {
+        lineNumber,
+        isErroredLine: lineNumber === ((_stackFrame_lineNumber = stackFrame.lineNumber) == null ? void 0 : _stackFrame_lineNumber.toString())
+    };
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=parse-code-frame.js.map

package/dist/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.ts"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport Anser, { type AnserJsonEntry } from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\n// Strip leading spaces out of the code frame\nexport function formatCodeFrame(codeFrame: string) {\n  const lines = codeFrame.split(/\\r?\\n/g)\n\n  // Find the minimum length of leading spaces after `|` in the code frame\n  const miniLeadingSpacesLength = lines\n    .map((line) =>\n      /^>? +\\d+ +\\| [ ]+/.exec(stripAnsi(line)) === null\n        ? null\n        : /^>? +\\d+ +\\| ( *)/.exec(stripAnsi(line))\n    )\n    .filter(Boolean)\n    .map((v) => v!.pop()!)\n    .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n  // When the minimum length of leading spaces is greater than 1, remove them\n  // from the code frame to help the indentation looks better when there's a lot leading spaces.\n  if (miniLeadingSpacesLength > 1) {\n    return lines\n      .map((line, a) =>\n        ~(a = line.indexOf('|'))\n          ? line.substring(0, a) +\n            line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n          : line\n      )\n      .join('\\n')\n  }\n  return lines.join('\\n')\n}\n\nexport function groupCodeFrameLines(formattedFrame: string) {\n  // Map the decoded lines to a format that can be rendered\n  const decoded = Anser.ansiToJson(formattedFrame, {\n    json: true,\n    use_classes: true,\n    remove_empty: true,\n  })\n  const lines: (typeof decoded)[] = []\n\n  let line: typeof decoded = []\n  for (const token of decoded) {\n    if (token.content === '\\n') {\n      lines.push(line)\n      line = []\n    } else {\n      line.push(token)\n    }\n  }\n  if (line.length > 0) {\n    lines.push(line)\n  }\n\n  return lines\n}\n\nexport function parseLineNumberFromCodeFrameLine(\n  line: AnserJsonEntry[],\n  stackFrame: StackFrame\n) {\n  let lineNumberToken: AnserJsonEntry | undefined\n  let lineNumber: string | undefined\n  // parse line number from line first 2 tokens\n  // e.g. ` > 1 | const foo = 'bar'` => `1`, first token is `1 |`\n  // e.g. `  2 | const foo = 'bar'` => `2`. first 2 tokens are ' ' and ' 2 |'\n  // console.log('line', line)\n  if (line[0]?.content === '>' || line[0]?.content === ' ') {\n    lineNumberToken = line[1]\n    lineNumber = lineNumberToken?.content?.replace('|', '')?.trim()\n  }\n\n  // When the line number is possibly undefined, it can be just the non-source code line\n  // e.g. the ^ sign can also take a line, we skip rendering line number for it\n  return {\n    lineNumber,\n    isErroredLine: lineNumber === stackFrame.lineNumber?.toString(),\n  }\n}\n"],"names":["formatCodeFrame","groupCodeFrameLines","parseLineNumberFromCodeFrameLine","codeFrame","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","formattedFrame","decoded","Anser","ansiToJson","json","use_classes","remove_empty","token","content","push","stackFrame","lineNumberToken","lineNumber","trim","isErroredLine","toString"],"mappings":";;;;;;;;;;;;;;;;IAKgBA,eAAe;eAAfA;;IA6BAC,mBAAmB;eAAnBA;;IAyBAC,gCAAgC;eAAhCA;;;;gEA1D2B;oEACrB;AAGf,SAASF,gBAAgBG,SAAiB;IAC/C,MAAMC,QAAQD,UAAUE,KAAK,CAAC;IAE9B,wEAAwE;IACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,WAAW,OAC1C,OACA,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,QAExCG,MAAM,CAACC,SACPL,GAAG,CAAC,CAACM,IAAMA,EAAGC,GAAG,IACjBC,MAAM,CAAC,CAACC,GAAGC,IAAOC,MAAMF,KAAKC,EAAEE,MAAM,GAAGC,KAAKC,GAAG,CAACL,GAAGC,EAAEE,MAAM,GAAIG;IAEnE,2EAA2E;IAC3E,8FAA8F;IAC9F,IAAIhB,0BAA0B,GAAG;QAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMe,IACV,CAAEA,CAAAA,IAAIf,KAAKgB,OAAO,CAAC,IAAG,IAClBhB,KAAKiB,SAAS,CAAC,GAAGF,KAClBf,KAAKiB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOpB,0BAAwB,KAAI,MAC9DE,MAELmB,IAAI,CAAC;IACV;IACA,OAAOvB,MAAMuB,IAAI,CAAC;AACpB;AAEO,SAAS1B,oBAAoB2B,cAAsB;IACxD,yDAAyD;IACzD,MAAMC,UAAUC,cAAK,CAACC,UAAU,CAACH,gBAAgB;QAC/CI,MAAM;QACNC,aAAa;QACbC,cAAc;IAChB;IACA,MAAM9B,QAA4B,EAAE;IAEpC,IAAII,OAAuB,EAAE;IAC7B,KAAK,MAAM2B,SAASN,QAAS;QAC3B,IAAIM,MAAMC,OAAO,KAAK,MAAM;YAC1BhC,MAAMiC,IAAI,CAAC7B;YACXA,OAAO,EAAE;QACX,OAAO;YACLA,KAAK6B,IAAI,CAACF;QACZ;IACF;IACA,IAAI3B,KAAKW,MAAM,GAAG,GAAG;QACnBf,MAAMiC,IAAI,CAAC7B;IACb;IAEA,OAAOJ;AACT;AAEO,SAASF,iCACdM,IAAsB,EACtB8B,UAAsB;QAQlB9B,QAA4BA,SASA8B;IAfhC,IAAIC;IACJ,IAAIC;IACJ,6CAA6C;IAC7C,+DAA+D;IAC/D,2EAA2E;IAC3E,4BAA4B;IAC5B,IAAIhC,EAAAA,SAAAA,IAAI,CAAC,EAAE,qBAAPA,OAAS4B,OAAO,MAAK,OAAO5B,EAAAA,UAAAA,IAAI,CAAC,EAAE,qBAAPA,QAAS4B,OAAO,MAAK,KAAK;YAE3CG,kCAAAA;QADbA,kBAAkB/B,IAAI,CAAC,EAAE;QACzBgC,aAAaD,oCAAAA,2BAAAA,gBAAiBH,OAAO,sBAAxBG,mCAAAA,yBAA0Bb,OAAO,CAAC,KAAK,wBAAvCa,iCAA4CE,IAAI;IAC/D;IAEA,sFAAsF;IACtF,6EAA6E;IAC7E,OAAO;QACLD;QACAE,eAAeF,iBAAeF,yBAAAA,WAAWE,UAAU,qBAArBF,uBAAuBK,QAAQ;IAC/D;AACF"}

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.js

@@ -201,7 +201,7 @@ function UserPreferences(param) {
                             className: "preference-header",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
-                                    htmlFor: "hide-dev-tools",
+                                    id: "hide-dev-tools",
                                     children: "Hide Dev Tools for this session"
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
@@ -213,7 +213,7 @@ function UserPreferences(param) {
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                             className: "preference-control",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
-                                id: "hide-dev-tools",
+                                "aria-describedby": "hide-dev-tools",
                                 name: "hide-dev-tools",
                                 "data-hide-dev-tools": true,
                                 className: "action-button",

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx"],"sourcesContent":["import { useState, type HTMLProps } from 'react'\nimport { css } from '../../../../../utils/css'\nimport EyeIcon from '../../../../icons/eye-icon'\nimport { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared'\nimport LightIcon from '../../../../icons/light-icon'\nimport DarkIcon from '../../../../icons/dark-icon'\nimport SystemIcon from '../../../../icons/system-icon'\nimport type { DevToolsInfoPropsCore } from './dev-tools-info'\nimport { DevToolsInfo } from './dev-tools-info'\nimport {\n  getInitialTheme,\n  NEXT_DEV_TOOLS_SCALE,\n  type DevToolsIndicatorPosition,\n  type DevToolsScale,\n} from './preferences'\n\nexport function UserPreferences({\n  setPosition,\n  position,\n  hide,\n  scale,\n  setScale,\n  ...props\n}: {\n  setPosition: (position: DevToolsIndicatorPosition) => void\n  position: DevToolsIndicatorPosition\n  scale: DevToolsScale\n  setScale: (value: DevToolsScale) => void\n  hide: () => void\n} & DevToolsInfoPropsCore &\n  Omit<HTMLProps<HTMLDivElement>, 'size'>) {\n  // derive initial theme from system preference\n  const [theme, setTheme] = useState(getInitialTheme())\n\n  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n    const portal = document.querySelector('nextjs-portal')\n    if (!portal) return\n\n    setTheme(e.target.value)\n\n    if (e.target.value === 'system') {\n      portal.classList.remove('dark')\n      portal.classList.remove('light')\n      localStorage.removeItem(STORAGE_KEY_THEME)\n      return\n    }\n\n    if (e.target.value === 'dark') {\n      portal.classList.add('dark')\n      portal.classList.remove('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'dark')\n    } else {\n      portal.classList.remove('dark')\n      portal.classList.add('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'light')\n    }\n  }\n\n  function handlePositionChange(e: React.ChangeEvent<HTMLSelectElement>) {\n    setPosition(e.target.value as DevToolsIndicatorPosition)\n    localStorage.setItem(STORAGE_KEY_POSITION, e.target.value)\n  }\n\n  function handleSizeChange({ target }: React.ChangeEvent<HTMLSelectElement>) {\n    const value = Number(target.value) as DevToolsScale\n    setScale(value)\n  }\n\n  return (\n    <DevToolsInfo title=\"Preferences\" {...props}>\n      <div className=\"preferences-container\">\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"theme\">Theme</label>\n            <p className=\"preference-description\">\n              Select your theme preference.\n            </p>\n          </div>\n          <Select\n            id=\"theme\"\n            name=\"theme\"\n            prefix={<ThemeIcon theme={theme as 'dark' | 'light' | 'system'} />}\n            value={theme}\n            onChange={handleThemeChange}\n          >\n            <option value=\"system\">System</option>\n            <option value=\"light\">Light</option>\n            <option value=\"dark\">Dark</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"position\">Position</label>\n            <p className=\"preference-description\">\n              Adjust the placement of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"position\"\n            name=\"position\"\n            value={position}\n            onChange={handlePositionChange}\n          >\n            <option value=\"bottom-left\">Bottom Left</option>\n            <option value=\"bottom-right\">Bottom Right</option>\n            <option value=\"top-left\">Top Left</option>\n            <option value=\"top-right\">Top Right</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"size\">Size</label>\n            <p className=\"preference-description\">\n              Adjust the size of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"size\"\n            name=\"size\"\n            value={scale}\n            onChange={handleSizeChange}\n          >\n            {Object.entries(NEXT_DEV_TOOLS_SCALE).map(([key, value]) => {\n              return (\n                <option value={value} key={key}>\n                  {key}\n                </option>\n              )\n            })}\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"hide-dev-tools\">\n              Hide Dev Tools for this session\n            </label>\n            <p className=\"preference-description\">\n              Hide Dev Tools until you restart your dev server, or 1 day.\n            </p>\n          </div>\n          <div className=\"preference-control\">\n            <button\n              id=\"hide-dev-tools\"\n              name=\"hide-dev-tools\"\n              data-hide-dev-tools\n              className=\"action-button\"\n              onClick={hide}\n            >\n              <EyeIcon />\n              <span>Hide</span>\n            </button>\n          </div>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label>Disable Dev Tools for this project</label>\n            <p className=\"preference-description\">\n              To disable this UI completely, set{' '}\n              <code className=\"dev-tools-info-code\">devIndicators: false</code>{' '}\n              in your <code className=\"dev-tools-info-code\">next.config</code>{' '}\n              file.\n            </p>\n          </div>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nfunction Select({\n  children,\n  prefix,\n  ...props\n}: {\n  prefix?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLSelectElement>, 'prefix'>) {\n  return (\n    <div className=\"select-button\">\n      {prefix}\n      <select {...props}>{children}</select>\n      <ChevronDownIcon />\n    </div>\n  )\n}\n\nfunction ThemeIcon({ theme }: { theme: 'dark' | 'light' | 'system' }) {\n  switch (theme) {\n    case 'system':\n      return <SystemIcon />\n    case 'dark':\n      return <DarkIcon />\n    case 'light':\n      return <LightIcon />\n    default:\n      return null\n  }\n}\n\nexport const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`\n  .preferences-container {\n    padding: 8px 6px;\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    .preferences-container {\n      width: 480px;\n    }\n  }\n\n  .preference-section:first-child {\n    padding-top: 0;\n  }\n\n  .preference-section {\n    padding: 12px 0;\n    border-bottom: 1px solid var(--color-gray-400);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .preference-section:last-child {\n    border-bottom: none;\n  }\n\n  .preference-header {\n    margin-bottom: 0;\n    flex: 1;\n  }\n\n  .preference-header label {\n    font-size: var(--size-14);\n    font-weight: 500;\n    color: var(--color-gray-1000);\n    margin: 0;\n  }\n\n  .preference-description {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    margin: 0;\n  }\n\n  .select-button,\n  .action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-lg);\n    font-weight: 400;\n    font-size: var(--size-14);\n    color: var(--color-gray-1000);\n    padding: 6px 8px;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .select-button {\n    &:focus-within {\n      outline: var(--focus-ring);\n    }\n\n    select {\n      all: unset;\n    }\n  }\n\n  :global(.icon) {\n    width: 18px;\n    height: 18px;\n    color: #666;\n  }\n`\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M14.0607 5.49999L13.5303 6.03032L8.7071 10.8535C8.31658 11.2441 7.68341 11.2441 7.29289 10.8535L2.46966 6.03032L1.93933 5.49999L2.99999 4.43933L3.53032 4.96966L7.99999 9.43933L12.4697 4.96966L13 4.43933L14.0607 5.49999Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["DEV_TOOLS_INFO_USER_PREFERENCES_STYLES","UserPreferences","setPosition","position","hide","scale","setScale","props","theme","setTheme","useState","getInitialTheme","handleThemeChange","e","portal","document","querySelector","target","value","classList","remove","localStorage","removeItem","STORAGE_KEY_THEME","add","setItem","handlePositionChange","STORAGE_KEY_POSITION","handleSizeChange","Number","DevToolsInfo","title","div","className","label","htmlFor","p","Select","id","name","prefix","ThemeIcon","onChange","option","Object","entries","NEXT_DEV_TOOLS_SCALE","map","key","button","data-hide-dev-tools","onClick","EyeIcon","span","code","children","select","ChevronDownIcon","SystemIcon","DarkIcon","LightIcon","css","svg","width","height","viewBox","aria-hidden","path","fillRule","clipRule","d","fill"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx"],"sourcesContent":["import { useState, type HTMLProps } from 'react'\nimport { css } from '../../../../../utils/css'\nimport EyeIcon from '../../../../icons/eye-icon'\nimport { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared'\nimport LightIcon from '../../../../icons/light-icon'\nimport DarkIcon from '../../../../icons/dark-icon'\nimport SystemIcon from '../../../../icons/system-icon'\nimport type { DevToolsInfoPropsCore } from './dev-tools-info'\nimport { DevToolsInfo } from './dev-tools-info'\nimport {\n  getInitialTheme,\n  NEXT_DEV_TOOLS_SCALE,\n  type DevToolsIndicatorPosition,\n  type DevToolsScale,\n} from './preferences'\n\nexport function UserPreferences({\n  setPosition,\n  position,\n  hide,\n  scale,\n  setScale,\n  ...props\n}: {\n  setPosition: (position: DevToolsIndicatorPosition) => void\n  position: DevToolsIndicatorPosition\n  scale: DevToolsScale\n  setScale: (value: DevToolsScale) => void\n  hide: () => void\n} & DevToolsInfoPropsCore &\n  Omit<HTMLProps<HTMLDivElement>, 'size'>) {\n  // derive initial theme from system preference\n  const [theme, setTheme] = useState(getInitialTheme())\n\n  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n    const portal = document.querySelector('nextjs-portal')\n    if (!portal) return\n\n    setTheme(e.target.value)\n\n    if (e.target.value === 'system') {\n      portal.classList.remove('dark')\n      portal.classList.remove('light')\n      localStorage.removeItem(STORAGE_KEY_THEME)\n      return\n    }\n\n    if (e.target.value === 'dark') {\n      portal.classList.add('dark')\n      portal.classList.remove('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'dark')\n    } else {\n      portal.classList.remove('dark')\n      portal.classList.add('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'light')\n    }\n  }\n\n  function handlePositionChange(e: React.ChangeEvent<HTMLSelectElement>) {\n    setPosition(e.target.value as DevToolsIndicatorPosition)\n    localStorage.setItem(STORAGE_KEY_POSITION, e.target.value)\n  }\n\n  function handleSizeChange({ target }: React.ChangeEvent<HTMLSelectElement>) {\n    const value = Number(target.value) as DevToolsScale\n    setScale(value)\n  }\n\n  return (\n    <DevToolsInfo title=\"Preferences\" {...props}>\n      <div className=\"preferences-container\">\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"theme\">Theme</label>\n            <p className=\"preference-description\">\n              Select your theme preference.\n            </p>\n          </div>\n          <Select\n            id=\"theme\"\n            name=\"theme\"\n            prefix={<ThemeIcon theme={theme as 'dark' | 'light' | 'system'} />}\n            value={theme}\n            onChange={handleThemeChange}\n          >\n            <option value=\"system\">System</option>\n            <option value=\"light\">Light</option>\n            <option value=\"dark\">Dark</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"position\">Position</label>\n            <p className=\"preference-description\">\n              Adjust the placement of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"position\"\n            name=\"position\"\n            value={position}\n            onChange={handlePositionChange}\n          >\n            <option value=\"bottom-left\">Bottom Left</option>\n            <option value=\"bottom-right\">Bottom Right</option>\n            <option value=\"top-left\">Top Left</option>\n            <option value=\"top-right\">Top Right</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"size\">Size</label>\n            <p className=\"preference-description\">\n              Adjust the size of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"size\"\n            name=\"size\"\n            value={scale}\n            onChange={handleSizeChange}\n          >\n            {Object.entries(NEXT_DEV_TOOLS_SCALE).map(([key, value]) => {\n              return (\n                <option value={value} key={key}>\n                  {key}\n                </option>\n              )\n            })}\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label id=\"hide-dev-tools\">Hide Dev Tools for this session</label>\n            <p className=\"preference-description\">\n              Hide Dev Tools until you restart your dev server, or 1 day.\n            </p>\n          </div>\n          <div className=\"preference-control\">\n            <button\n              aria-describedby=\"hide-dev-tools\"\n              name=\"hide-dev-tools\"\n              data-hide-dev-tools\n              className=\"action-button\"\n              onClick={hide}\n            >\n              <EyeIcon />\n              <span>Hide</span>\n            </button>\n          </div>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label>Disable Dev Tools for this project</label>\n            <p className=\"preference-description\">\n              To disable this UI completely, set{' '}\n              <code className=\"dev-tools-info-code\">devIndicators: false</code>{' '}\n              in your <code className=\"dev-tools-info-code\">next.config</code>{' '}\n              file.\n            </p>\n          </div>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nfunction Select({\n  children,\n  prefix,\n  ...props\n}: {\n  prefix?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLSelectElement>, 'prefix'>) {\n  return (\n    <div className=\"select-button\">\n      {prefix}\n      <select {...props}>{children}</select>\n      <ChevronDownIcon />\n    </div>\n  )\n}\n\nfunction ThemeIcon({ theme }: { theme: 'dark' | 'light' | 'system' }) {\n  switch (theme) {\n    case 'system':\n      return <SystemIcon />\n    case 'dark':\n      return <DarkIcon />\n    case 'light':\n      return <LightIcon />\n    default:\n      return null\n  }\n}\n\nexport const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`\n  .preferences-container {\n    padding: 8px 6px;\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    .preferences-container {\n      width: 480px;\n    }\n  }\n\n  .preference-section:first-child {\n    padding-top: 0;\n  }\n\n  .preference-section {\n    padding: 12px 0;\n    border-bottom: 1px solid var(--color-gray-400);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .preference-section:last-child {\n    border-bottom: none;\n  }\n\n  .preference-header {\n    margin-bottom: 0;\n    flex: 1;\n  }\n\n  .preference-header label {\n    font-size: var(--size-14);\n    font-weight: 500;\n    color: var(--color-gray-1000);\n    margin: 0;\n  }\n\n  .preference-description {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    margin: 0;\n  }\n\n  .select-button,\n  .action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-lg);\n    font-weight: 400;\n    font-size: var(--size-14);\n    color: var(--color-gray-1000);\n    padding: 6px 8px;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .select-button {\n    &:focus-within {\n      outline: var(--focus-ring);\n    }\n\n    select {\n      all: unset;\n    }\n  }\n\n  :global(.icon) {\n    width: 18px;\n    height: 18px;\n    color: #666;\n  }\n`\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M14.0607 5.49999L13.5303 6.03032L8.7071 10.8535C8.31658 11.2441 7.68341 11.2441 7.29289 10.8535L2.46966 6.03032L1.93933 5.49999L2.99999 4.43933L3.53032 4.96966L7.99999 9.43933L12.4697 4.96966L13 4.43933L14.0607 5.49999Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["DEV_TOOLS_INFO_USER_PREFERENCES_STYLES","UserPreferences","setPosition","position","hide","scale","setScale","props","theme","setTheme","useState","getInitialTheme","handleThemeChange","e","portal","document","querySelector","target","value","classList","remove","localStorage","removeItem","STORAGE_KEY_THEME","add","setItem","handlePositionChange","STORAGE_KEY_POSITION","handleSizeChange","Number","DevToolsInfo","title","div","className","label","htmlFor","p","Select","id","name","prefix","ThemeIcon","onChange","option","Object","entries","NEXT_DEV_TOOLS_SCALE","map","key","button","aria-describedby","data-hide-dev-tools","onClick","EyeIcon","span","code","children","select","ChevronDownIcon","SystemIcon","DarkIcon","LightIcon","css","svg","width","height","viewBox","aria-hidden","path","fillRule","clipRule","d","fill"],"mappings":"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"}