Skip to content

Commit f9d18a1

Browse files
eps1loneps1lon
committed
[dev-overlay] Move hot reloader client code out of react-dev-overlay
1 parent 94b0f99 commit f9d18a1

File tree

17 files changed

+64
-68
lines changed

17 files changed

+64
-68
lines changed

‎packages/next/src/client/components/app-router.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -505,9 +505,9 @@ function Router({
505505
</DevRootHTTPAccessFallbackBoundary>
506506
)
507507
}
508-
const HotReloader: typeof import('./react-dev-overlay/app/hot-reloader-client').default =
508+
const HotReloader: typeof import('../dev/hot-reloader/app/hot-reloader-app').default =
509509
(
510-
require('./react-dev-overlay/app/hot-reloader-client') as typeof import('./react-dev-overlay/app/hot-reloader-client')
510+
require('../dev/hot-reloader/app/hot-reloader-app') as typeof import('../dev/hot-reloader/app/hot-reloader-app')
511511
).default
512512

513513
content = (

‎packages/next/src/client/components/react-dev-overlay/app/client-entry.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { getSocketUrl } from '../utils/get-socket-url'
2+
import { getSocketUrl } from '../../../dev/hot-reloader/get-socket-url'
33
import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
44
import GlobalError from '../../global-error'
55
import { AppDevOverlayErrorBoundary } from './app-dev-overlay-error-boundary'

‎packages/next/src/client/components/react-dev-overlay/pages/hooks.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const usePagesDevOverlayBridge = () => {
1919

2020
React.useEffect(() => {
2121
const { handleStaticIndicator } =
22-
require('./hot-reloader-client') as typeof import('./hot-reloader-client')
22+
require('../../../dev/hot-reloader/pages/hot-reloader-pages') as typeof import('../../../dev/hot-reloader/pages/hot-reloader-pages')
2323

2424
Router.events.on('routeChangeComplete', handleStaticIndicator)
2525

‎packages/next/src/client/components/react-dev-overlay/shared.ts

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import type { SupportedErrorEvent } from './ui/container/runtime-error/render-er
55
import { parseComponentStack } from './utils/parse-component-stack'
66
import type { DebugInfo } from './types'
77
import type { DevIndicatorServerState } from '../../../server/dev/dev-indicator-server-state'
8-
import type { HMR_ACTION_TYPES } from '../../../server/dev/hot-reloader-types'
98
import { parseStack } from './utils/parse-stack'
109
import { isConsoleError } from '../errors/console-error'
1110

@@ -340,26 +339,3 @@ export function useErrorOverlayReducer(
340339
}
341340
}, getInitialState(routerType))
342341
}
343-
344-
export const REACT_REFRESH_FULL_RELOAD =
345-
'[Fast Refresh] performing full reload\n\n' +
346-
"Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\n" +
347-
'You might have a file which exports a React component but also exports a value that is imported by a non-React component file.\n' +
348-
'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' +
349-
'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\n' +
350-
'Fast Refresh requires at least one parent function component in your React tree.'
351-
352-
export const REACT_REFRESH_FULL_RELOAD_FROM_ERROR =
353-
'[Fast Refresh] performing full reload because your application had an unrecoverable error'
354-
355-
export function reportInvalidHmrMessage(
356-
message: HMR_ACTION_TYPES | MessageEvent<unknown>,
357-
err: unknown
358-
) {
359-
console.warn(
360-
'[HMR] Invalid message: ' +
361-
JSON.stringify(message) +
362-
'\n' +
363-
((err instanceof Error && err?.stack) || '')
364-
)
365-
}

‎packages/next/src/client/components/router-reducer/fetch-server-response.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ export async function fetchServerResponse(
221221
// We need to ensure the Webpack runtime is updated before executing client-side JS of the new page.
222222
if (process.env.NODE_ENV !== 'production' && !process.env.TURBOPACK) {
223223
await (
224-
require('../react-dev-overlay/app/hot-reloader-client') as typeof import('../react-dev-overlay/app/hot-reloader-client')
224+
require('../../dev/hot-reloader/app/hot-reloader-app') as typeof import('../../dev/hot-reloader/app/hot-reloader-app')
225225
).waitForWebpackRuntimeHotUpdate()
226226
}
227227

‎packages/next/src/client/dev/amp-dev.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
/* globals __webpack_hash__ */
22
import { displayContent } from './fouc'
33
import initOnDemandEntries from './on-demand-entries-client'
4-
import {
5-
addMessageListener,
6-
connectHMR,
7-
} from '../components/react-dev-overlay/pages/websocket'
4+
import { addMessageListener, connectHMR } from './hot-reloader/pages/websocket'
85
import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../server/dev/hot-reloader-types'
9-
import { reportInvalidHmrMessage } from '../components/react-dev-overlay/shared'
6+
import { reportInvalidHmrMessage } from './hot-reloader/shared'
107

118
/// <reference types="webpack/module.d.ts" />
129

‎packages/next/src/client/dev/error-overlay/websocket.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
// next-contentlayer is relying on this internal path
22
// https://github.com/contentlayerdev/contentlayer/blob/2f491c540e1d3667577f57fa368b150bff427aaf/packages/next-contentlayer/src/hooks/useLiveReload.ts#L1
33
// Drop this file if https://github.com/contentlayerdev/contentlayer/pull/649 is merged/released
4-
export { addMessageListener } from '../../components/react-dev-overlay/pages/websocket'
4+
export { addMessageListener } from '../hot-reloader/pages/websocket'

‎packages/next/src/client/dev/hot-middleware-client.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import type {
22
NextRouter,
33
PrivateRouteInfo,
44
} from '../../shared/lib/router/router'
5-
import connect from '../components/react-dev-overlay/pages/hot-reloader-client'
6-
import { sendMessage } from '../components/react-dev-overlay/pages/websocket'
5+
import connect from './hot-reloader/pages/hot-reloader-pages'
6+
import { sendMessage } from './hot-reloader/pages/websocket'
77

88
// Define a local type for the window.next object
99
interface NextWindow {

‎packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx renamed to ‎packages/next/src/client/dev/hot-reloader/app/hot-reloader-app.tsx

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,32 @@
33
import type { ReactNode } from 'react'
44
import { useEffect, startTransition, useRef } from 'react'
55
import stripAnsi from 'next/dist/compiled/strip-ansi'
6-
import formatWebpackMessages from '../utils/format-webpack-messages'
7-
import { useRouter } from '../../navigation'
8-
import { REACT_REFRESH_FULL_RELOAD, reportInvalidHmrMessage } from '../shared'
6+
import formatWebpackMessages from '../../../components/react-dev-overlay/utils/format-webpack-messages'
7+
import { useRouter } from '../../../components/navigation'
8+
import { REACT_REFRESH_FULL_RELOAD } from '../shared'
9+
import { reportInvalidHmrMessage } from '../shared'
910
import { dispatcher } from 'next/dist/compiled/next-devtools'
10-
import { ReplaySsrOnlyErrors } from './replay-ssr-only-errors'
11-
import { AppDevOverlayErrorBoundary } from './app-dev-overlay-error-boundary'
12-
import { useErrorHandler } from '../../errors/use-error-handler'
13-
import { RuntimeErrorHandler } from '../../errors/runtime-error-handler'
11+
import { ReplaySsrOnlyErrors } from '../../../components/react-dev-overlay/app/replay-ssr-only-errors'
12+
import { AppDevOverlayErrorBoundary } from '../../../components/react-dev-overlay/app/app-dev-overlay-error-boundary'
13+
import { useErrorHandler } from '../../../components/errors/use-error-handler'
14+
import { RuntimeErrorHandler } from '../../../components/errors/runtime-error-handler'
1415
import {
1516
useSendMessage,
1617
useTurbopack,
1718
useWebsocket,
1819
useWebsocketPing,
19-
} from '../utils/use-websocket'
20+
} from './use-websocket'
2021
import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
2122
import type {
2223
HMR_ACTION_TYPES,
2324
TurbopackMsgToBrowser,
2425
} from '../../../../server/dev/hot-reloader-types'
2526
import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from '../shared'
26-
import { useUntrackedPathname } from '../../navigation-untracked'
27-
import type { GlobalErrorComponent } from '../../global-error'
28-
import reportHmrLatency from '../utils/report-hmr-latency'
29-
import { TurbopackHmr } from '../utils/turbopack-hot-reloader-common'
30-
import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../app-router-headers'
27+
import { useUntrackedPathname } from '../../../components/navigation-untracked'
28+
import type { GlobalErrorComponent } from '../../../components/global-error'
29+
import reportHmrLatency from '../../../components/react-dev-overlay/utils/report-hmr-latency'
30+
import { TurbopackHmr } from '../../../components/react-dev-overlay/utils/turbopack-hot-reloader-common'
31+
import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../../components/app-router-headers'
3132

3233
let mostRecentCompilationHash: any = null
3334
let __nextDevClientId = Math.round(Math.random() * 100 + Date.now())

‎packages/next/src/client/components/react-dev-overlay/utils/use-websocket.ts renamed to ‎packages/next/src/client/dev/hot-reloader/app/use-websocket.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useCallback, useContext, useEffect, useRef } from 'react'
22
import { GlobalLayoutRouterContext } from '../../../../shared/lib/app-router-context.shared-runtime'
3-
import { getSocketUrl } from './get-socket-url'
3+
import { getSocketUrl } from '../get-socket-url'
44
import type { TurbopackMsgToBrowser } from '../../../../server/dev/hot-reloader-types'
55

66
export function useWebsocket(assetPrefix: string) {

‎packages/next/src/client/components/react-dev-overlay/utils/get-socket-url.ts renamed to ‎packages/next/src/client/dev/hot-reloader/get-socket-url.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { normalizedAssetPrefix } from '../../../../shared/lib/normalized-asset-prefix'
1+
import { normalizedAssetPrefix } from '../../../shared/lib/normalized-asset-prefix'
22

33
function getSocketProtocol(assetPrefix: string): string {
44
let protocol = window.location.protocol

‎packages/next/src/client/components/react-dev-overlay/pages/hot-reloader-client.ts renamed to ‎packages/next/src/client/dev/hot-reloader/pages/hot-reloader-pages.ts

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,23 +43,21 @@ import {
4343
onDevIndicator,
4444
buildingIndicatorHide,
4545
buildingIndicatorShow,
46-
} from './client'
46+
} from '../../../components/react-dev-overlay/pages/client'
4747
import stripAnsi from 'next/dist/compiled/strip-ansi'
4848
import { addMessageListener, sendMessage } from './websocket'
49-
import formatWebpackMessages from '../utils/format-webpack-messages'
49+
import formatWebpackMessages from '../../../components/react-dev-overlay/utils/format-webpack-messages'
5050
import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
5151
import type {
5252
HMR_ACTION_TYPES,
5353
TurbopackMsgToBrowser,
5454
} from '../../../../server/dev/hot-reloader-types'
55-
import {
56-
REACT_REFRESH_FULL_RELOAD,
57-
REACT_REFRESH_FULL_RELOAD_FROM_ERROR,
58-
reportInvalidHmrMessage,
59-
} from '../shared'
60-
import { RuntimeErrorHandler } from '../../errors/runtime-error-handler'
61-
import reportHmrLatency from '../utils/report-hmr-latency'
62-
import { TurbopackHmr } from '../utils/turbopack-hot-reloader-common'
55+
import { REACT_REFRESH_FULL_RELOAD } from '../shared'
56+
import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from '../shared'
57+
import { reportInvalidHmrMessage } from '../shared'
58+
import { RuntimeErrorHandler } from '../../../components/errors/runtime-error-handler'
59+
import reportHmrLatency from '../../../components/react-dev-overlay/utils/report-hmr-latency'
60+
import { TurbopackHmr } from '../../../components/react-dev-overlay/utils/turbopack-hot-reloader-common'
6361

6462
// This alternative WebpackDevServer combines the functionality of:
6563
// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js

‎packages/next/src/client/components/react-dev-overlay/pages/websocket.ts renamed to ‎packages/next/src/client/dev/hot-reloader/pages/websocket.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
HMR_ACTIONS_SENT_TO_BROWSER,
33
type HMR_ACTION_TYPES,
44
} from '../../../../server/dev/hot-reloader-types'
5-
import { getSocketUrl } from '../utils/get-socket-url'
5+
import { getSocketUrl } from '../get-socket-url'
66

77
let source: WebSocket
88

‎packages/next/src/client/dev/hot-reloader/shared.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { HMR_ACTION_TYPES } from '../../../server/dev/hot-reloader-types'
2+
3+
export const REACT_REFRESH_FULL_RELOAD =
4+
'[Fast Refresh] performing full reload\n\n' +
5+
"Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\n" +
6+
'You might have a file which exports a React component but also exports a value that is imported by a non-React component file.\n' +
7+
'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' +
8+
'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\n' +
9+
'Fast Refresh requires at least one parent function component in your React tree.'
10+
11+
export const REACT_REFRESH_FULL_RELOAD_FROM_ERROR =
12+
'[Fast Refresh] performing full reload because your application had an unrecoverable error'
13+
14+
export function reportInvalidHmrMessage(
15+
message: HMR_ACTION_TYPES | MessageEvent<unknown>,
16+
err: unknown
17+
) {
18+
console.warn(
19+
'[HMR] Invalid message: ' +
20+
JSON.stringify(message) +
21+
'\n' +
22+
((err instanceof Error && err?.stack) || '')
23+
)
24+
}

‎packages/next/src/client/dev/on-demand-entries-client.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Router from '../router'
2-
import { sendMessage } from '../components/react-dev-overlay/pages/websocket'
2+
import { sendMessage } from './hot-reloader/pages/websocket'
33

44
export default async (page?: string) => {
55
// Never send pings when using Turbopack as it's not used.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import { displayContent } from './dev/fouc'
55
import {
66
connectHMR,
77
addMessageListener,
8-
} from './components/react-dev-overlay/pages/websocket'
8+
} from './dev/hot-reloader/pages/websocket'
99
import {
1010
assign,
1111
urlQueryToSearchParams,
1212
} from '../shared/lib/router/utils/querystring'
1313
import { HMR_ACTIONS_SENT_TO_BROWSER } from '../server/dev/hot-reloader-types'
1414
import { RuntimeErrorHandler } from './components/errors/runtime-error-handler'
15-
import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from './components/react-dev-overlay/shared'
16-
import { performFullReload } from './components/react-dev-overlay/pages/hot-reloader-client'
15+
import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from './dev/hot-reloader/shared'
16+
import { performFullReload } from './dev/hot-reloader/pages/hot-reloader-pages'
1717
import {
1818
buildingIndicatorHide,
1919
buildingIndicatorShow,

‎packages/next/src/client/tracing/report-to-socket.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { sendMessage } from '../components/react-dev-overlay/pages/websocket'
1+
import { sendMessage } from '../dev/hot-reloader/pages/websocket'
22
import type { Span } from './tracer'
33

44
export default function reportToSocket(span: Span) {

0 commit comments

Comments
 (0)