75748caf7f
This replaces the server-sent events HMR connection with a WebSocket connection to prevent hitting browser connection limits, allow sending events back from the browser, and overall better performance. This approach sets up the the `upgrade` event listener on the server immediately when created via `next dev` and on the first request using `req.socket.server` when created via a custom server. In a follow-up PR we can push the files changed via the WebSocket as well. x-ref: https://github.com/vercel/next.js/issues/10061 x-ref: https://github.com/vercel/next.js/issues/8064 x-ref: https://github.com/vercel/next.js/issues/4495 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes
94 lines
2.7 KiB
JavaScript
94 lines
2.7 KiB
JavaScript
/* globals __webpack_hash__ */
|
|
import { displayContent } from './fouc'
|
|
import initOnDemandEntries from './on-demand-entries-client'
|
|
import { addMessageListener, connectHMR } from './error-overlay/websocket'
|
|
|
|
const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent)
|
|
let { assetPrefix, page } = data
|
|
assetPrefix = assetPrefix || ''
|
|
let mostRecentHash = null
|
|
/* eslint-disable-next-line */
|
|
let curHash = __webpack_hash__
|
|
const hotUpdatePath =
|
|
assetPrefix + (assetPrefix.endsWith('/') ? '' : '/') + '_next/static/webpack/'
|
|
|
|
// Is there a newer version of this code available?
|
|
function isUpdateAvailable() {
|
|
// __webpack_hash__ is the hash of the current compilation.
|
|
// It's a global variable injected by Webpack.
|
|
/* eslint-disable-next-line */
|
|
return mostRecentHash !== __webpack_hash__
|
|
}
|
|
|
|
// Webpack disallows updates in other states.
|
|
function canApplyUpdates() {
|
|
return module.hot.status() === 'idle'
|
|
}
|
|
|
|
// This function reads code updates on the fly and hard
|
|
// reloads the page when it has changed.
|
|
async function tryApplyUpdates() {
|
|
if (!isUpdateAvailable() || !canApplyUpdates()) {
|
|
return
|
|
}
|
|
try {
|
|
const res = await fetch(
|
|
typeof __webpack_runtime_id__ !== 'undefined'
|
|
? // eslint-disable-next-line no-undef
|
|
`${hotUpdatePath}${curHash}.${__webpack_runtime_id__}.hot-update.json`
|
|
: `${hotUpdatePath}${curHash}.hot-update.json`
|
|
)
|
|
const jsonData = await res.json()
|
|
const curPage = page === '/' ? 'index' : page
|
|
// webpack 5 uses an array instead
|
|
const pageUpdated = (
|
|
Array.isArray(jsonData.c) ? jsonData.c : Object.keys(jsonData.c)
|
|
).some((mod) => {
|
|
return (
|
|
mod.indexOf(
|
|
`pages${curPage.substr(0, 1) === '/' ? curPage : `/${curPage}`}`
|
|
) !== -1 ||
|
|
mod.indexOf(
|
|
`pages${
|
|
curPage.substr(0, 1) === '/' ? curPage : `/${curPage}`
|
|
}`.replace(/\//g, '\\')
|
|
) !== -1
|
|
)
|
|
})
|
|
|
|
if (pageUpdated) {
|
|
document.location.reload(true)
|
|
} else {
|
|
curHash = mostRecentHash
|
|
}
|
|
} catch (err) {
|
|
console.error('Error occurred checking for update', err)
|
|
document.location.reload(true)
|
|
}
|
|
}
|
|
|
|
addMessageListener((event) => {
|
|
if (event.data === '\uD83D\uDC93') {
|
|
return
|
|
}
|
|
|
|
try {
|
|
const message = JSON.parse(event.data)
|
|
|
|
if (message.action === 'sync' || message.action === 'built') {
|
|
if (!message.hash) {
|
|
return
|
|
}
|
|
mostRecentHash = message.hash
|
|
tryApplyUpdates()
|
|
} else if (message.action === 'reloadPage') {
|
|
document.location.reload(true)
|
|
}
|
|
} catch (ex) {
|
|
console.warn('Invalid HMR message: ' + event.data + '\n' + ex)
|
|
}
|
|
})
|
|
|
|
connectHMR({ path: `${assetPrefix}/_next/webpack-hmr` })
|
|
displayContent()
|
|
initOnDemandEntries()
|