Created
February 29, 2020 00:51
-
-
Save charrondev/c06cd5a9616a1d1a0db45de6f10b592b to your computer and use it in GitHub Desktop.
react-dev-utils/webpackDevClient for react-refresh-webpack-plugin.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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. | |
*/ | |
// This file is a fork of https://github.com/facebook/create-react-app/blob/v3.4.0/packages/react-dev-utils/webpackHotDevClient.js | |
// It removes all error & warning handling so the new ones from https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/master/src/overlay can be used instead. | |
// 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). | |
var url = require('url'); | |
// 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 || '/sockjs-node', | |
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; | |
// Successful compilation. | |
function handleSuccess() { | |
var isHotUpdate = !isFirstCompilation; | |
isFirstCompilation = false; | |
// Attempt to apply hot updates or reload. | |
if (isHotUpdate) { | |
tryApplyUpdates(); | |
} | |
} | |
// 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; | |
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'; | |
} | |
// 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() { | |
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); | |
} | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment