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

Author: eps1lon

.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/react-dev-overlay/entrypoint.js

@@ -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/components/react-dev-overlay/utils/get-source-map-url.ts

@@ -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/components/use-action-queue.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/dev/hot-reloader/app/hot-reloader-app.tsx

@@ -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/dev/hot-reloader/pages/hot-reloader-pages.ts

@@ -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/components/react-dev-overlay/utils/turbopack-hot-reloader-common.ts renamed to packages/next/src/client/dev/hot-reloader/turbopack-hot-reloader-common.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/components/react-dev-overlay/utils/report-hmr-latency.ts renamed to packages/next/src/client/dev/report-hmr-latency.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/components/react-dev-overlay/runtime-error-handler.ts renamed to packages/next/src/client/dev/runtime-error-handler.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/index.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/page-bootstrap.ts

@@ -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/react-client-callbacks/error-boundary-callbacks.ts

@@ -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/react-client-callbacks/on-recoverable-error.ts

@@ -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/README.md renamed to packages/next/src/next-devtools/README.md

@@ -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/dev-overlay.browser.tsx renamed to packages/next/src/next-devtools/dev-overlay.browser.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/dev-overlay.shim.ts renamed to packages/next/src/next-devtools/dev-overlay.shim.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/app.png renamed to packages/next/src/next-devtools/dev-overlay/app.png

@@ -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/call-stack-frame/call-stack-frame.stories.tsx renamed to packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.stories.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'