1212var SockJS = require ( 'sockjs-client' ) ;
1313var stripAnsi = require ( 'strip-ansi' ) ;
1414var url = require ( 'url' ) ;
15+ var launchEditorEndpoint = require ( 'react-dev-utils/launchEditorEndpoint' ) ;
1516var formatWebpackMessages = require ( 'react-dev-utils/formatWebpackMessages' ) ;
16- var Entities = require ( 'html-entities' ) . AllHtmlEntities ;
17- var ansiHTML = require ( 'react-dev-utils/ansiHTML' ) ;
17+ var ErrorOverlay = require ( 'react-error-overlay' ) ;
1818var highlightElmCompilerErrors = require ( './highlightElmCompilerErrors' ) ;
19- var entities = new Entities ( ) ;
20-
21- function createOverlayIframe ( onIframeLoad ) {
22- var iframe = document . createElement ( 'iframe' ) ;
23- iframe . id = 'react-dev-utils-webpack-hot-dev-client-overlay' ;
24- iframe . src = 'about:blank' ;
25- iframe . style . position = 'fixed' ;
26- iframe . style . left = 0 ;
27- iframe . style . top = 0 ;
28- iframe . style . right = 0 ;
29- iframe . style . bottom = 0 ;
30- iframe . style . width = '100vw' ;
31- iframe . style . height = '100vh' ;
32- iframe . style . border = 'none' ;
33- iframe . style . zIndex = 2147483647 ;
34- iframe . onload = onIframeLoad ;
35- return iframe ;
36- }
37-
38- function addOverlayDivTo ( iframe ) {
39- // TODO: unify these styles with react-error-overlay
40- iframe . contentDocument . body . style . margin = 0 ;
41- iframe . contentDocument . body . style . maxWidth = '100vw' ;
42-
43- var outerDiv = iframe . contentDocument . createElement ( 'div' ) ;
44- outerDiv . id = 'react-dev-utils-webpack-hot-dev-client-overlay-div' ;
45- outerDiv . style . width = '100%' ;
46- outerDiv . style . height = '100%' ;
47- outerDiv . style . boxSizing = 'border-box' ;
48- outerDiv . style . textAlign = 'center' ;
49- outerDiv . style . backgroundColor = 'rgb(255, 255, 255)' ;
50-
51- var div = iframe . contentDocument . createElement ( 'div' ) ;
52- div . style . position = 'relative' ;
53- div . style . display = 'inline-flex' ;
54- div . style . flexDirection = 'column' ;
55- div . style . height = '100%' ;
56- div . style . width = '1024px' ;
57- div . style . maxWidth = '100%' ;
58- div . style . overflowX = 'hidden' ;
59- div . style . overflowY = 'auto' ;
60- div . style . padding = '0.5rem' ;
61- div . style . boxSizing = 'border-box' ;
62- div . style . textAlign = 'left' ;
63- div . style . fontFamily = 'Consolas, Menlo, monospace' ;
64- div . style . fontSize = '11px' ;
65- div . style . whiteSpace = 'pre-wrap' ;
66- div . style . wordBreak = 'break-word' ;
67- div . style . lineHeight = '1.5' ;
68- div . style . color = 'rgb(41, 50, 56)' ;
69-
70- outerDiv . appendChild ( div ) ;
71- iframe . contentDocument . body . appendChild ( outerDiv ) ;
72- return div ;
73- }
74-
75- function overlayHeaderStyle ( ) {
76- return (
77- 'font-size: 2em;' +
78- 'font-family: sans-serif;' +
79- 'color: rgb(206, 17, 38);' +
80- 'white-space: pre-wrap;' +
81- 'margin: 0 2rem 0.75rem 0px;' +
82- 'flex: 0 0 auto;' +
83- 'max-height: 35%;' +
84- 'overflow: auto;'
85- ) ;
86- }
87-
88- var overlayIframe = null ;
89- var overlayDiv = null ;
90- var lastOnOverlayDivReady = null ;
91-
92- function ensureOverlayDivExists ( onOverlayDivReady ) {
93- if ( overlayDiv ) {
94- // Everything is ready, call the callback right away.
95- onOverlayDivReady ( overlayDiv ) ;
96- return ;
97- }
98-
99- // Creating an iframe may be asynchronous so we'll schedule the callback.
100- // In case of multiple calls, last callback wins.
101- lastOnOverlayDivReady = onOverlayDivReady ;
102-
103- if ( overlayIframe ) {
104- // We're already creating it.
105- return ;
106- }
107-
108- // Create iframe and, when it is ready, a div inside it.
109- overlayIframe = createOverlayIframe ( function onIframeLoad ( ) {
110- overlayDiv = addOverlayDivTo ( overlayIframe ) ;
111- // Now we can talk!
112- lastOnOverlayDivReady ( overlayDiv ) ;
113- } ) ;
114-
115- // Zalgo alert: onIframeLoad() will be called either synchronously
116- // or asynchronously depending on the browser.
117- // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
118- document . body . appendChild ( overlayIframe ) ;
119- }
12019
121- function showErrorOverlay ( message ) {
122- ensureOverlayDivExists ( function onOverlayDivReady ( overlayDiv ) {
123- // TODO: unify this with our runtime overlay
124- overlayDiv . innerHTML =
125- '<div style="' +
126- overlayHeaderStyle ( ) +
127- '">Failed to compile</div>' +
128- '<pre style="' +
129- 'display: block; padding: 0.5em; margin-top: 0; ' +
130- 'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
131- 'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
132- '<code style="font-family: Consolas, Menlo, monospace;">' +
133- ansiHTML ( entities . encode ( message ) ) +
134- '</code></pre>' +
135- '<div style="' +
136- 'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
137- 'flex: 0 0 auto">' +
138- 'This error occurred during the build time and cannot be dismissed.</div>' ;
20+ ErrorOverlay . startReportingRuntimeErrors ( {
21+ launchEditorEndpoint : launchEditorEndpoint ,
22+ onError : function ( ) {
23+ // TODO: why do we need this?
24+ if ( module . hot && typeof module . hot . decline === 'function' ) {
25+ module . hot . decline ( ) ;
26+ }
27+ } ,
28+ filename : '/static/js/bundle.js'
29+ } ) ;
30+
31+ if ( module . hot && typeof module . hot . dispose === 'function' ) {
32+ module . hot . dispose ( function ( ) {
33+ // TODO: why do we need this?
34+ ErrorOverlay . stopReportingRuntimeErrors ( ) ;
13935 } ) ;
14036}
14137
142- function destroyErrorOverlay ( ) {
143- if ( ! overlayDiv ) {
144- // It is not there in the first place.
145- return ;
146- }
147-
148- // Clean up and reset internal state.
149- document . body . removeChild ( overlayIframe ) ;
150- overlayDiv = null ;
151- overlayIframe = null ;
152- lastOnOverlayDivReady = null ;
153- }
154-
15538// Connect to WebpackDevServer via a socket.
15639var connection = new SockJS (
15740 url . format ( {
@@ -199,9 +82,9 @@ function handleSuccess() {
19982 // Attempt to apply hot updates or reload.
20083 if ( isHotUpdate ) {
20184 tryApplyUpdates ( function onHotUpdateSuccess ( ) {
202- // Only destroy it when we're sure it's a hot update.
85+ // Only dismiss it when we're sure it's a hot update.
20386 // Otherwise it would flicker right before the reload.
204- destroyErrorOverlay ( ) ;
87+ ErrorOverlay . dismissBuildError ( ) ;
20588 } ) ;
20689 }
20790}
@@ -241,9 +124,9 @@ function handleWarnings(warnings) {
241124 // Only print warnings if we aren't refreshing the page.
242125 // Otherwise they'll disappear right away anyway.
243126 printWarnings ( ) ;
244- // Only destroy it when we're sure it's a hot update.
127+ // Only dismiss it when we're sure it's a hot update.
245128 // Otherwise it would flicker right before the reload.
246- destroyErrorOverlay ( ) ;
129+ ErrorOverlay . dismissBuildError ( ) ;
247130 } ) ;
248131 } else {
249132 // Print initial warnings immediately.
@@ -267,7 +150,7 @@ function handleErrors(errors) {
267150 ) ;
268151
269152 // Only show the first error.
270- showErrorOverlay ( formatted . errors [ 0 ] ) ;
153+ ErrorOverlay . reportBuildError ( formatted . errors [ 0 ] ) ;
271154
272155 // Also log them to the console.
273156 if ( typeof console !== 'undefined' && typeof console . error === 'function' ) {
0 commit comments