.
This commit is contained in:
Kismet Hasanaj
+482
@@ -0,0 +1,482 @@
|
||||
/// <reference types="webpack/module.d.ts" />
|
||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { useEffect, startTransition } from 'react';
|
||||
import stripAnsi from 'next/dist/compiled/strip-ansi';
|
||||
import formatWebpackMessages from '../../../../shared/lib/format-webpack-messages';
|
||||
import { REACT_REFRESH_FULL_RELOAD, REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from '../shared';
|
||||
import { dispatcher, getSerializedOverlayState, getSegmentTrieData } from 'next/dist/compiled/next-devtools';
|
||||
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 { useWebSocketPing } from './web-socket';
|
||||
import { HMR_MESSAGE_SENT_TO_BROWSER, HMR_MESSAGE_SENT_TO_SERVER } from '../../../../server/dev/hot-reloader-types';
|
||||
import { useUntrackedPathname } from '../../../components/navigation-untracked';
|
||||
import reportHmrLatency from '../../report-hmr-latency';
|
||||
import { TurbopackHmr } from '../turbopack-hot-reloader-common';
|
||||
import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../../components/app-router-headers';
|
||||
import { publicAppRouterInstance } from '../../../components/app-router-instance';
|
||||
import { InvariantError } from '../../../../shared/lib/invariant-error';
|
||||
import { getOrCreateDebugChannelReadableWriterPair } from '../../debug-channel';
|
||||
// TODO: Explicitly import from client.browser (doesn't work with Webpack).
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { createFromReadableStream as createFromReadableStreamBrowser } from 'react-server-dom-webpack/client';
|
||||
import { findSourceMapURL } from '../../../app-find-source-map-url';
|
||||
const createFromReadableStream = createFromReadableStreamBrowser;
|
||||
let mostRecentCompilationHash = null;
|
||||
let __nextDevClientId = Math.round(Math.random() * 100 + Date.now());
|
||||
let reloading = false;
|
||||
let webpackStartMsSinceEpoch = null;
|
||||
const turbopackHmr = process.env.TURBOPACK ? new TurbopackHmr() : null;
|
||||
let pendingHotUpdateWebpack = Promise.resolve();
|
||||
let resolvePendingHotUpdateWebpack = ()=>{};
|
||||
function setPendingHotUpdateWebpack() {
|
||||
pendingHotUpdateWebpack = new Promise((resolve)=>{
|
||||
resolvePendingHotUpdateWebpack = ()=>{
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
}
|
||||
export function waitForWebpackRuntimeHotUpdate() {
|
||||
return pendingHotUpdateWebpack;
|
||||
}
|
||||
// There is a newer version of the code available.
|
||||
function handleAvailableHash(hash) {
|
||||
// Update last known compilation hash.
|
||||
mostRecentCompilationHash = hash;
|
||||
}
|
||||
/**
|
||||
* Is there a newer version of this code available?
|
||||
* For webpack: Check if the hash changed compared to __webpack_hash__
|
||||
* For Turbopack: Always true because it doesn't have __webpack_hash__
|
||||
*/ function isUpdateAvailable() {
|
||||
if (process.env.TURBOPACK) {
|
||||
return true;
|
||||
}
|
||||
/* globals __webpack_hash__ */ // __webpack_hash__ is the hash of the current compilation.
|
||||
// It's a global variable injected by Webpack.
|
||||
return mostRecentCompilationHash !== __webpack_hash__;
|
||||
}
|
||||
// Webpack disallows updates in other states.
|
||||
function canApplyUpdates() {
|
||||
return module.hot.status() === 'idle';
|
||||
}
|
||||
function afterApplyUpdates(fn) {
|
||||
if (canApplyUpdates()) {
|
||||
fn();
|
||||
} else {
|
||||
function handler(status) {
|
||||
if (status === 'idle') {
|
||||
module.hot.removeStatusHandler(handler);
|
||||
fn();
|
||||
}
|
||||
}
|
||||
module.hot.addStatusHandler(handler);
|
||||
}
|
||||
}
|
||||
export function performFullReload(err, sendMessage) {
|
||||
const stackTrace = err && (err.stack && err.stack.split('\n').slice(0, 5).join('\n') || err.message || err + '');
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-full-reload',
|
||||
stackTrace,
|
||||
hadRuntimeError: !!RuntimeErrorHandler.hadRuntimeError,
|
||||
dependencyChain: err ? err.dependencyChain : undefined
|
||||
}));
|
||||
if (reloading) return;
|
||||
reloading = true;
|
||||
window.location.reload();
|
||||
}
|
||||
// Attempt to update code on the fly, fall back to a hard reload.
|
||||
function tryApplyUpdatesWebpack(sendMessage) {
|
||||
if (!isUpdateAvailable() || !canApplyUpdates()) {
|
||||
resolvePendingHotUpdateWebpack();
|
||||
dispatcher.onBuildOk();
|
||||
reportHmrLatency(sendMessage, [], webpackStartMsSinceEpoch, Date.now());
|
||||
return;
|
||||
}
|
||||
function handleApplyUpdates(err, updatedModules) {
|
||||
if (err || RuntimeErrorHandler.hadRuntimeError || updatedModules == null) {
|
||||
if (err) {
|
||||
console.warn(REACT_REFRESH_FULL_RELOAD);
|
||||
} else if (RuntimeErrorHandler.hadRuntimeError) {
|
||||
console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR);
|
||||
}
|
||||
performFullReload(err, sendMessage);
|
||||
return;
|
||||
}
|
||||
dispatcher.onBuildOk();
|
||||
if (isUpdateAvailable()) {
|
||||
// While we were updating, there was a new update! Do it again.
|
||||
tryApplyUpdatesWebpack(sendMessage);
|
||||
return;
|
||||
}
|
||||
dispatcher.onRefresh();
|
||||
resolvePendingHotUpdateWebpack();
|
||||
reportHmrLatency(sendMessage, updatedModules, webpackStartMsSinceEpoch, Date.now());
|
||||
if (process.env.__NEXT_TEST_MODE) {
|
||||
afterApplyUpdates(()=>{
|
||||
if (self.__NEXT_HMR_CB) {
|
||||
self.__NEXT_HMR_CB();
|
||||
self.__NEXT_HMR_CB = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// https://webpack.js.org/api/hot-module-replacement/#check
|
||||
module.hot.check(/* autoApply */ false).then((updatedModules)=>{
|
||||
if (updatedModules == null) {
|
||||
return null;
|
||||
}
|
||||
// We should always handle an update, even if updatedModules is empty (but
|
||||
// non-null) for any reason. That's what webpack would normally do:
|
||||
// https://github.com/webpack/webpack/blob/3aa6b6bc3a64/lib/hmr/HotModuleReplacement.runtime.js#L296-L298
|
||||
dispatcher.onBeforeRefresh();
|
||||
// https://webpack.js.org/api/hot-module-replacement/#apply
|
||||
return module.hot.apply();
|
||||
}).then((updatedModules)=>{
|
||||
handleApplyUpdates(null, updatedModules);
|
||||
}, (err)=>{
|
||||
handleApplyUpdates(err, null);
|
||||
});
|
||||
}
|
||||
/** Handles messages from the server for the App Router. */ export function processMessage(message, sendMessage, processTurbopackMessage, staticIndicatorState) {
|
||||
function handleErrors(errors) {
|
||||
// "Massage" webpack messages.
|
||||
const formatted = formatWebpackMessages({
|
||||
errors: errors,
|
||||
warnings: []
|
||||
});
|
||||
// Only show the first error.
|
||||
dispatcher.onBuildError(formatted.errors[0]);
|
||||
// Also log them to the console.
|
||||
for(let i = 0; i < formatted.errors.length; i++){
|
||||
console.error(stripAnsi(formatted.errors[i]));
|
||||
}
|
||||
// Do not attempt to reload now.
|
||||
// We will reload on next success instead.
|
||||
if (process.env.__NEXT_TEST_MODE) {
|
||||
if (self.__NEXT_HMR_CB) {
|
||||
self.__NEXT_HMR_CB(formatted.errors[0]);
|
||||
self.__NEXT_HMR_CB = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleHotUpdate() {
|
||||
if (process.env.TURBOPACK) {
|
||||
const hmrUpdate = turbopackHmr.onBuilt();
|
||||
if (hmrUpdate != null) {
|
||||
reportHmrLatency(sendMessage, [
|
||||
...hmrUpdate.updatedModules
|
||||
], hmrUpdate.startMsSinceEpoch, hmrUpdate.endMsSinceEpoch, // suppress the `client-hmr-latency` event if the update was a no-op:
|
||||
hmrUpdate.hasUpdates);
|
||||
}
|
||||
dispatcher.onBuildOk();
|
||||
} else {
|
||||
tryApplyUpdatesWebpack(sendMessage);
|
||||
}
|
||||
}
|
||||
switch(message.type){
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.ISR_MANIFEST:
|
||||
{
|
||||
if (process.env.__NEXT_DEV_INDICATOR) {
|
||||
staticIndicatorState.appIsrManifest = message.data;
|
||||
// Handle the initial static indicator status on receiving the ISR
|
||||
// manifest. Navigation is handled in an effect inside HotReload for
|
||||
// pathname changes as we'll receive the updated manifest before
|
||||
// usePathname triggers for a new value.
|
||||
const isStatic = staticIndicatorState.pathname ? message.data[staticIndicatorState.pathname] : undefined;
|
||||
dispatcher.onStaticIndicator(isStatic === undefined ? 'pending' : isStatic ? 'static' : 'dynamic');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.BUILDING:
|
||||
{
|
||||
dispatcher.buildingIndicatorShow();
|
||||
if (process.env.TURBOPACK) {
|
||||
turbopackHmr.onBuilding();
|
||||
} else {
|
||||
webpackStartMsSinceEpoch = Date.now();
|
||||
setPendingHotUpdateWebpack();
|
||||
console.log('[Fast Refresh] rebuilding');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.BUILT:
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.SYNC:
|
||||
{
|
||||
dispatcher.buildingIndicatorHide();
|
||||
if (message.hash) {
|
||||
handleAvailableHash(message.hash);
|
||||
}
|
||||
const { errors, warnings } = message;
|
||||
// Is undefined when it's a 'built' event
|
||||
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).
|
||||
if (hasErrors) {
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-error',
|
||||
errorCount: errors.length,
|
||||
clientId: __nextDevClientId
|
||||
}));
|
||||
handleErrors(errors);
|
||||
return;
|
||||
}
|
||||
const hasWarnings = Boolean(warnings && warnings.length);
|
||||
if (hasWarnings) {
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-warning',
|
||||
warningCount: warnings.length,
|
||||
clientId: __nextDevClientId
|
||||
}));
|
||||
// Print warnings to the console.
|
||||
const formattedMessages = formatWebpackMessages({
|
||||
warnings: warnings,
|
||||
errors: []
|
||||
});
|
||||
for(let i = 0; i < formattedMessages.warnings.length; i++){
|
||||
if (i === 5) {
|
||||
console.warn('There were more warnings in other files.\n' + 'You can find a complete log in the terminal.');
|
||||
break;
|
||||
}
|
||||
console.warn(stripAnsi(formattedMessages.warnings[i]));
|
||||
}
|
||||
// No early return here as we need to apply modules in the same way between warnings only and compiles without warnings
|
||||
}
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-success',
|
||||
clientId: __nextDevClientId
|
||||
}));
|
||||
if (message.type === HMR_MESSAGE_SENT_TO_BROWSER.BUILT) {
|
||||
handleHotUpdate();
|
||||
}
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED:
|
||||
{
|
||||
processTurbopackMessage({
|
||||
type: HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED,
|
||||
data: {
|
||||
sessionId: message.data.sessionId
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_MESSAGE:
|
||||
{
|
||||
turbopackHmr.onTurbopackMessage(message);
|
||||
dispatcher.onBeforeRefresh();
|
||||
processTurbopackMessage({
|
||||
type: HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_MESSAGE,
|
||||
data: message.data
|
||||
});
|
||||
if (RuntimeErrorHandler.hadRuntimeError) {
|
||||
console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR);
|
||||
performFullReload(null, sendMessage);
|
||||
}
|
||||
dispatcher.onRefresh();
|
||||
break;
|
||||
}
|
||||
// TODO-APP: make server component change more granular
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.SERVER_COMPONENT_CHANGES:
|
||||
{
|
||||
turbopackHmr?.onServerComponentChanges();
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'server-component-reload-page',
|
||||
clientId: __nextDevClientId,
|
||||
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}=${message.hash};path=/`;
|
||||
if (RuntimeErrorHandler.hadRuntimeError || document.documentElement.id === '__next_error__') {
|
||||
if (reloading) return;
|
||||
reloading = true;
|
||||
return window.location.reload();
|
||||
}
|
||||
startTransition(()=>{
|
||||
publicAppRouterInstance.hmrRefresh();
|
||||
dispatcher.onRefresh();
|
||||
});
|
||||
if (process.env.__NEXT_TEST_MODE) {
|
||||
if (self.__NEXT_HMR_CB) {
|
||||
self.__NEXT_HMR_CB();
|
||||
self.__NEXT_HMR_CB = null;
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.RELOAD_PAGE:
|
||||
{
|
||||
turbopackHmr?.onReloadPage();
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-reload-page',
|
||||
clientId: __nextDevClientId
|
||||
}));
|
||||
if (reloading) return;
|
||||
reloading = true;
|
||||
return window.location.reload();
|
||||
}
|
||||
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_MESSAGE_SENT_TO_BROWSER.SERVER_ERROR:
|
||||
{
|
||||
const { errorJSON } = message;
|
||||
if (errorJSON) {
|
||||
const errorObject = JSON.parse(errorJSON);
|
||||
const error = Object.defineProperty(new Error(errorObject.message), "__NEXT_ERROR_CODE", {
|
||||
value: "E394",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
error.stack = errorObject.stack;
|
||||
handleErrors([
|
||||
error
|
||||
]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE:
|
||||
{
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.DEVTOOLS_CONFIG:
|
||||
{
|
||||
dispatcher.onDevToolsConfig(message.data);
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK:
|
||||
{
|
||||
const { requestId, chunk } = message;
|
||||
const { writer } = getOrCreateDebugChannelReadableWriterPair(requestId);
|
||||
if (chunk) {
|
||||
writer.ready.then(()=>writer.write(chunk)).catch(console.error);
|
||||
} else {
|
||||
// A null chunk signals that no more chunks will be sent, which allows
|
||||
// us to close the writer.
|
||||
// TODO: Revisit this cleanup logic when we integrate the return channel
|
||||
// that keeps the connection open to be able to lazily retrieve debug
|
||||
// objects.
|
||||
writer.ready.then(()=>writer.close()).catch(console.error);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_CURRENT_ERROR_STATE:
|
||||
{
|
||||
const errorState = getSerializedOverlayState();
|
||||
const response = {
|
||||
event: HMR_MESSAGE_SENT_TO_SERVER.MCP_ERROR_STATE_RESPONSE,
|
||||
requestId: message.requestId,
|
||||
errorState,
|
||||
url: window.location.href
|
||||
};
|
||||
sendMessage(JSON.stringify(response));
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_PAGE_METADATA:
|
||||
{
|
||||
const segmentTrieData = getSegmentTrieData();
|
||||
const response = {
|
||||
event: HMR_MESSAGE_SENT_TO_SERVER.MCP_PAGE_METADATA_RESPONSE,
|
||||
requestId: message.requestId,
|
||||
segmentTrieData,
|
||||
url: window.location.href
|
||||
};
|
||||
sendMessage(JSON.stringify(response));
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.CACHE_INDICATOR:
|
||||
{
|
||||
dispatcher.onCacheIndicator(message.state);
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER:
|
||||
{
|
||||
createFromReadableStream(new ReadableStream({
|
||||
start (controller) {
|
||||
controller.enqueue(message.serializedErrors);
|
||||
controller.close();
|
||||
}
|
||||
}), {
|
||||
findSourceMapURL
|
||||
}).then(({ errors, errorCodes })=>{
|
||||
for (const error of errors){
|
||||
const code = errorCodes.get(error);
|
||||
if (code !== undefined) {
|
||||
Object.defineProperty(error, '__NEXT_ERROR_CODE', {
|
||||
value: code,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
console.error(error);
|
||||
}
|
||||
}, (err)=>{
|
||||
console.error(Object.defineProperty(new Error('Failed to deserialize errors.', {
|
||||
cause: err
|
||||
}), "__NEXT_ERROR_CODE", {
|
||||
value: "E946",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
}));
|
||||
});
|
||||
return;
|
||||
}
|
||||
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:
|
||||
break;
|
||||
default:
|
||||
{
|
||||
message;
|
||||
}
|
||||
}
|
||||
}
|
||||
export default function HotReload({ children, globalError, webSocket, staticIndicatorState }) {
|
||||
useErrorHandler(dispatcher.onUnhandledError, dispatcher.onUnhandledRejection);
|
||||
useWebSocketPing(webSocket);
|
||||
// We don't want access of the pathname for the dev tools to trigger a dynamic
|
||||
// access (as the dev overlay will never be present in production).
|
||||
const pathname = useUntrackedPathname();
|
||||
if (process.env.__NEXT_DEV_INDICATOR) {
|
||||
// this conditional is only for dead-code elimination which
|
||||
// isn't a runtime conditional only build-time so ignore hooks rule
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useEffect(()=>{
|
||||
if (!staticIndicatorState) {
|
||||
throw Object.defineProperty(new InvariantError('Expected staticIndicatorState to be defined in dev mode.'), "__NEXT_ERROR_CODE", {
|
||||
value: "E786",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
staticIndicatorState.pathname = pathname;
|
||||
if (staticIndicatorState.appIsrManifest) {
|
||||
const isStatic = pathname ? staticIndicatorState.appIsrManifest[pathname] : undefined;
|
||||
dispatcher.onStaticIndicator(isStatic === undefined ? 'pending' : isStatic ? 'static' : 'dynamic');
|
||||
}
|
||||
}, [
|
||||
pathname,
|
||||
staticIndicatorState
|
||||
]);
|
||||
}
|
||||
return /*#__PURE__*/ _jsxs(AppDevOverlayErrorBoundary, {
|
||||
globalError: globalError,
|
||||
children: [
|
||||
/*#__PURE__*/ _jsx(ReplaySsrOnlyErrors, {
|
||||
onBlockingError: dispatcher.openErrorOverlay
|
||||
}),
|
||||
children
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
//# sourceMappingURL=hot-reloader-app.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+206
@@ -0,0 +1,206 @@
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { GlobalLayoutRouterContext } from '../../../../shared/lib/app-router-context.shared-runtime';
|
||||
import { getSocketUrl } from '../get-socket-url';
|
||||
import { HMR_MESSAGE_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types';
|
||||
import { reportInvalidHmrMessage } from '../shared';
|
||||
import { performFullReload, processMessage } from './hot-reloader-app';
|
||||
import { logQueue } from '../../../../next-devtools/userspace/app/forward-logs';
|
||||
import { InvariantError } from '../../../../shared/lib/invariant-error';
|
||||
import { WEB_SOCKET_MAX_RECONNECTIONS } from '../../../../lib/constants';
|
||||
let reconnections = 0;
|
||||
let reloading = false;
|
||||
let serverSessionId = null;
|
||||
let mostRecentCompilationHash = null;
|
||||
export function createWebSocket(assetPrefix, staticIndicatorState) {
|
||||
if (!self.__next_r) {
|
||||
throw Object.defineProperty(new InvariantError(`Expected a request ID to be defined for the document via self.__next_r.`), "__NEXT_ERROR_CODE", {
|
||||
value: "E806",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
let webSocket;
|
||||
let timer;
|
||||
const sendMessage = (data)=>{
|
||||
if (webSocket && webSocket.readyState === webSocket.OPEN) {
|
||||
webSocket.send(data);
|
||||
}
|
||||
};
|
||||
const processTurbopackMessage = createProcessTurbopackMessage(sendMessage);
|
||||
function init() {
|
||||
if (webSocket) {
|
||||
webSocket.close();
|
||||
}
|
||||
const newWebSocket = new window.WebSocket(`${getSocketUrl(assetPrefix)}/_next/webpack-hmr?id=${self.__next_r}`);
|
||||
newWebSocket.binaryType = 'arraybuffer';
|
||||
function handleOnline() {
|
||||
logQueue.onSocketReady(newWebSocket);
|
||||
reconnections = 0;
|
||||
window.console.log('[HMR] connected');
|
||||
}
|
||||
function handleMessage(event) {
|
||||
// While the page is reloading, don't respond to any more messages.
|
||||
if (reloading) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const message = event.data instanceof ArrayBuffer ? parseBinaryMessage(event.data) : JSON.parse(event.data);
|
||||
// Check for server restart in Turbopack mode
|
||||
if (message.type === HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED) {
|
||||
if (serverSessionId !== null && serverSessionId !== message.data.sessionId) {
|
||||
// Either the server's session id has changed and it's a new server, or
|
||||
// it's been too long since we disconnected and we should reload the page.
|
||||
window.location.reload();
|
||||
reloading = true;
|
||||
return;
|
||||
}
|
||||
serverSessionId = message.data.sessionId;
|
||||
}
|
||||
// Track webpack compilation hash for server restart detection
|
||||
if (message.type === HMR_MESSAGE_SENT_TO_BROWSER.SYNC && 'hash' in message) {
|
||||
// If we had previously reconnected and the hash changed, the server may have restarted
|
||||
if (mostRecentCompilationHash !== null && mostRecentCompilationHash !== message.hash) {
|
||||
window.location.reload();
|
||||
reloading = true;
|
||||
return;
|
||||
}
|
||||
mostRecentCompilationHash = message.hash;
|
||||
}
|
||||
processMessage(message, sendMessage, processTurbopackMessage, staticIndicatorState);
|
||||
} catch (err) {
|
||||
reportInvalidHmrMessage(event, err);
|
||||
}
|
||||
}
|
||||
function handleDisconnect() {
|
||||
newWebSocket.onerror = null;
|
||||
newWebSocket.onclose = null;
|
||||
newWebSocket.close();
|
||||
reconnections++;
|
||||
// After 25 reconnects we'll want to reload the page as it indicates the dev server is no longer running.
|
||||
if (reconnections > WEB_SOCKET_MAX_RECONNECTIONS) {
|
||||
reloading = true;
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
clearTimeout(timer);
|
||||
// Try again after 5 seconds
|
||||
timer = setTimeout(init, reconnections > 5 ? 5000 : 1000);
|
||||
}
|
||||
newWebSocket.onopen = handleOnline;
|
||||
newWebSocket.onerror = handleDisconnect;
|
||||
newWebSocket.onclose = handleDisconnect;
|
||||
newWebSocket.onmessage = handleMessage;
|
||||
webSocket = newWebSocket;
|
||||
return newWebSocket;
|
||||
}
|
||||
return init();
|
||||
}
|
||||
export function createProcessTurbopackMessage(sendMessage) {
|
||||
if (!process.env.TURBOPACK) {
|
||||
return ()=>{};
|
||||
}
|
||||
let queue = [];
|
||||
let callback;
|
||||
const processTurbopackMessage = (msg)=>{
|
||||
if (callback) {
|
||||
callback(msg);
|
||||
} else {
|
||||
queue.push(msg);
|
||||
}
|
||||
};
|
||||
import(// @ts-expect-error requires "moduleResolution": "node16" in tsconfig.json and not .ts extension
|
||||
'@vercel/turbopack-ecmascript-runtime/browser/dev/hmr-client/hmr-client.ts').then(({ connect })=>{
|
||||
connect({
|
||||
addMessageListener (cb) {
|
||||
callback = cb;
|
||||
// Replay all Turbopack messages before we were able to establish the HMR client.
|
||||
for (const msg of queue){
|
||||
cb(msg);
|
||||
}
|
||||
queue.length = 0;
|
||||
},
|
||||
sendMessage,
|
||||
onUpdateError: (err)=>performFullReload(err, sendMessage)
|
||||
});
|
||||
});
|
||||
return processTurbopackMessage;
|
||||
}
|
||||
export function useWebSocketPing(webSocket) {
|
||||
const { tree } = useContext(GlobalLayoutRouterContext);
|
||||
useEffect(()=>{
|
||||
if (!webSocket) {
|
||||
throw Object.defineProperty(new InvariantError('Expected webSocket to be defined in dev mode.'), "__NEXT_ERROR_CODE", {
|
||||
value: "E785",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
// Never send pings when using Turbopack as it's not used.
|
||||
// Pings were originally used to keep track of active routes in on-demand-entries with webpack.
|
||||
if (process.env.TURBOPACK) {
|
||||
return;
|
||||
}
|
||||
// Taken from on-demand-entries-client.js
|
||||
const interval = setInterval(()=>{
|
||||
if (webSocket.readyState === webSocket.OPEN) {
|
||||
webSocket.send(JSON.stringify({
|
||||
event: 'ping',
|
||||
tree,
|
||||
appDirRoute: true
|
||||
}));
|
||||
}
|
||||
}, 2500);
|
||||
return ()=>clearInterval(interval);
|
||||
}, [
|
||||
tree,
|
||||
webSocket
|
||||
]);
|
||||
}
|
||||
const textDecoder = new TextDecoder();
|
||||
function parseBinaryMessage(data) {
|
||||
assertByteLength(data, 1);
|
||||
const view = new DataView(data);
|
||||
const messageType = view.getUint8(0);
|
||||
switch(messageType){
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER:
|
||||
{
|
||||
const serializedErrors = new Uint8Array(data, 1);
|
||||
return {
|
||||
type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
|
||||
serializedErrors
|
||||
};
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK:
|
||||
{
|
||||
assertByteLength(data, 2);
|
||||
const requestIdLength = view.getUint8(1);
|
||||
assertByteLength(data, 2 + requestIdLength);
|
||||
const requestId = textDecoder.decode(new Uint8Array(data, 2, requestIdLength));
|
||||
const chunk = data.byteLength > 2 + requestIdLength ? new Uint8Array(data, 2 + requestIdLength) : null;
|
||||
return {
|
||||
type: HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK,
|
||||
requestId,
|
||||
chunk
|
||||
};
|
||||
}
|
||||
default:
|
||||
{
|
||||
throw Object.defineProperty(new InvariantError(`Invalid binary HMR message of type ${messageType}`), "__NEXT_ERROR_CODE", {
|
||||
value: "E809",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
function assertByteLength(data, expectedLength) {
|
||||
if (data.byteLength < expectedLength) {
|
||||
throw Object.defineProperty(new InvariantError(`Invalid binary HMR message: insufficient data (expected ${expectedLength} bytes, got ${data.byteLength})`), "__NEXT_ERROR_CODE", {
|
||||
value: "E808",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//# sourceMappingURL=web-socket.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+22
@@ -0,0 +1,22 @@
|
||||
import { normalizedAssetPrefix } from '../../../shared/lib/normalized-asset-prefix';
|
||||
function getSocketProtocol(assetPrefix) {
|
||||
let protocol = window.location.protocol;
|
||||
try {
|
||||
// assetPrefix is a url
|
||||
protocol = new URL(assetPrefix).protocol;
|
||||
} catch {}
|
||||
return protocol === 'http:' ? 'ws:' : 'wss:';
|
||||
}
|
||||
export function getSocketUrl(assetPrefix) {
|
||||
const prefix = normalizedAssetPrefix(assetPrefix);
|
||||
const protocol = getSocketProtocol(assetPrefix || '');
|
||||
if (URL.canParse(prefix)) {
|
||||
// since normalized asset prefix is ensured to be a URL format,
|
||||
// we can safely replace the protocol
|
||||
return prefix.replace(/^http/, 'ws');
|
||||
}
|
||||
const { hostname, port } = window.location;
|
||||
return `${protocol}//${hostname}${port ? `:${port}` : ''}${prefix}`;
|
||||
}
|
||||
|
||||
//# sourceMappingURL=get-socket-url.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../../src/client/dev/hot-reloader/get-socket-url.ts"],"sourcesContent":["import { normalizedAssetPrefix } from '../../../shared/lib/normalized-asset-prefix'\n\nfunction getSocketProtocol(assetPrefix: string): string {\n let protocol = window.location.protocol\n\n try {\n // assetPrefix is a url\n protocol = new URL(assetPrefix).protocol\n } catch {}\n\n return protocol === 'http:' ? 'ws:' : 'wss:'\n}\n\nexport function getSocketUrl(assetPrefix: string | undefined): string {\n const prefix = normalizedAssetPrefix(assetPrefix)\n const protocol = getSocketProtocol(assetPrefix || '')\n\n if (URL.canParse(prefix)) {\n // since normalized asset prefix is ensured to be a URL format,\n // we can safely replace the protocol\n return prefix.replace(/^http/, 'ws')\n }\n\n const { hostname, port } = window.location\n return `${protocol}//${hostname}${port ? `:${port}` : ''}${prefix}`\n}\n"],"names":["normalizedAssetPrefix","getSocketProtocol","assetPrefix","protocol","window","location","URL","getSocketUrl","prefix","canParse","replace","hostname","port"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,8CAA6C;AAEnF,SAASC,kBAAkBC,WAAmB;IAC5C,IAAIC,WAAWC,OAAOC,QAAQ,CAACF,QAAQ;IAEvC,IAAI;QACF,uBAAuB;QACvBA,WAAW,IAAIG,IAAIJ,aAAaC,QAAQ;IAC1C,EAAE,OAAM,CAAC;IAET,OAAOA,aAAa,UAAU,QAAQ;AACxC;AAEA,OAAO,SAASI,aAAaL,WAA+B;IAC1D,MAAMM,SAASR,sBAAsBE;IACrC,MAAMC,WAAWF,kBAAkBC,eAAe;IAElD,IAAII,IAAIG,QAAQ,CAACD,SAAS;QACxB,+DAA+D;QAC/D,qCAAqC;QACrC,OAAOA,OAAOE,OAAO,CAAC,SAAS;IACjC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGR,OAAOC,QAAQ;IAC1C,OAAO,GAAGF,SAAS,EAAE,EAAEQ,WAAWC,OAAO,CAAC,CAAC,EAAEA,MAAM,GAAG,KAAKJ,QAAQ;AACrE","ignoreList":[0]}
|
||||
+419
@@ -0,0 +1,419 @@
|
||||
// TODO: Remove use of `any` type.
|
||||
/**
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/ /// <reference types="webpack/module.d.ts" />
|
||||
// This file is a modified version of the Create React App HMR dev client that
|
||||
// can be found here:
|
||||
// https://github.com/facebook/create-react-app/blob/v3.4.1/packages/react-dev-utils/webpackHotDevClient.js
|
||||
/// <reference types="webpack/module.d.ts" />
|
||||
import { dispatcher, getSerializedOverlayState, getSegmentTrieData } from 'next/dist/compiled/next-devtools';
|
||||
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 '../../../../shared/lib/format-webpack-messages';
|
||||
import { HMR_MESSAGE_SENT_TO_BROWSER, HMR_MESSAGE_SENT_TO_SERVER } from '../../../../server/dev/hot-reloader-types';
|
||||
import { REACT_REFRESH_FULL_RELOAD, REACT_REFRESH_FULL_RELOAD_FROM_ERROR, reportInvalidHmrMessage } from '../shared';
|
||||
import { RuntimeErrorHandler } from '../../runtime-error-handler';
|
||||
import reportHmrLatency from '../../report-hmr-latency';
|
||||
import { TurbopackHmr } from '../turbopack-hot-reloader-common';
|
||||
window.__nextDevClientId = Math.round(Math.random() * 100 + Date.now());
|
||||
let customHmrEventHandler;
|
||||
let turbopackMessageListeners = [];
|
||||
export default function connect() {
|
||||
register();
|
||||
addMessageListener((message)=>{
|
||||
try {
|
||||
processMessage(message);
|
||||
} catch (err) {
|
||||
reportInvalidHmrMessage(message, err);
|
||||
}
|
||||
});
|
||||
return {
|
||||
subscribeToHmrEvent (handler) {
|
||||
customHmrEventHandler = handler;
|
||||
},
|
||||
onUnrecoverableError () {
|
||||
RuntimeErrorHandler.hadRuntimeError = true;
|
||||
},
|
||||
addTurbopackMessageListener (cb) {
|
||||
turbopackMessageListeners.push(cb);
|
||||
},
|
||||
sendTurbopackMessage (msg) {
|
||||
sendMessage(msg);
|
||||
},
|
||||
handleUpdateError (err) {
|
||||
performFullReload(err);
|
||||
}
|
||||
};
|
||||
}
|
||||
// Remember some state related to hot module replacement.
|
||||
var isFirstCompilation = true;
|
||||
var mostRecentCompilationHash = null;
|
||||
var hasCompileErrors = false;
|
||||
function clearOutdatedErrors() {
|
||||
// Clean up outdated compile errors, if any.
|
||||
if (typeof console !== 'undefined' && typeof console.clear === 'function') {
|
||||
if (hasCompileErrors) {
|
||||
console.clear();
|
||||
}
|
||||
}
|
||||
}
|
||||
// Successful compilation.
|
||||
function handleSuccess() {
|
||||
clearOutdatedErrors();
|
||||
hasCompileErrors = false;
|
||||
if (process.env.TURBOPACK) {
|
||||
const hmrUpdate = turbopackHmr.onBuilt();
|
||||
if (hmrUpdate != null) {
|
||||
reportHmrLatency(sendMessage, [
|
||||
...hmrUpdate.updatedModules
|
||||
], hmrUpdate.startMsSinceEpoch, hmrUpdate.endMsSinceEpoch, hmrUpdate.hasUpdates);
|
||||
}
|
||||
dispatcher.onBuildOk();
|
||||
} else {
|
||||
const isHotUpdate = !isFirstCompilation || window.__NEXT_DATA__.page !== '/_error' && isUpdateAvailable();
|
||||
// Attempt to apply hot updates or reload.
|
||||
if (isHotUpdate) {
|
||||
tryApplyUpdatesWebpack();
|
||||
}
|
||||
}
|
||||
isFirstCompilation = false;
|
||||
}
|
||||
// Compilation with warnings (e.g. ESLint).
|
||||
function handleWarnings(warnings) {
|
||||
clearOutdatedErrors();
|
||||
const isHotUpdate = !isFirstCompilation;
|
||||
isFirstCompilation = false;
|
||||
hasCompileErrors = false;
|
||||
function printWarnings() {
|
||||
// Print warnings to the console.
|
||||
const formatted = formatWebpackMessages({
|
||||
warnings: warnings,
|
||||
errors: []
|
||||
});
|
||||
if (typeof console !== 'undefined' && typeof console.warn === 'function') {
|
||||
for(let i = 0; i < formatted.warnings?.length; i++){
|
||||
if (i === 5) {
|
||||
console.warn('There were more warnings in other files.\n' + 'You can find a complete log in the terminal.');
|
||||
break;
|
||||
}
|
||||
console.warn(stripAnsi(formatted.warnings[i]));
|
||||
}
|
||||
}
|
||||
}
|
||||
printWarnings();
|
||||
// Attempt to apply hot updates or reload.
|
||||
if (isHotUpdate) {
|
||||
tryApplyUpdatesWebpack();
|
||||
}
|
||||
}
|
||||
// Compilation with errors (e.g. syntax error or missing modules).
|
||||
function handleErrors(errors) {
|
||||
clearOutdatedErrors();
|
||||
isFirstCompilation = false;
|
||||
hasCompileErrors = true;
|
||||
// "Massage" webpack messages.
|
||||
var formatted = formatWebpackMessages({
|
||||
errors: errors,
|
||||
warnings: []
|
||||
});
|
||||
// Only show the first error.
|
||||
dispatcher.onBuildError(formatted.errors[0]);
|
||||
// Also log them to the console.
|
||||
if (typeof console !== 'undefined' && typeof console.error === 'function') {
|
||||
for(var i = 0; i < formatted.errors.length; i++){
|
||||
console.error(stripAnsi(formatted.errors[i]));
|
||||
}
|
||||
}
|
||||
// Do not attempt to reload now.
|
||||
// We will reload on next success instead.
|
||||
if (process.env.__NEXT_TEST_MODE) {
|
||||
if (self.__NEXT_HMR_CB) {
|
||||
self.__NEXT_HMR_CB(formatted.errors[0]);
|
||||
self.__NEXT_HMR_CB = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
let webpackStartMsSinceEpoch = null;
|
||||
const turbopackHmr = process.env.TURBOPACK ? new TurbopackHmr() : null;
|
||||
let isrManifest = {};
|
||||
// There is a newer version of the code available.
|
||||
function handleAvailableHash(hash) {
|
||||
// Update last known compilation hash.
|
||||
mostRecentCompilationHash = hash;
|
||||
}
|
||||
export function handleStaticIndicator() {
|
||||
if (process.env.__NEXT_DEV_INDICATOR) {
|
||||
const routeInfo = window.next.router.components[window.next.router.pathname];
|
||||
const pageComponent = routeInfo?.Component;
|
||||
const appComponent = window.next.router.components['/_app']?.Component;
|
||||
const isDynamicPage = Boolean(pageComponent?.getInitialProps) || Boolean(routeInfo?.__N_SSP);
|
||||
const hasAppGetInitialProps = Boolean(appComponent?.getInitialProps) && appComponent?.getInitialProps !== appComponent?.origGetInitialProps;
|
||||
const isPageStatic = isrManifest[window.location.pathname] || !isDynamicPage && !hasAppGetInitialProps;
|
||||
dispatcher.onStaticIndicator(isPageStatic ? 'static' : 'dynamic');
|
||||
}
|
||||
}
|
||||
/** Handles messages from the server for the Pages Router. */ function processMessage(message) {
|
||||
switch(message.type){
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.ISR_MANIFEST:
|
||||
{
|
||||
isrManifest = message.data;
|
||||
handleStaticIndicator();
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.BUILDING:
|
||||
{
|
||||
dispatcher.buildingIndicatorShow();
|
||||
if (process.env.TURBOPACK) {
|
||||
turbopackHmr.onBuilding();
|
||||
} else {
|
||||
webpackStartMsSinceEpoch = Date.now();
|
||||
console.log('[Fast Refresh] rebuilding');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.BUILT:
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.SYNC:
|
||||
{
|
||||
dispatcher.buildingIndicatorHide();
|
||||
if (message.hash) handleAvailableHash(message.hash);
|
||||
const { errors, warnings } = message;
|
||||
// Is undefined when it's a 'built' event
|
||||
if ('versionInfo' in message) dispatcher.onVersionInfo(message.versionInfo);
|
||||
if ('devIndicator' in message) dispatcher.onDevIndicator(message.devIndicator);
|
||||
if ('devToolsConfig' in message) dispatcher.onDevToolsConfig(message.devToolsConfig);
|
||||
const hasErrors = Boolean(errors && errors.length);
|
||||
if (hasErrors) {
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-error',
|
||||
errorCount: errors.length,
|
||||
clientId: window.__nextDevClientId
|
||||
}));
|
||||
return handleErrors(errors);
|
||||
}
|
||||
// NOTE: Turbopack does not currently send warnings
|
||||
const hasWarnings = Boolean(warnings && warnings.length);
|
||||
if (hasWarnings) {
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-warning',
|
||||
warningCount: warnings.length,
|
||||
clientId: window.__nextDevClientId
|
||||
}));
|
||||
return handleWarnings(warnings);
|
||||
}
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-success',
|
||||
clientId: window.__nextDevClientId
|
||||
}));
|
||||
return handleSuccess();
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.SERVER_COMPONENT_CHANGES:
|
||||
{
|
||||
turbopackHmr?.onServerComponentChanges();
|
||||
if (hasCompileErrors || RuntimeErrorHandler.hadRuntimeError) {
|
||||
window.location.reload();
|
||||
}
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.SERVER_ERROR:
|
||||
{
|
||||
const { errorJSON } = message;
|
||||
if (errorJSON) {
|
||||
const errorObject = JSON.parse(errorJSON);
|
||||
const error = Object.defineProperty(new Error(errorObject.message), "__NEXT_ERROR_CODE", {
|
||||
value: "E394",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
error.stack = errorObject.stack;
|
||||
handleErrors([
|
||||
error
|
||||
]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED:
|
||||
{
|
||||
for (const listener of turbopackMessageListeners){
|
||||
listener({
|
||||
type: HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED,
|
||||
data: message.data
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_MESSAGE:
|
||||
{
|
||||
turbopackHmr.onTurbopackMessage(message);
|
||||
dispatcher.onBeforeRefresh();
|
||||
for (const listener of turbopackMessageListeners){
|
||||
listener({
|
||||
type: HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_MESSAGE,
|
||||
data: message.data
|
||||
});
|
||||
}
|
||||
if (RuntimeErrorHandler.hadRuntimeError) {
|
||||
console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR);
|
||||
performFullReload(null);
|
||||
}
|
||||
dispatcher.onRefresh();
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.ADDED_PAGE:
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REMOVED_PAGE:
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.RELOAD_PAGE:
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE:
|
||||
if (customHmrEventHandler) {
|
||||
customHmrEventHandler(message);
|
||||
}
|
||||
break;
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.DEVTOOLS_CONFIG:
|
||||
dispatcher.onDevToolsConfig(message.data);
|
||||
break;
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.CACHE_INDICATOR:
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK:
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER:
|
||||
break;
|
||||
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:
|
||||
break;
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_CURRENT_ERROR_STATE:
|
||||
{
|
||||
const errorState = getSerializedOverlayState();
|
||||
const response = {
|
||||
event: HMR_MESSAGE_SENT_TO_SERVER.MCP_ERROR_STATE_RESPONSE,
|
||||
requestId: message.requestId,
|
||||
errorState,
|
||||
url: window.location.href
|
||||
};
|
||||
sendMessage(JSON.stringify(response));
|
||||
break;
|
||||
}
|
||||
case HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_PAGE_METADATA:
|
||||
{
|
||||
const segmentTrieData = getSegmentTrieData();
|
||||
const response = {
|
||||
event: HMR_MESSAGE_SENT_TO_SERVER.MCP_PAGE_METADATA_RESPONSE,
|
||||
requestId: message.requestId,
|
||||
segmentTrieData,
|
||||
url: window.location.href
|
||||
};
|
||||
sendMessage(JSON.stringify(response));
|
||||
return;
|
||||
}
|
||||
default:
|
||||
message;
|
||||
}
|
||||
}
|
||||
// Is there a newer version of this code available?
|
||||
function isUpdateAvailable() {
|
||||
/* globals __webpack_hash__ */ // __webpack_hash__ is the hash of the current compilation.
|
||||
// It's a global variable injected by Webpack.
|
||||
return mostRecentCompilationHash !== __webpack_hash__;
|
||||
}
|
||||
// Webpack disallows updates in other states.
|
||||
function canApplyUpdates() {
|
||||
return module.hot.status() === 'idle';
|
||||
}
|
||||
function afterApplyUpdates(fn) {
|
||||
if (canApplyUpdates()) {
|
||||
fn();
|
||||
} else {
|
||||
function handler(status) {
|
||||
if (status === 'idle') {
|
||||
module.hot.removeStatusHandler(handler);
|
||||
fn();
|
||||
}
|
||||
}
|
||||
module.hot.addStatusHandler(handler);
|
||||
}
|
||||
}
|
||||
// Attempt to update code on the fly, fall back to a hard reload.
|
||||
function tryApplyUpdatesWebpack() {
|
||||
if (!module.hot) {
|
||||
// HotModuleReplacementPlugin is not in Webpack configuration.
|
||||
console.error('HotModuleReplacementPlugin is not in Webpack configuration.');
|
||||
// window.location.reload();
|
||||
return;
|
||||
}
|
||||
if (!isUpdateAvailable() || !canApplyUpdates()) {
|
||||
dispatcher.onBuildOk();
|
||||
return;
|
||||
}
|
||||
function handleApplyUpdates(err, updatedModules) {
|
||||
if (err || RuntimeErrorHandler.hadRuntimeError || updatedModules == null) {
|
||||
if (err) {
|
||||
console.warn(REACT_REFRESH_FULL_RELOAD);
|
||||
} else if (RuntimeErrorHandler.hadRuntimeError) {
|
||||
console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR);
|
||||
}
|
||||
performFullReload(err);
|
||||
return;
|
||||
}
|
||||
dispatcher.onBuildOk();
|
||||
if (isUpdateAvailable()) {
|
||||
// While we were updating, there was a new update! Do it again.
|
||||
tryApplyUpdatesWebpack();
|
||||
return;
|
||||
}
|
||||
dispatcher.onRefresh();
|
||||
reportHmrLatency(sendMessage, updatedModules, webpackStartMsSinceEpoch, Date.now());
|
||||
if (process.env.__NEXT_TEST_MODE) {
|
||||
afterApplyUpdates(()=>{
|
||||
if (self.__NEXT_HMR_CB) {
|
||||
self.__NEXT_HMR_CB();
|
||||
self.__NEXT_HMR_CB = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// https://webpack.js.org/api/hot-module-replacement/#check
|
||||
module.hot.check(/* autoApply */ false).then((updatedModules)=>{
|
||||
if (updatedModules == null) {
|
||||
return null;
|
||||
}
|
||||
// We should always handle an update, even if updatedModules is empty (but
|
||||
// non-null) for any reason. That's what webpack would normally do:
|
||||
// https://github.com/webpack/webpack/blob/3aa6b6bc3a64/lib/hmr/HotModuleReplacement.runtime.js#L296-L298
|
||||
dispatcher.onBeforeRefresh();
|
||||
// https://webpack.js.org/api/hot-module-replacement/#apply
|
||||
return module.hot.apply();
|
||||
}).then((updatedModules)=>{
|
||||
handleApplyUpdates(null, updatedModules);
|
||||
}, (err)=>{
|
||||
handleApplyUpdates(err, null);
|
||||
});
|
||||
}
|
||||
export function performFullReload(err) {
|
||||
const stackTrace = err && (err.stack && err.stack.split('\n').slice(0, 5).join('\n') || err.message || err + '');
|
||||
sendMessage(JSON.stringify({
|
||||
event: 'client-full-reload',
|
||||
stackTrace,
|
||||
hadRuntimeError: !!RuntimeErrorHandler.hadRuntimeError,
|
||||
dependencyChain: err ? err.dependencyChain : undefined
|
||||
}));
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
//# sourceMappingURL=hot-reloader-pages.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+74
@@ -0,0 +1,74 @@
|
||||
import { logQueue } from '../../../../next-devtools/userspace/app/forward-logs';
|
||||
import { HMR_MESSAGE_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types';
|
||||
import { getSocketUrl } from '../get-socket-url';
|
||||
import { WEB_SOCKET_MAX_RECONNECTIONS } from '../../../../lib/constants';
|
||||
let source;
|
||||
const messageCallbacks = [];
|
||||
export function addMessageListener(callback) {
|
||||
messageCallbacks.push(callback);
|
||||
}
|
||||
export function sendMessage(data) {
|
||||
if (!source || source.readyState !== source.OPEN) return;
|
||||
return source.send(data);
|
||||
}
|
||||
let reconnections = 0;
|
||||
let reloading = false;
|
||||
let serverSessionId = null;
|
||||
export function connectHMR(options) {
|
||||
let timer;
|
||||
function init() {
|
||||
if (source) source.close();
|
||||
function handleOnline() {
|
||||
logQueue.onSocketReady(source);
|
||||
reconnections = 0;
|
||||
window.console.log('[HMR] connected');
|
||||
}
|
||||
function handleMessage(event) {
|
||||
// While the page is reloading, don't respond to any more messages.
|
||||
// On reconnect, the server may send an empty list of changes if it was restarted.
|
||||
if (reloading) {
|
||||
return;
|
||||
}
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.type === HMR_MESSAGE_SENT_TO_BROWSER.TURBOPACK_CONNECTED) {
|
||||
if (serverSessionId !== null && serverSessionId !== message.data.sessionId) {
|
||||
// Either the server's session id has changed and it's a new server, or
|
||||
// it's been too long since we disconnected and we should reload the page.
|
||||
// There could be 1) unhandled server errors and/or 2) stale content.
|
||||
// Perform a hard reload of the page.
|
||||
window.location.reload();
|
||||
reloading = true;
|
||||
return;
|
||||
}
|
||||
serverSessionId = message.data.sessionId;
|
||||
}
|
||||
for (const messageCallback of messageCallbacks){
|
||||
messageCallback(message);
|
||||
}
|
||||
}
|
||||
function handleDisconnect() {
|
||||
source.onerror = null;
|
||||
source.onclose = null;
|
||||
source.close();
|
||||
reconnections++;
|
||||
// After 25 reconnects we'll want to reload the page as it indicates the dev server is no longer running.
|
||||
if (reconnections > WEB_SOCKET_MAX_RECONNECTIONS) {
|
||||
reloading = true;
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
clearTimeout(timer);
|
||||
// Try again after 5 seconds
|
||||
timer = setTimeout(init, reconnections > 5 ? 5000 : 1000);
|
||||
}
|
||||
const url = getSocketUrl(options.assetPrefix);
|
||||
source = new window.WebSocket(`${url}${options.path}`);
|
||||
source.onopen = handleOnline;
|
||||
source.onerror = handleDisconnect;
|
||||
source.onclose = handleDisconnect;
|
||||
source.onmessage = handleMessage;
|
||||
}
|
||||
init();
|
||||
}
|
||||
|
||||
//# sourceMappingURL=websocket.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
export const REACT_REFRESH_FULL_RELOAD = '[Fast Refresh] performing full reload\n\n' + "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\n" + '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' + 'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' + 'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\n' + 'Fast Refresh requires at least one parent function component in your React tree.';
|
||||
export const REACT_REFRESH_FULL_RELOAD_FROM_ERROR = '[Fast Refresh] performing full reload because your application had an unrecoverable error';
|
||||
export function reportInvalidHmrMessage(message, err) {
|
||||
console.warn('[HMR] Invalid message: ' + JSON.stringify(message) + '\n' + (err instanceof Error && err?.stack || ''));
|
||||
}
|
||||
|
||||
//# sourceMappingURL=shared.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../../src/client/dev/hot-reloader/shared.ts"],"sourcesContent":["import type { HmrMessageSentToBrowser } from '../../../server/dev/hot-reloader-types'\n\nexport const REACT_REFRESH_FULL_RELOAD =\n '[Fast Refresh] performing full reload\\n\\n' +\n \"Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\\n\" +\n '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' +\n 'Consider migrating the non-React component export to a separate file and importing it into both files.\\n\\n' +\n 'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\\n' +\n 'Fast Refresh requires at least one parent function component in your React tree.'\n\nexport const REACT_REFRESH_FULL_RELOAD_FROM_ERROR =\n '[Fast Refresh] performing full reload because your application had an unrecoverable error'\n\nexport function reportInvalidHmrMessage(\n message: HmrMessageSentToBrowser | MessageEvent<unknown>,\n err: unknown\n) {\n console.warn(\n '[HMR] Invalid message: ' +\n JSON.stringify(message) +\n '\\n' +\n ((err instanceof Error && err?.stack) || '')\n )\n}\n"],"names":["REACT_REFRESH_FULL_RELOAD","REACT_REFRESH_FULL_RELOAD_FROM_ERROR","reportInvalidHmrMessage","message","err","console","warn","JSON","stringify","Error","stack"],"mappings":"AAEA,OAAO,MAAMA,4BACX,8CACA,mIACA,qIACA,+GACA,8HACA,mFAAkF;AAEpF,OAAO,MAAMC,uCACX,4FAA2F;AAE7F,OAAO,SAASC,wBACdC,OAAwD,EACxDC,GAAY;IAEZC,QAAQC,IAAI,CACV,4BACEC,KAAKC,SAAS,CAACL,WACf,OACC,CAAA,AAACC,eAAeK,SAASL,KAAKM,SAAU,EAAC;AAEhD","ignoreList":[0]}
|
||||
Generated
Vendored
+112
@@ -0,0 +1,112 @@
|
||||
// How long to wait before reporting the HMR start, used to suppress irrelevant
|
||||
// `BUILDING` events. Does not impact reported latency.
|
||||
const TURBOPACK_HMR_START_DELAY_MS = 100;
|
||||
export class TurbopackHmr {
|
||||
#updatedModules;
|
||||
#startMsSinceEpoch;
|
||||
#lastUpdateMsSinceEpoch;
|
||||
#deferredReportHmrStartId;
|
||||
#reportedHmrStart;
|
||||
constructor(){
|
||||
this.#updatedModules = new Set();
|
||||
this.#reportedHmrStart = false;
|
||||
}
|
||||
// HACK: Turbopack tends to generate a lot of irrelevant "BUILDING" actions,
|
||||
// as it reports *any* compilation, including fully no-op/cached compilations
|
||||
// and those unrelated to HMR. Fixing this would require significant
|
||||
// architectural changes.
|
||||
//
|
||||
// Work around this by deferring any "rebuilding" message by 100ms. If we get
|
||||
// a BUILT event within that threshold and nothing has changed, just suppress
|
||||
// the message entirely.
|
||||
#runDeferredReportHmrStart() {
|
||||
if (this.#deferredReportHmrStartId != null) {
|
||||
console.log('[Fast Refresh] rebuilding');
|
||||
this.#reportedHmrStart = true;
|
||||
this.#cancelDeferredReportHmrStart();
|
||||
}
|
||||
}
|
||||
#cancelDeferredReportHmrStart() {
|
||||
clearTimeout(this.#deferredReportHmrStartId);
|
||||
this.#deferredReportHmrStartId = undefined;
|
||||
}
|
||||
onBuilding() {
|
||||
this.#lastUpdateMsSinceEpoch = undefined;
|
||||
this.#cancelDeferredReportHmrStart();
|
||||
this.#startMsSinceEpoch = Date.now();
|
||||
// report the HMR start after a short delay
|
||||
this.#deferredReportHmrStartId = setTimeout(()=>this.#runDeferredReportHmrStart(), // debugging feature: don't defer/suppress noisy no-op HMR update messages
|
||||
self.__NEXT_HMR_TURBOPACK_REPORT_NOISY_NOOP_EVENTS ? 0 : TURBOPACK_HMR_START_DELAY_MS);
|
||||
}
|
||||
/** Helper for other `onEvent` methods. */ #onUpdate() {
|
||||
this.#runDeferredReportHmrStart();
|
||||
this.#lastUpdateMsSinceEpoch = Date.now();
|
||||
}
|
||||
onTurbopackMessage(msg) {
|
||||
this.#onUpdate();
|
||||
const updatedModules = extractModulesFromTurbopackMessage(msg.data);
|
||||
for (const module of updatedModules){
|
||||
this.#updatedModules.add(module);
|
||||
}
|
||||
}
|
||||
onServerComponentChanges() {
|
||||
this.#onUpdate();
|
||||
}
|
||||
onReloadPage() {
|
||||
this.#onUpdate();
|
||||
}
|
||||
onPageAddRemove() {
|
||||
this.#onUpdate();
|
||||
}
|
||||
/**
|
||||
* @returns `null` if the caller should ignore the update entirely. Returns an
|
||||
* object with `hasUpdates: false` if the caller should report the end of
|
||||
* the HMR in the browser console, but the HMR was a no-op.
|
||||
*/ onBuilt() {
|
||||
// Check that we got *any* `TurbopackMessage`, even if
|
||||
// `updatedModules` is empty (not everything gets recorded there).
|
||||
//
|
||||
// There's also a case where `onBuilt` gets called before `onBuilding`,
|
||||
// which can happen during initial page load. Ignore that too!
|
||||
const hasUpdates = this.#lastUpdateMsSinceEpoch != null && this.#startMsSinceEpoch != null;
|
||||
if (!hasUpdates && !this.#reportedHmrStart) {
|
||||
// suppress the update entirely
|
||||
this.#cancelDeferredReportHmrStart();
|
||||
return null;
|
||||
}
|
||||
this.#runDeferredReportHmrStart();
|
||||
const result = {
|
||||
hasUpdates,
|
||||
updatedModules: this.#updatedModules,
|
||||
startMsSinceEpoch: this.#startMsSinceEpoch,
|
||||
endMsSinceEpoch: this.#lastUpdateMsSinceEpoch ?? Date.now()
|
||||
};
|
||||
this.#updatedModules = new Set();
|
||||
this.#reportedHmrStart = false;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
function extractModulesFromTurbopackMessage(data) {
|
||||
const updatedModules = new Set();
|
||||
const updates = Array.isArray(data) ? data : [
|
||||
data
|
||||
];
|
||||
for (const update of updates){
|
||||
// TODO this won't capture changes to CSS since they don't result in a "merged" update
|
||||
if (update.type !== 'partial' || update.instruction.type !== 'ChunkListUpdate' || update.instruction.merged === undefined) {
|
||||
continue;
|
||||
}
|
||||
for (const mergedUpdate of update.instruction.merged){
|
||||
for (const name of Object.keys(mergedUpdate.entries)){
|
||||
const res = /(.*)\s+[([].*/.exec(name);
|
||||
if (res === null) {
|
||||
continue;
|
||||
}
|
||||
updatedModules.add(res[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return updatedModules;
|
||||
}
|
||||
|
||||
//# sourceMappingURL=turbopack-hot-reloader-common.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user