Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
webpackHotDevClient.js 8.12 KiB
1 
/**
2 
 * Copyright (c) 2015-present, Facebook, Inc.
3 
 * All rights reserved.
4 
 *
5 
 * This source code is licensed under the BSD-style license found in the
6 
 * LICENSE file in the root directory of this source tree. An additional grant
7 
 * of patent rights can be found in the PATENTS file in the same directory.
8 
 */
9
10 
// This alternative WebpackDevServer combines the functionality of:
11 
// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
12 
// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
13
14 
// It only supports their simplest configuration (hot updates on same server).
15 
// It makes some opinionated choices on top, like adding a syntax error overlay
16 
// that looks similar to our console output. The error overlay is inspired by:
17 
// https://github.com/glenjamin/webpack-hot-middleware
18
19 
var ansiHTML = require('ansi-html');
20 
var SockJS = require('sockjs-client');
21 
var stripAnsi = require('strip-ansi');
22 
var url = require('url');
23 
var formatWebpackMessages = require('./formatWebpackMessages');
24 
var Entities = require('html-entities').AllHtmlEntities;
25 
var entities = new Entities();
26
27 
// Color scheme inspired by https://github.com/glenjamin/webpack-hot-middleware
28 
var colors = {
29 
  reset: ['transparent', 'transparent'],
30 
  black: '181818',
31 
  red: 'E36049',
32 
  green: 'B3CB74',
33 
  yellow: 'FFD080',
34 
  blue: '7CAFC2',
35 
  magenta: '7FACCA',
36 
  cyan: 'C3C2EF',
37 
  lightgrey: 'EBE7E3',
38 
  darkgrey: '6D7891'
39 
};
40 
ansiHTML.setColors(colors);
41
42 
function createOverlayIframe(onIframeLoad) {
43 
  var iframe = document.createElement('iframe');
44 
  iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
45 
  iframe.src = 'about:blank';
46 
  iframe.style.position = 'fixed';
47 
  iframe.style.left = 0;
48 
  iframe.style.top = 0;
49 
  iframe.style.right = 0;
50 
  iframe.style.bottom = 0;
51 
  iframe.style.width = '100vw';
52 
  iframe.style.height = '100vh';
53 
  iframe.style.border = 'none';
54 
  iframe.style.zIndex = 9999999999;
55 
  iframe.onload = onIframeLoad;
56 
  return iframe;
57 
}
58
59 
function addOverlayDivTo(iframe) {
60 
  var div =  iframe.contentDocument.createElement('div');
61 
  div.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
62 
  div.style.position = 'fixed';
63 
  div.style.boxSizing = 'border-box';
64 
  div.style.left = 0;
65 
  div.style.top = 0;
66 
  div.style.right = 0;
67 
  div.style.bottom = 0;
68 
  div.style.width = '100vw';
69 
  div.style.height = '100vh';
70 
  div.style.backgroundColor = 'black';
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
div.style.color = '#E8E8E8'; div.style.fontFamily = 'Menlo, Consolas, monospace'; div.style.fontSize = 'large'; div.style.padding = '2rem'; div.style.lineHeight = '1.2'; div.style.whiteSpace = 'pre-wrap'; div.style.overflow = 'auto'; iframe.contentDocument.body.appendChild(div); return div; } var overlayIframe = null; var overlayDiv = null; var lastOnOverlayDivReady = null; function ensureOverlayDivExists(onOverlayDivReady) { if (overlayDiv) { // Everything is ready, call the callback right away. onOverlayDivReady(overlayDiv); return; } // Creating an iframe may be asynchronous so we'll schedule the callback. // In case of multiple calls, last callback wins. lastOnOverlayDivReady = onOverlayDivReady; if (overlayIframe) { // We're already creating it. return; } // Create iframe and, when it is ready, a div inside it. overlayIframe = createOverlayIframe(function onIframeLoad() { overlayDiv = addOverlayDivTo(overlayIframe); // Now we can talk! lastOnOverlayDivReady(overlayDiv); }); // Zalgo alert: onIframeLoad() will be called either synchronously // or asynchronously depending on the browser. // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires. document.body.appendChild(overlayIframe); } function showErrorOverlay(message) { ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) { // Make it look similar to our terminal. overlayDiv.innerHTML = '<span style="color: #' + colors.red + '">Failed to compile.</span><br><br>' + ansiHTML(entities.encode(message)); }); } // Connect to WebpackDevServer via a socket. var connection = new SockJS(url.format({ protocol: window.location.protocol, hostname: window.location.hostname, port: window.location.port, // Hardcoded in WebpackDevServer pathname: '/sockjs-node' })); // 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() { console.info( 'The development server has disconnected.\nRefresh the page if necessary.'
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
); }; // 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 (hasCompileErrors && typeof console.clear === 'function') { console.clear(); } } // Successful compilation. function handleSuccess() { clearOutdatedErrors(); var isHotUpdate = !isFirstCompilation; isFirstCompilation = false; hasCompileErrors = false; // Attempt to apply hot updates or reload. if (isHotUpdate) { tryApplyUpdates(); } } // Compilation with warnings (e.g. ESLint). function handleWarnings(warnings) { clearOutdatedErrors(); var isHotUpdate = !isFirstCompilation; isFirstCompilation = false; hasCompileErrors = false; function printWarnings() { // Print warnings to the console. for (var i = 0; i < warnings.length; i++) { console.warn(stripAnsi(warnings[i])); } } // Attempt to apply hot updates or reload. if (isHotUpdate) { tryApplyUpdates(function onSuccessfulHotUpdate() { // Only print warnings if we aren't refreshing the page. // Otherwise they'll disappear right away anyway. printWarnings(); }); } else { // Print initial warnings immediately. printWarnings(); } } // 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: [] });
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
// Only show the first error. showErrorOverlay(formatted.errors[0]); // Also log them to the console. 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. } // 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 'ok': handleSuccess(); 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'; } // 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; } // https://webpack.github.io/docs/hot-module-replacement.html#check module.hot.check(/* autoApply */true, function(err, updatedModules) { if (err || !updatedModules) { window.location.reload(); return; }
281282283284285286287288289290291292293
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(); } }); };