[dev-overlay] Move code into new top-level folder in src/next-devtools

.eslintrc.json

@@ -297,6 +297,17 @@
     "no-octal": "error",
     "no-octal-escape": "error",
     "no-regex-spaces": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["*/next-devtools/dev-overlay*"],
+            "message": "Use `next/dist/compiled/next-devtools` (`src/next-devtools/dev-overlay/entrypoint.ts`) instead. Prefer `src/next-devtools/shared/` for shared utils."
+          }
+        ]
+      }
+    ],
     "no-restricted-syntax": [
       "error",
       "WithStatement",

packages/next/.storybook/main.ts

@@ -10,7 +10,7 @@ function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')))
 }
 const config: StorybookConfig = {
-  stories: ['../src/client/components/react-dev-overlay/ui/**/*.stories.tsx'],
+  stories: ['../src/next-devtools/dev-overlay/**/*.stories.tsx'],
   addons: [
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-essentials'),

packages/next/next-devtools.webpack-config.js

@@ -25,10 +25,7 @@ module.exports = ({ dev, ...rest }) => {
   const target = `browserslist:${MODERN_BROWSERSLIST_TARGET.join(', ')}`
 
   return {
-    entry: path.join(
-      __dirname,
-      'src/client/components/react-dev-overlay/entrypoint.js'
-    ),
+    entry: path.join(__dirname, 'src/next-devtools/entrypoint.ts'),
     target,
     mode: dev ? 'development' : 'production',
     output: {

packages/next/next-runtime.webpack-config.js

@@ -93,7 +93,7 @@ const sharedExternals = [
 const externalsMap = {
   './web/sandbox': 'next/dist/server/web/sandbox',
   'next/dist/compiled/next-devtools':
-    'commonjs next/dist/client/components/react-dev-overlay/dev-overlay.shim.js',
+    'commonjs next/dist/next-devtools/dev-overlay.shim.js',
 }
 
 const externalsRegexMap = {

packages/next/src/build/output/index.ts

@@ -2,7 +2,7 @@ import { bold, red, yellow } from '../../lib/picocolors'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import textTable from 'next/dist/compiled/text-table'
 import createStore from 'next/dist/compiled/unistore'
-import formatWebpackMessages from '../../client/components/react-dev-overlay/utils/format-webpack-messages'
+import formatWebpackMessages from '../../shared/lib/format-webpack-messages'
 import { store as consoleStore } from './store'
 import type { OutputState } from './store'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'

packages/next/src/build/webpack-build/impl.ts

@@ -1,7 +1,7 @@
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 import { stringBufferUtils } from 'next/dist/compiled/webpack-sources3'
 import { red } from '../../lib/picocolors'
-import formatWebpackMessages from '../../client/components/react-dev-overlay/utils/format-webpack-messages'
+import formatWebpackMessages from '../../shared/lib/format-webpack-messages'
 import { nonNullable } from '../../lib/non-nullable'
 import type { COMPILER_INDEXES } from '../../shared/lib/constants'
 import {

packages/next/src/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.ts

@@ -3,7 +3,7 @@ import { SimpleWebpackError } from './simpleWebpackError'
 import {
   createOriginalStackFrame,
   getIgnoredSources,
-} from '../../../../client/components/react-dev-overlay/server/middleware-webpack'
+} from '../../../../server/dev/middleware-webpack'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 
 // Based on https://github.com/webpack/webpack/blob/fcdd04a833943394bbb0a9eeb54a962a24cc7e41/lib/stats/DefaultStatsFactoryPlugin.js#L422-L431

packages/next/src/cli/next-info.ts

@@ -8,7 +8,7 @@ import { PHASE_INFO } from '../shared/lib/constants'
 import loadConfig from '../server/config'
 import { getRegistry } from '../lib/helpers/get-registry'
 import { parseVersionInfo } from '../server/dev/parse-version-info'
-import { getStaleness } from '../client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info'
+import { getStaleness } from '../next-devtools/shared/version-staleness'
 import { warn } from '../build/output/log'
 
 export type NextInfoOptions = {

packages/next/src/client/app-index.tsx

@@ -1,7 +1,7 @@
 // imports polyfill from `@next/polyfill-module` after build.
 import '../build/polyfills/polyfill-module'
 
-import './components/react-dev-overlay/app/app-dev-overlay-setup'
+import '../next-devtools/userspace/app/app-dev-overlay-setup'
 
 import ReactDOMClient from 'react-dom/client'
 import React, { use } from 'react'
@@ -272,7 +272,7 @@ export function hydrate(
     // Server rendering failed, fall back to client-side rendering
     if (process.env.NODE_ENV !== 'production') {
       const { createRootLevelDevOverlayElement } =
-        require('./components/react-dev-overlay/app/client-entry') as typeof import('./components/react-dev-overlay/app/client-entry')
+        require('../next-devtools/userspace/app/client-entry') as typeof import('../next-devtools/userspace/app/client-entry')
 
       // Note this won't cause hydration mismatch because we are doing CSR w/o hydration
       element = createRootLevelDevOverlayElement(element)

packages/next/src/client/app-next-dev.ts

@@ -7,7 +7,7 @@ import { appBootstrap } from './app-bootstrap'
 import {
   getComponentStack,
   getOwnerStack,
-} from './components/react-dev-overlay/app/errors/stitched-error'
+} from '../next-devtools/userspace/app/errors/stitched-error'
 import { isRecoverableError } from './react-client-callbacks/on-recoverable-error'
 
 // eslint-disable-next-line @next/internal/typechecked-require

packages/next/src/client/app-next-turbopack.ts

@@ -2,7 +2,7 @@ import { appBootstrap } from './app-bootstrap'
 import {
   getComponentStack,
   getOwnerStack,
-} from './components/react-dev-overlay/app/errors/stitched-error'
+} from '../next-devtools/userspace/app/errors/stitched-error'
 import { isRecoverableError } from './react-client-callbacks/on-recoverable-error'
 
 window.next.version += '-turbo'

packages/next/src/client/components/use-action-queue.ts

@@ -36,7 +36,7 @@ export function useActionQueue(
   // weird implementation details.
   if (process.env.NODE_ENV !== 'production') {
     const { useAppDevRenderingIndicator } =
-      require('./react-dev-overlay/utils/dev-indicator/use-app-dev-rendering-indicator') as typeof import('./react-dev-overlay/utils/dev-indicator/use-app-dev-rendering-indicator')
+      require('../../next-devtools/userspace/use-app-dev-rendering-indicator') as typeof import('../../next-devtools/userspace/use-app-dev-rendering-indicator')
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const appDevRenderingIndicator = useAppDevRenderingIndicator()
 

packages/next/src/client/dev/hot-reloader/app/hot-reloader-app.tsx

@@ -3,18 +3,18 @@
 import type { ReactNode } from 'react'
 import { useEffect, startTransition, useRef } from 'react'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
-import formatWebpackMessages from '../../../components/react-dev-overlay/utils/format-webpack-messages'
+import formatWebpackMessages from '../../../../shared/lib/format-webpack-messages'
 import { useRouter } from '../../../components/navigation'
 import {
   REACT_REFRESH_FULL_RELOAD,
   REACT_REFRESH_FULL_RELOAD_FROM_ERROR,
   reportInvalidHmrMessage,
 } from '../shared'
 import { dispatcher } from 'next/dist/compiled/next-devtools'
-import { ReplaySsrOnlyErrors } from '../../../components/react-dev-overlay/app/errors/replay-ssr-only-errors'
-import { AppDevOverlayErrorBoundary } from '../../../components/react-dev-overlay/app/app-dev-overlay-error-boundary'
-import { useErrorHandler } from '../../../components/react-dev-overlay/app/errors/use-error-handler'
-import { RuntimeErrorHandler } from '../../../components/react-dev-overlay/runtime-error-handler'
+import { ReplaySsrOnlyErrors } from '../../../../next-devtools/userspace/app/errors/replay-ssr-only-errors'
+import { AppDevOverlayErrorBoundary } from '../../../../next-devtools/userspace/app/app-dev-overlay-error-boundary'
+import { useErrorHandler } from '../../../../next-devtools/userspace/app/errors/use-error-handler'
+import { RuntimeErrorHandler } from '../../runtime-error-handler'
 import {
   useSendMessage,
   useTurbopack,
@@ -28,8 +28,8 @@ import type {
 } from '../../../../server/dev/hot-reloader-types'
 import { useUntrackedPathname } from '../../../components/navigation-untracked'
 import type { GlobalErrorComponent } from '../../../components/global-error'
-import reportHmrLatency from '../../../components/react-dev-overlay/utils/report-hmr-latency'
-import { TurbopackHmr } from '../../../components/react-dev-overlay/utils/turbopack-hot-reloader-common'
+import reportHmrLatency from '../../report-hmr-latency'
+import { TurbopackHmr } from '../turbopack-hot-reloader-common'
 import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../../components/app-router-headers'
 
 let mostRecentCompilationHash: any = null

packages/next/src/client/dev/hot-reloader/pages/hot-reloader-pages.ts

@@ -33,10 +33,10 @@
 /// <reference types="webpack/module.d.ts" />
 
 import { dispatcher } from 'next/dist/compiled/next-devtools'
-import { register } from '../../../components/react-dev-overlay/pages/pages-dev-overlay-setup'
+import { register } from '../../../../next-devtools/userspace/pages/pages-dev-overlay-setup'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { addMessageListener, sendMessage } from './websocket'
-import formatWebpackMessages from '../../../components/react-dev-overlay/utils/format-webpack-messages'
+import formatWebpackMessages from '../../../../shared/lib/format-webpack-messages'
 import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
 import type {
   HMR_ACTION_TYPES,
@@ -47,9 +47,9 @@ import {
   REACT_REFRESH_FULL_RELOAD_FROM_ERROR,
   reportInvalidHmrMessage,
 } from '../shared'
-import { RuntimeErrorHandler } from '../../../components/react-dev-overlay/runtime-error-handler'
-import reportHmrLatency from '../../../components/react-dev-overlay/utils/report-hmr-latency'
-import { TurbopackHmr } from '../../../components/react-dev-overlay/utils/turbopack-hot-reloader-common'
+import { RuntimeErrorHandler } from '../../runtime-error-handler'
+import reportHmrLatency from '../../report-hmr-latency'
+import { TurbopackHmr } from '../turbopack-hot-reloader-common'
 
 // This alternative WebpackDevServer combines the functionality of:
 // https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js

packages/next/src/client/components/react-dev-overlay/utils/turbopack-hot-reloader-common.ts → packages/next/src/client/dev/hot-reloader/turbopack-hot-reloader-common.ts

@@ -1,5 +1,5 @@
-import type { TurbopackMessageAction } from '../../../../server/dev/hot-reloader-types'
-import type { Update as TurbopackUpdate } from '../../../../build/swc/types'
+import type { TurbopackMessageAction } from '../../../server/dev/hot-reloader-types'
+import type { Update as TurbopackUpdate } from '../../../build/swc/types'
 
 declare global {
   interface Window {

packages/next/src/client/index.tsx

@@ -180,7 +180,7 @@ class Container extends React.Component<{
       return this.props.children
     } else {
       const { PagesDevOverlayBridge } =
-        require('./components/react-dev-overlay/pages/pages-dev-overlay-setup') as typeof import('./components/react-dev-overlay/pages/pages-dev-overlay-setup')
+        require('../next-devtools/userspace/pages/pages-dev-overlay-setup') as typeof import('../next-devtools/userspace/pages/pages-dev-overlay-setup')
       return (
         <PagesDevOverlayBridge>{this.props.children}</PagesDevOverlayBridge>
       )
@@ -918,7 +918,7 @@ export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
 
   if (process.env.NODE_ENV === 'development') {
     const getServerError = (
-      require('./components/react-dev-overlay/utils/node-stack-frames') as typeof import('./components/react-dev-overlay/utils/node-stack-frames')
+      require('../server/dev/node-stack-frames') as typeof import('../server/dev/node-stack-frames')
     ).getServerError
     // Server-side runtime errors need to be re-thrown on the client-side so
     // that the overlay is rendered.

packages/next/src/client/page-bootstrap.ts

@@ -11,7 +11,7 @@ import {
   urlQueryToSearchParams,
 } from '../shared/lib/router/utils/querystring'
 import { HMR_ACTIONS_SENT_TO_BROWSER } from '../server/dev/hot-reloader-types'
-import { RuntimeErrorHandler } from './components/react-dev-overlay/runtime-error-handler'
+import { RuntimeErrorHandler } from './dev/runtime-error-handler'
 import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from './dev/hot-reloader/shared'
 import { performFullReload } from './dev/hot-reloader/pages/hot-reloader-pages'
 import { dispatcher } from 'next/dist/compiled/next-devtools'

packages/next/src/client/react-client-callbacks/error-boundary-callbacks.ts

@@ -5,12 +5,12 @@ import {
   setOwnerStackIfAvailable,
   setComponentStack,
   coerceError,
-} from '../components/react-dev-overlay/app/errors/stitched-error'
-import { handleClientError } from '../components/react-dev-overlay/app/errors/use-error-handler'
+} from '../../next-devtools/userspace/app/errors/stitched-error'
+import { handleClientError } from '../../next-devtools/userspace/app/errors/use-error-handler'
 import { isNextRouterError } from '../components/is-next-router-error'
 import { isBailoutToCSRError } from '../../shared/lib/lazy-dynamic/bailout-to-csr'
 import { reportGlobalError } from './report-global-error'
-import { originConsoleError } from '../components/react-dev-overlay/app/errors/intercept-console-error'
+import { originConsoleError } from '../../next-devtools/userspace/app/errors/intercept-console-error'
 import { ErrorBoundaryHandler } from '../components/error-boundary'
 import DefaultErrorBoundary from '../components/global-error'
 
@@ -24,7 +24,7 @@ export function onCaughtError(
 
   if (process.env.NODE_ENV !== 'production') {
     const { AppDevOverlayErrorBoundary } =
-      require('../components/react-dev-overlay/app/app-dev-overlay-error-boundary') as typeof import('../components/react-dev-overlay/app/app-dev-overlay-error-boundary')
+      require('../../next-devtools/userspace/app/app-dev-overlay-error-boundary') as typeof import('../../next-devtools/userspace/app/app-dev-overlay-error-boundary')
 
     isImplicitErrorBoundary =
       errorBoundaryComponent === AppDevOverlayErrorBoundary

packages/next/src/client/react-client-callbacks/on-recoverable-error.ts

@@ -6,7 +6,7 @@ import {
   setOwnerStackIfAvailable,
   setComponentStack,
   coerceError,
-} from '../components/react-dev-overlay/app/errors/stitched-error'
+} from '../../next-devtools/userspace/app/errors/stitched-error'
 import isError from '../../lib/is-error'
 import { reportGlobalError } from './report-global-error'
 

packages/next/src/client/components/react-dev-overlay/README.md → packages/next/src/next-devtools/README.md

@@ -2,12 +2,16 @@
 
 ## Project Structure
 
-- `app/` - Main entrypoint and related files for App Router dev overlay.
-- `font/` - Includes Geist fonts that will be served to the client via the internal `/__nextjs_font/...` route.
-- `pages/` - Main entrypoint and related files for Pages Router dev overlay.
-- `server/` - Source files related to the dev overlay that are to run on the server and not sent to the client.
-- `ui/` - Main source files that build the UI of the dev overlay. It is recommended to keep this directory isolated from the rest of the codebase to make it easier to be excluded from compiliation and be bundled in the future.
-- `utils/` - Utils that can also be used outside of this project unlike the ones inside the `ui/` directory.
+- `next-devtools/dev-overlay/` - The UI that Next.js developers can interact with in development.
+- `next-devtools/server/` - Code that runs in the Next.js development server.
+- `next-devtools/shared/` - Anything that doesn't fit in
+- `next-devtools/userspace/` - Code that runs in the user's application.
+
+Modules in `dev-overlay/` are isolated from the rest of the source. Any stateful module will not share state with e.g. `userspace/`. Stateful modules in `shared/` cannot be used to pass data from `dev-overlay/` to `userspace/` or vice versa.
+
+`userspace/` code can send messages to `dev-overlay/` via the `dispatcher` imported from `next/dist/compiled/next-devtools`.
+
+Keep processing in `userspace/` to a minimum and prefer deriving data in `dev-overlay/`.
 
 ## Development
 

packages/next/src/client/components/react-dev-overlay/dev-overlay.browser.tsx → packages/next/src/next-devtools/dev-overlay.browser.tsx

@@ -17,16 +17,16 @@ import {
   ACTION_BUILDING_INDICATOR_SHOW,
   ACTION_RENDERING_INDICATOR_HIDE,
   ACTION_RENDERING_INDICATOR_SHOW,
-} from './shared'
+} from './dev-overlay/shared'
 
 import { startTransition, useInsertionEffect } from 'react'
 import { createRoot } from 'react-dom/client'
-import { FontStyles } from './font/font-styles'
-import type { HydrationErrorState } from './pages/hydration-error-state'
-import type { DebugInfo } from './types'
-import { DevOverlay } from './ui/dev-overlay'
-import type { DevIndicatorServerState } from '../../../server/dev/dev-indicator-server-state'
-import type { VersionInfo } from '../../../server/dev/parse-version-info'
+import { FontStyles } from './dev-overlay/font/font-styles'
+import type { HydrationErrorState } from './shared/hydration-error'
+import type { DebugInfo } from './shared/types'
+import { DevOverlay } from './dev-overlay/dev-overlay'
+import type { DevIndicatorServerState } from '../server/dev/dev-indicator-server-state'
+import type { VersionInfo } from '../server/dev/parse-version-info'
 
 export interface Dispatcher {
   onBuildOk(): void

packages/next/src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx → packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.tsx

@@ -1,9 +1,9 @@
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
-import type { OriginalStackFrame } from '../../../utils/stack-frame'
+import type { OriginalStackFrame } from '../../../shared/stack-frame'
 
 import { HotlinkedText } from '../hot-linked-text'
 import { ExternalIcon, SourceMappingErrorIcon } from '../../icons/external'
-import { getFrameSource } from '../../../utils/stack-frame'
+import { getFrameSource } from '../../../shared/stack-frame'
 import { useOpenInEditor } from '../../utils/use-open-in-editor'
 
 export const CallStackFrame: React.FC<{

packages/next/src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx → packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx

@@ -1,7 +1,7 @@
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import { useMemo } from 'react'
 import { HotlinkedText } from '../hot-linked-text'
-import { getFrameSource } from '../../../utils/stack-frame'
+import { getFrameSource } from '../../../shared/stack-frame'
 import { useOpenInEditor } from '../../utils/use-open-in-editor'
 import { ExternalIcon } from '../../icons/external'
 import { FileIcon } from '../../icons/file'

packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx → packages/next/src/next-devtools/dev-overlay/components/errors/call-stack/call-stack.tsx

@@ -1,4 +1,4 @@
-import type { OriginalStackFrame } from '../../../../utils/stack-frame'
+import type { OriginalStackFrame } from '../../../../shared/stack-frame'
 import { useMemo, useState, useRef } from 'react'
 import { CallStackFrame } from '../../call-stack-frame/call-stack-frame'
 

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx → packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { DevToolsIndicator } from './dev-tools-indicator'
 import { withShadowPortal } from '../../../storybook/with-shadow-portal'
-import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'
-import type { OverlayState } from '../../../../shared'
+import type { VersionInfo } from '../../../../../server/dev/parse-version-info'
+import type { OverlayState } from '../../../shared'
 
 const meta: Meta<typeof DevToolsIndicator> = {
   component: DevToolsIndicator,

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx → packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -5,7 +5,7 @@ import {
   STORAGE_KEY_POSITION,
   type OverlayDispatch,
   type OverlayState,
-} from '../../../../shared'
+} from '../../../shared'
 
 import { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Toast } from '../../toast'

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/preferences.ts → packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/preferences.ts

@@ -3,7 +3,7 @@ import {
   STORAGE_KEY_POSITION,
   STORAGE_KEY_SCALE,
   STORAGE_KEY_THEME,
-} from '../../../../../shared'
+} from '../../../../shared'
 
 const INDICATOR_POSITION =
   (process.env

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx → packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx

@@ -1,7 +1,7 @@
 import { useState, type HTMLProps } from 'react'
-import { css } from '../../../../../utils/css'
+import { css } from '../../../../utils/css'
 import EyeIcon from '../../../../icons/eye-icon'
-import { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared'
+import { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../shared'
 import LightIcon from '../../../../icons/light-icon'
 import DarkIcon from '../../../../icons/dark-icon'
 import SystemIcon from '../../../../icons/system-icon'

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx → packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useEffect, useRef, useState } from 'react'
-import { css } from '../../../../utils/css'
+import { css } from '../../../utils/css'
 import mergeRefs from '../../../utils/merge-refs'
 import { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'
 import type { DevToolsScale } from './dev-tools-info/preferences'