Skip to content

refactor: Consistently call HMR messages message #83341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
unstubbable merged 1 commit into from
Sep 2, 2025
Merged

refactor: Consistently call HMR messages message #83341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/next/src/client/dev/amp-dev.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { displayContent } from './fouc'
import initOnDemandEntries from './on-demand-entries-client'
import { addMessageListener, connectHMR } from './hot-reloader/pages/websocket'
import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../server/dev/hot-reloader-types'
import { HMR_MESSAGE_SENT_TO_BROWSER } from '../../server/dev/hot-reloader-types'
import { reportInvalidHmrMessage } from './hot-reloader/shared'

/// <reference types="webpack/module.d.ts" />
Expand Down Expand Up @@ -78,23 +78,23 @@ async function tryApplyUpdates() {

addMessageListener((message) => {
try {
// actions which are not related to amp-dev
// messages which are not related to amp-dev
if (
message.action === HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ERROR ||
message.action === HMR_ACTIONS_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE
message.type === HMR_MESSAGE_SENT_TO_BROWSER.SERVER_ERROR ||
message.type === HMR_MESSAGE_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE
) {
return
}
if (
message.action === HMR_ACTIONS_SENT_TO_BROWSER.SYNC ||
message.action === HMR_ACTIONS_SENT_TO_BROWSER.BUILT
message.type === HMR_MESSAGE_SENT_TO_BROWSER.SYNC ||
message.type === HMR_MESSAGE_SENT_TO_BROWSER.BUILT
) {
if (!message.hash) {
return
}
mostRecentHash = message.hash
tryApplyUpdates()
} else if (message.action === HMR_ACTIONS_SENT_TO_BROWSER.RELOAD_PAGE) {
} else if (message.type === HMR_MESSAGE_SENT_TO_BROWSER.RELOAD_PAGE) {
window.location.reload()
}
} catch (err: unknown) {
Expand Down
25 changes: 11 additions & 14 deletions packages/next/src/client/dev/hot-middleware-client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { HMR_MESSAGE_SENT_TO_BROWSER } from '../../server/dev/hot-reloader-types'
import type {
NextRouter,
PrivateRouteInfo,
Expand All @@ -23,7 +24,7 @@ let reloading = false
export default () => {
const devClient = connect()

devClient.subscribeToHmrEvent((obj: any) => {
devClient.subscribeToHmrEvent((message) => {
if (reloading) return

// Retrieve the router if it's available
Expand All @@ -33,8 +34,8 @@ export default () => {
const isOnErrorPage =
!router || router.pathname === '/404' || router.pathname === '/_error'

switch (obj.action) {
case 'reloadPage': {
switch (message.type) {
case HMR_MESSAGE_SENT_TO_BROWSER.RELOAD_PAGE: {
sendMessage(
JSON.stringify({
event: 'client-reload-page',
Expand All @@ -44,8 +45,8 @@ export default () => {
reloading = true
return window.location.reload()
}
case 'removedPage': {
const [page] = obj.data
case HMR_MESSAGE_SENT_TO_BROWSER.REMOVED_PAGE: {
const [page] = message.data

// Check if the removed page is the current page
const isCurrentPage = page === router?.pathname
Expand All @@ -64,15 +65,15 @@ export default () => {
}
return
}
case 'addedPage': {
const [page] = obj.data
case HMR_MESSAGE_SENT_TO_BROWSER.ADDED_PAGE: {
const [page] = message.data

// Check if the added page is the current page
const isCurrentPage = page === router?.pathname

// Check if the page component is not yet loaded
const isPageNotLoaded =
typeof router?.components?.[page] === 'undefined'
page !== null && typeof router?.components?.[page] === 'undefined'

// We enter this block if the newly added page is the one currently being viewed
// but hasn't been loaded yet, or if we're on an error page.
Expand All @@ -88,15 +89,11 @@ export default () => {
}
return
}
case 'serverError':
case 'devPagesManifestUpdate':
case 'isrManifest':
case 'building':
case 'finishBuilding': {
case HMR_MESSAGE_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE: {
return
}
default: {
throw new Error('Unexpected action ' + obj.action)
message satisfies never
}
}
})
Expand Down
95 changes: 49 additions & 46 deletions packages/next/src/client/dev/hot-reloader/app/hot-reloader-app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ import { AppDevOverlayErrorBoundary } from '../../../../next-devtools/userspace/
import { useErrorHandler } from '../../../../next-devtools/userspace/app/errors/use-error-handler'
import { RuntimeErrorHandler } from '../../runtime-error-handler'
import { useWebSocketPing } from './web-socket'
import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
import { HMR_MESSAGE_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
import type {
HMR_ACTION_TYPES,
TurbopackMsgToBrowser,
HmrMessageSentToBrowser,
TurbopackMessageSentToBrowser,
} from '../../../../server/dev/hot-reloader-types'
import { useUntrackedPathname } from '../../../components/navigation-untracked'
import reportHmrLatency from '../../report-hmr-latency'
Expand Down Expand Up @@ -197,9 +197,9 @@ function tryApplyUpdatesWebpack(sendMessage: (message: string) => void) {

/** Handles messages from the server for the App Router. */
export function processMessage(
obj: HMR_ACTION_TYPES,
message: HmrMessageSentToBrowser,
sendMessage: (message: string) => void,
processTurbopackMessage: (msg: TurbopackMsgToBrowser) => void,
processTurbopackMessage: (msg: TurbopackMessageSentToBrowser) => void,
staticIndicatorState: StaticIndicatorState
) {
function handleErrors(errors: ReadonlyArray<unknown>) {
Expand Down Expand Up @@ -246,18 +246,18 @@ export function processMessage(
}
}

switch (obj.action) {
case HMR_ACTIONS_SENT_TO_BROWSER.ISR_MANIFEST: {
switch (message.type) {
case HMR_MESSAGE_SENT_TO_BROWSER.ISR_MANIFEST: {
if (process.env.__NEXT_DEV_INDICATOR) {
staticIndicatorState.appIsrManifest = obj.data
staticIndicatorState.appIsrManifest = message.data

// handle initial status on receiving manifest
// navigation is handled in useEffect for pathname changes
// as we'll receive the updated manifest before usePathname
// triggers for new value
if (
staticIndicatorState.pathname &&
staticIndicatorState.pathname in obj.data
staticIndicatorState.pathname in message.data
) {
dispatcher.onStaticIndicator(true)
} else {
Expand All @@ -266,7 +266,7 @@ export function processMessage(
}
break
}
case HMR_ACTIONS_SENT_TO_BROWSER.BUILDING: {
case HMR_MESSAGE_SENT_TO_BROWSER.BUILDING: {
dispatcher.buildingIndicatorShow()

if (process.env.TURBOPACK) {
Expand All @@ -278,22 +278,25 @@ export function processMessage(
}
break
}
case HMR_ACTIONS_SENT_TO_BROWSER.BUILT:
case HMR_ACTIONS_SENT_TO_BROWSER.SYNC: {
case HMR_MESSAGE_SENT_TO_BROWSER.BUILT:
case HMR_MESSAGE_SENT_TO_BROWSER.SYNC: {
dispatcher.buildingIndicatorHide()

if (obj.hash) {
handleAvailableHash(obj.hash)
if (message.hash) {
handleAvailableHash(message.hash)
}

const { errors, warnings } = obj
const { errors, warnings } = message

// Is undefined when it's a 'built' event
if ('versionInfo' in obj) dispatcher.onVersionInfo(obj.versionInfo)
if ('debug' in obj && obj.debug) dispatcher.onDebugInfo(obj.debug)
if ('devIndicator' in obj) dispatcher.onDevIndicator(obj.devIndicator)
if ('devToolsConfig' in obj)
dispatcher.onDevToolsConfig(obj.devToolsConfig)
if ('versionInfo' in message)
dispatcher.onVersionInfo(message.versionInfo)
if ('debug' in message && message.debug)
dispatcher.onDebugInfo(message.debug)
if ('devIndicator' in message)
dispatcher.onDevIndicator(message.devIndicator)
if ('devToolsConfig' in message)
dispatcher.onDevToolsConfig(message.devToolsConfig)

const hasErrors = Boolean(errors && errors.length)
// Compilation with errors (e.g. syntax error or missing modules).
Expand Down Expand Up @@ -347,26 +350,26 @@ export function processMessage(
})
)

if (obj.action === HMR_ACTIONS_SENT_TO_BROWSER.BUILT) {
if (message.type === HMR_MESSAGE_SENT_TO_BROWSER.BUILT) {
handleHotUpdate()
}
return
}
case HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_CONNECTED: {
case HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED: {
processTurbopackMessage({
type: HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_CONNECTED,
type: HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED,
data: {
sessionId: obj.data.sessionId,
sessionId: message.data.sessionId,
},
})
break
}
case HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_MESSAGE: {
turbopackHmr!.onTurbopackMessage(obj)
case HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_MESSAGE: {
turbopackHmr!.onTurbopackMessage(message)
dispatcher.onBeforeRefresh()
processTurbopackMessage({
type: HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_MESSAGE,
data: obj.data,
type: HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_MESSAGE,
data: message.data,
})
if (RuntimeErrorHandler.hadRuntimeError) {
console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR)
Expand All @@ -376,19 +379,19 @@ export function processMessage(
break
}
// TODO-APP: make server component change more granular
case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_COMPONENT_CHANGES: {
case HMR_MESSAGE_SENT_TO_BROWSER.SERVER_COMPONENT_CHANGES: {
turbopackHmr?.onServerComponentChanges()
sendMessage(
JSON.stringify({
event: 'server-component-reload-page',
clientId: __nextDevClientId,
hash: obj.hash,
hash: message.hash,
})
)

// Store the latest hash in a session cookie so that it's sent back to the
// server with any subsequent requests.
document.cookie = `${NEXT_HMR_REFRESH_HASH_COOKIE}=${obj.hash};path=/`
document.cookie = `${NEXT_HMR_REFRESH_HASH_COOKIE}=${message.hash};path=/`

if (
RuntimeErrorHandler.hadRuntimeError ||
Expand All @@ -413,7 +416,7 @@ export function processMessage(

return
}
case HMR_ACTIONS_SENT_TO_BROWSER.RELOAD_PAGE: {
case HMR_MESSAGE_SENT_TO_BROWSER.RELOAD_PAGE: {
turbopackHmr?.onReloadPage()
sendMessage(
JSON.stringify({
Expand All @@ -425,36 +428,36 @@ export function processMessage(
reloading = true
return window.location.reload()
}
case HMR_ACTIONS_SENT_TO_BROWSER.ADDED_PAGE:
case HMR_ACTIONS_SENT_TO_BROWSER.REMOVED_PAGE: {
case HMR_MESSAGE_SENT_TO_BROWSER.ADDED_PAGE:
case HMR_MESSAGE_SENT_TO_BROWSER.REMOVED_PAGE: {
turbopackHmr?.onPageAddRemove()
// TODO-APP: potentially only refresh if the currently viewed page was added/removed.
return publicAppRouterInstance.hmrRefresh()
}
case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ERROR: {
const { errorJSON } = obj
case HMR_MESSAGE_SENT_TO_BROWSER.SERVER_ERROR: {
const { errorJSON } = message
if (errorJSON) {
const { message, stack } = JSON.parse(errorJSON)
const error = new Error(message)
error.stack = stack
const errorObject = JSON.parse(errorJSON)
const error = new Error(errorObject.message)
error.stack = errorObject.stack
handleErrors([error])
}
return
}
case HMR_ACTIONS_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE: {
case HMR_MESSAGE_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE: {
return
}
case HMR_ACTIONS_SENT_TO_BROWSER.DEVTOOLS_CONFIG: {
dispatcher.onDevToolsConfig(obj.data)
case HMR_MESSAGE_SENT_TO_BROWSER.DEVTOOLS_CONFIG: {
dispatcher.onDevToolsConfig(message.data)
return
}
case HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES:
case HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES:
case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES:
case HMR_MESSAGE_SENT_TO_BROWSER.MIDDLEWARE_CHANGES:
case HMR_MESSAGE_SENT_TO_BROWSER.CLIENT_CHANGES:
case HMR_MESSAGE_SENT_TO_BROWSER.SERVER_ONLY_CHANGES:
// These action types are handled in src/client/page-bootstrap.ts
break
default: {
obj satisfies never
message satisfies never
}
}
}
Expand Down
16 changes: 8 additions & 8 deletions packages/next/src/client/dev/hot-reloader/app/web-socket.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useContext, useEffect } from 'react'
import { GlobalLayoutRouterContext } from '../../../../shared/lib/app-router-context.shared-runtime'
import { getSocketUrl } from '../get-socket-url'
import type { TurbopackMsgToBrowser } from '../../../../server/dev/hot-reloader-types'
import type { TurbopackMessageSentToBrowser } from '../../../../server/dev/hot-reloader-types'
import { reportInvalidHmrMessage } from '../shared'
import {
performFullReload,
Expand Down Expand Up @@ -37,9 +37,9 @@ export function createWebSocket(

webSocket.addEventListener('message', (event) => {
try {
const obj = JSON.parse(event.data)
const message = JSON.parse(event.data)
processMessage(
obj,
message,
sendMessage,
processTurbopackMessage,
staticIndicatorState
Expand All @@ -54,15 +54,15 @@ export function createWebSocket(

export function createProcessTurbopackMessage(
sendMessage: (data: string) => void
): (msg: TurbopackMsgToBrowser) => void {
): (msg: TurbopackMessageSentToBrowser) => void {
if (!process.env.TURBOPACK) {
return () => {}
}

let queue: TurbopackMsgToBrowser[] = []
let callback: ((msg: TurbopackMsgToBrowser) => void) | undefined
let queue: TurbopackMessageSentToBrowser[] = []
let callback: ((msg: TurbopackMessageSentToBrowser) => void) | undefined

const processTurbopackMessage = (msg: TurbopackMsgToBrowser) => {
const processTurbopackMessage = (msg: TurbopackMessageSentToBrowser) => {
if (callback) {
callback(msg)
} else {
Expand All @@ -75,7 +75,7 @@ export function createProcessTurbopackMessage(
'@vercel/turbopack-ecmascript-runtime/browser/dev/hmr-client/hmr-client.ts'
).then(({ connect }) => {
connect({
addMessageListener(cb: (msg: TurbopackMsgToBrowser) => void) {
addMessageListener(cb: (msg: TurbopackMessageSentToBrowser) => void) {
callback = cb

// Replay all Turbopack messages before we were able to establish the HMR client.
Expand Down
Loading
Loading