Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
webpackHotDevClient.js 8.93 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 
'use strict';
11
12 
// This alternative WebpackDevServer combines the functionality of:
13 
// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
14 
// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
15
16 
// It only supports their simplest configuration (hot updates on same server).
17 
// It makes some opinionated choices on top, like adding a syntax error overlay
18 
// that looks similar to our console output. The error overlay is inspired by:
19 
// https://github.com/glenjamin/webpack-hot-middleware
20
21 
var ansiHTML = require('ansi-html');
22 
var SockJS = require('sockjs-client');
23 
var stripAnsi = require('strip-ansi');
24 
var url = require('url');
25 
var formatWebpackMessages = require('./formatWebpackMessages');
26 
var Entities = require('html-entities').AllHtmlEntities;
27 
var entities = new Entities();
28
29 
// Color scheme inspired by https://github.com/glenjamin/webpack-hot-middleware
30 
var colors = {
31 
  reset: ['transparent', 'transparent'],
32 
  black: '181818',
33 
  red: 'E36049',
34 
  green: 'B3CB74',
35 
  yellow: 'FFD080',
36 
  blue: '7CAFC2',
37 
  magenta: '7FACCA',
38 
  cyan: 'C3C2EF',
39 
  lightgrey: 'EBE7E3',
40 
  darkgrey: '6D7891'
41 
};
42 
ansiHTML.setColors(colors);
43
44 
function createOverlayIframe(onIframeLoad) {
45 
  var iframe = document.createElement('iframe');
46 
  iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
47 
  iframe.src = 'about:blank';
48 
  iframe.style.position = 'fixed';
49 
  iframe.style.left = 0;
50 
  iframe.style.top = 0;
51 
  iframe.style.right = 0;
52 
  iframe.style.bottom = 0;
53 
  iframe.style.width = '100vw';
54 
  iframe.style.height = '100vh';
55 
  iframe.style.border = 'none';
56 
  iframe.style.zIndex = 9999999999;
57 
  iframe.onload = onIframeLoad;
58 
  return iframe;
59 
}
60
61 
function addOverlayDivTo(iframe) {
62 
  var div =  iframe.contentDocument.createElement('div');
63 
  div.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
64 
  div.style.position = 'fixed';
65 
  div.style.boxSizing = 'border-box';
66 
  div.style.left = 0;
67 
  div.style.top = 0;
68 
  div.style.right = 0;
69 
  div.style.bottom = 0;
70 
  div.style.width = '100vw';
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
div.style.height = '100vh'; div.style.backgroundColor = 'black'; 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)); }); } function destroyErrorOverlay() { if (!overlayDiv) { // It is not there in the first place. return; } // Clean up and reset internal state. document.body.removeChild(overlayIframe); overlayDiv = null; overlayIframe = null; lastOnOverlayDivReady = null; }