You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
8.7 KiB
294 lines
8.7 KiB
/** |
|
* Copyright (c) 2015-present, Facebook, Inc. |
|
* |
|
* This source code is licensed under the MIT license found in the |
|
* LICENSE file in the root directory of this source tree. |
|
*/ |
|
|
|
'use strict'; |
|
|
|
// This alternative WebpackDevServer combines the functionality of: |
|
// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js |
|
// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js |
|
|
|
// It only supports their simplest configuration (hot updates on same server). |
|
// It makes some opinionated choices on top, like adding a syntax error overlay |
|
// that looks similar to our console output. The error overlay is inspired by: |
|
// https://github.com/glenjamin/webpack-hot-middleware |
|
|
|
var stripAnsi = require('strip-ansi'); |
|
var url = require('url'); |
|
var launchEditorEndpoint = require('./launchEditorEndpoint'); |
|
var formatWebpackMessages = require('./formatWebpackMessages'); |
|
var ErrorOverlay = require('react-error-overlay'); |
|
|
|
ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) { |
|
// Keep this sync with errorOverlayMiddleware.js |
|
fetch( |
|
launchEditorEndpoint + |
|
'?fileName=' + |
|
window.encodeURIComponent(errorLocation.fileName) + |
|
'&lineNumber=' + |
|
window.encodeURIComponent(errorLocation.lineNumber || 1) + |
|
'&colNumber=' + |
|
window.encodeURIComponent(errorLocation.colNumber || 1) |
|
); |
|
}); |
|
|
|
// We need to keep track of if there has been a runtime error. |
|
// Essentially, we cannot guarantee application state was not corrupted by the |
|
// runtime error. To prevent confusing behavior, we forcibly reload the entire |
|
// application. This is handled below when we are notified of a compile (code |
|
// change). |
|
// See https://github.com/facebook/create-react-app/issues/3096 |
|
var hadRuntimeError = false; |
|
ErrorOverlay.startReportingRuntimeErrors({ |
|
onError: function () { |
|
hadRuntimeError = true; |
|
}, |
|
filename: '/static/js/bundle.js', |
|
}); |
|
|
|
if (module.hot && typeof module.hot.dispose === 'function') { |
|
module.hot.dispose(function () { |
|
// TODO: why do we need this? |
|
ErrorOverlay.stopReportingRuntimeErrors(); |
|
}); |
|
} |
|
|
|
// Connect to WebpackDevServer via a socket. |
|
var connection = new WebSocket( |
|
url.format({ |
|
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws', |
|
hostname: process.env.WDS_SOCKET_HOST || window.location.hostname, |
|
port: process.env.WDS_SOCKET_PORT || window.location.port, |
|
// Hardcoded in WebpackDevServer |
|
pathname: process.env.WDS_SOCKET_PATH || '/ws', |
|
slashes: true, |
|
}) |
|
); |
|
|
|
// Unlike WebpackDevServer client, we won't try to reconnect |
|
// to avoid spamming the console. Disconnect usually happens |
|
// when developer stops the server. |
|
connection.onclose = function () { |
|
if (typeof console !== 'undefined' && typeof console.info === 'function') { |
|
console.info( |
|
'The development server has disconnected.\nRefresh the page if necessary.' |
|
); |
|
} |
|
}; |
|
|
|
// 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(); |
|
|
|
var isHotUpdate = !isFirstCompilation; |
|
isFirstCompilation = false; |
|
hasCompileErrors = false; |
|
|
|
// Attempt to apply hot updates or reload. |
|
if (isHotUpdate) { |
|
tryApplyUpdates(function onHotUpdateSuccess() { |
|
// Only dismiss it when we're sure it's a hot update. |
|
// Otherwise it would flicker right before the reload. |
|
tryDismissErrorOverlay(); |
|
}); |
|
} |
|
} |
|
|
|
// Compilation with warnings (e.g. ESLint). |
|
function handleWarnings(warnings) { |
|
clearOutdatedErrors(); |
|
|
|
var isHotUpdate = !isFirstCompilation; |
|
isFirstCompilation = false; |
|
hasCompileErrors = false; |
|
|
|
function printWarnings() { |
|
// Print warnings to the console. |
|
var formatted = formatWebpackMessages({ |
|
warnings: warnings, |
|
errors: [], |
|
}); |
|
|
|
if (typeof console !== 'undefined' && typeof console.warn === 'function') { |
|
for (var 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) { |
|
tryApplyUpdates(function onSuccessfulHotUpdate() { |
|
// Only dismiss it when we're sure it's a hot update. |
|
// Otherwise it would flicker right before the reload. |
|
tryDismissErrorOverlay(); |
|
}); |
|
} |
|
} |
|
|
|
// 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. |
|
ErrorOverlay.reportBuildError(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. |
|
} |
|
|
|
function tryDismissErrorOverlay() { |
|
if (!hasCompileErrors) { |
|
ErrorOverlay.dismissBuildError(); |
|
} |
|
} |
|
|
|
// There is a newer version of the code available. |
|
function handleAvailableHash(hash) { |
|
// Update last known compilation hash. |
|
mostRecentCompilationHash = hash; |
|
} |
|
|
|
// Handle messages from the server. |
|
connection.onmessage = function (e) { |
|
var message = JSON.parse(e.data); |
|
switch (message.type) { |
|
case 'hash': |
|
handleAvailableHash(message.data); |
|
break; |
|
case 'still-ok': |
|
case 'ok': |
|
handleSuccess(); |
|
break; |
|
case 'content-changed': |
|
// Triggered when a file from `contentBase` changed. |
|
window.location.reload(); |
|
break; |
|
case 'warnings': |
|
handleWarnings(message.data); |
|
break; |
|
case 'errors': |
|
handleErrors(message.data); |
|
break; |
|
default: |
|
// Do nothing. |
|
} |
|
}; |
|
|
|
// 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 canAcceptErrors() { |
|
// NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string. |
|
const hasReactRefresh = process.env.FAST_REFRESH; |
|
|
|
const status = module.hot.status(); |
|
// React refresh can handle hot-reloading over errors. |
|
// However, when hot-reload status is abort or fail, |
|
// it indicates the current update cannot be applied safely, |
|
// and thus we should bail out to a forced reload for consistency. |
|
return hasReactRefresh && ['abort', 'fail'].indexOf(status) === -1; |
|
} |
|
|
|
// Attempt to update code on the fly, fall back to a hard reload. |
|
function tryApplyUpdates(onHotUpdateSuccess) { |
|
if (!module.hot) { |
|
// HotModuleReplacementPlugin is not in webpack configuration. |
|
window.location.reload(); |
|
return; |
|
} |
|
|
|
if (!isUpdateAvailable() || !canApplyUpdates()) { |
|
return; |
|
} |
|
|
|
function handleApplyUpdates(err, updatedModules) { |
|
const haveErrors = err || hadRuntimeError; |
|
// When there is no error but updatedModules is unavailable, |
|
// it indicates a critical failure in hot-reloading, |
|
// e.g. server is not ready to serve new bundle, |
|
// and hence we need to do a forced reload. |
|
const needsForcedReload = !err && !updatedModules; |
|
if ((haveErrors && !canAcceptErrors()) || needsForcedReload) { |
|
window.location.reload(); |
|
return; |
|
} |
|
|
|
if (typeof onHotUpdateSuccess === 'function') { |
|
// Maybe we want to do something. |
|
onHotUpdateSuccess(); |
|
} |
|
|
|
if (isUpdateAvailable()) { |
|
// While we were updating, there was a new update! Do it again. |
|
tryApplyUpdates(); |
|
} |
|
} |
|
|
|
// https://webpack.github.io/docs/hot-module-replacement.html#check |
|
var result = module.hot.check(/* autoApply */ true, handleApplyUpdates); |
|
|
|
// // webpack 2 returns a Promise instead of invoking a callback |
|
if (result && result.then) { |
|
result.then( |
|
function (updatedModules) { |
|
handleApplyUpdates(null, updatedModules); |
|
}, |
|
function (err) { |
|
handleApplyUpdates(err, null); |
|
} |
|
); |
|
} |
|
}
|
|
|