Skip to content

Commit 011bcf1

Browse files
alexander-akaitalexander-akait
authored
fix: close overlay on disconnection (#3825)
1 parent 94c398b commit 011bcf1

File tree

4 files changed

+322
-119
lines changed

4 files changed

+322
-119
lines changed

‎client-src/index.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@ const onSocketMessage = {
161161
log.warn(strippedWarnings[i]);
162162
}
163163

164-
const needShowOverlay =
164+
const needShowOverlayForWarnings =
165165
typeof options.overlay === "boolean"
166166
? options.overlay
167167
: options.overlay && options.overlay.warnings;
168168

169-
if (needShowOverlay) {
169+
if (needShowOverlayForWarnings) {
170170
show(warnings, "warnings");
171171
}
172172

@@ -185,12 +185,12 @@ const onSocketMessage = {
185185
log.error(strippedErrors[i]);
186186
}
187187

188-
const needShowOverlay =
188+
const needShowOverlayForErrors =
189189
typeof options.overlay === "boolean"
190190
? options.overlay
191191
: options.overlay && options.overlay.errors;
192192

193-
if (needShowOverlay) {
193+
if (needShowOverlayForErrors) {
194194
show(errors, "errors");
195195
}
196196
},
@@ -200,6 +200,10 @@ const onSocketMessage = {
200200
close() {
201201
log.info("Disconnected!");
202202

203+
if (options.overlay) {
204+
hide();
205+
}
206+
203207
sendMessage("Close");
204208
},
205209
};

‎test/e2e/__snapshots__/overlay.test.js.snap.webpack4

+120-50
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`overlay should not show a warning when "client.overlay" is "false": page html 1`] = `
4+
"<body>
5+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
6+
</body>
7+
"
8+
`;
9+
10+
exports[`overlay should not show a warning when "client.overlay.warnings" is "false": page html 1`] = `
11+
"<body>
12+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
13+
</body>
14+
"
15+
`;
16+
17+
exports[`overlay should not show an error when "client.overlay" is "false": page html 1`] = `
18+
"<body>
19+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
20+
</body>
21+
"
22+
`;
23+
24+
exports[`overlay should not show an error when "client.overlay.errors" is "false": page html 1`] = `
25+
"<body>
26+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
27+
</body>
28+
"
29+
`;
30+
331
exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = `
432
"<body>
533
<div
@@ -314,35 +342,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
314342
"
315343
`;
316344

317-
exports[`overlay should not show on a warning when "client.overlay" is "false": page html 1`] = `
318-
"<body>
319-
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
320-
</body>
321-
"
322-
`;
323-
324-
exports[`overlay should not show on a warning when "client.overlay.warnings" is "false": page html 1`] = `
325-
"<body>
326-
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
327-
</body>
328-
"
329-
`;
330-
331-
exports[`overlay should not show on an error when "client.overlay" is "false": page html 1`] = `
332-
"<body>
333-
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
334-
</body>
335-
"
336-
`;
337-
338-
exports[`overlay should not show on an error when "client.overlay.errors" is "false": page html 1`] = `
339-
"<body>
340-
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
341-
</body>
342-
"
343-
`;
344-
345-
exports[`overlay should show on a warning and error for initial compilation and protects against xss: overlay html 1`] = `
345+
exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = `
346346
"<body>
347347
<div
348348
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -391,7 +391,7 @@ exports[`overlay should show on a warning and error for initial compilation and
391391
"
392392
`;
393393

394-
exports[`overlay should show on a warning and error for initial compilation and protects against xss: page html 1`] = `
394+
exports[`overlay should show a warning and error for initial compilation and protects against xss: page html 1`] = `
395395
"<body>
396396
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
397397
<iframe
@@ -410,7 +410,7 @@ exports[`overlay should show on a warning and error for initial compilation and
410410
"
411411
`;
412412

413-
exports[`overlay should show on a warning and error for initial compilation: overlay html 1`] = `
413+
exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = `
414414
"<body>
415415
<div
416416
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -474,7 +474,7 @@ exports[`overlay should show on a warning and error for initial compilation: ove
474474
"
475475
`;
476476

477-
exports[`overlay should show on a warning and error for initial compilation: page html 1`] = `
477+
exports[`overlay should show a warning and error for initial compilation: page html 1`] = `
478478
"<body>
479479
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
480480
<iframe
@@ -493,7 +493,77 @@ exports[`overlay should show on a warning and error for initial compilation: pag
493493
"
494494
`;
495495

496-
exports[`overlay should show on a warning for initial compilation: overlay html 1`] = `
496+
exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = `
497+
"<body>
498+
<div
499+
id=\\"webpack-dev-server-client-overlay-div\\"
500+
style=\\"
501+
position: fixed;
502+
box-sizing: border-box;
503+
inset: 0px;
504+
width: 100vw;
505+
height: 100vh;
506+
background-color: rgba(0, 0, 0, 0.85);
507+
color: rgb(232, 232, 232);
508+
font-family: Menlo, Consolas, monospace;
509+
font-size: large;
510+
padding: 2rem;
511+
line-height: 1.2;
512+
white-space: pre-wrap;
513+
overflow: auto;
514+
\\"
515+
>
516+
<span>Compiled with problems:</span
517+
><button
518+
style=\\"
519+
background: transparent;
520+
border: none;
521+
font-size: 20px;
522+
font-weight: bold;
523+
color: white;
524+
cursor: pointer;
525+
float: right;
526+
\\"
527+
>
528+
X</button
529+
><br /><br />
530+
<div>
531+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
532+
<div>Warning from compilation</div>
533+
<br /><br />
534+
</div>
535+
</div>
536+
</body>
537+
"
538+
`;
539+
540+
exports[`overlay should show a warning and hide them after closing connection: page html 1`] = `
541+
"<body>
542+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
543+
<iframe
544+
id=\\"webpack-dev-server-client-overlay\\"
545+
src=\\"about:blank\\"
546+
style=\\"
547+
position: fixed;
548+
inset: 0px;
549+
width: 100vw;
550+
height: 100vh;
551+
border: none;
552+
z-index: 2147483647;
553+
\\"
554+
></iframe>
555+
</body>
556+
"
557+
`;
558+
559+
exports[`overlay should show a warning and hide them after closing connection: page html 2`] = `
560+
"<body>
561+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
562+
</body>
563+
"
564+
`;
565+
566+
exports[`overlay should show a warning for initial compilation: overlay html 1`] = `
497567
"<body>
498568
<div
499569
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -537,7 +607,7 @@ exports[`overlay should show on a warning for initial compilation: overlay html
537607
"
538608
`;
539609

540-
exports[`overlay should show on a warning for initial compilation: page html 1`] = `
610+
exports[`overlay should show a warning for initial compilation: page html 1`] = `
541611
"<body>
542612
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
543613
<iframe
@@ -556,7 +626,7 @@ exports[`overlay should show on a warning for initial compilation: page html 1`]
556626
"
557627
`;
558628

559-
exports[`overlay should show on a warning when "client.overlay" is "true": overlay html 1`] = `
629+
exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = `
560630
"<body>
561631
<div
562632
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -600,7 +670,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
600670
"
601671
`;
602672

603-
exports[`overlay should show on a warning when "client.overlay" is "true": page html 1`] = `
673+
exports[`overlay should show a warning when "client.overlay" is "true": page html 1`] = `
604674
"<body>
605675
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
606676
<iframe
@@ -619,7 +689,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": page
619689
"
620690
`;
621691

622-
exports[`overlay should show on a warning when "client.overlay.errors" is "true": overlay html 1`] = `
692+
exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = `
623693
"<body>
624694
<div
625695
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -663,7 +733,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
663733
"
664734
`;
665735

666-
exports[`overlay should show on a warning when "client.overlay.errors" is "true": page html 1`] = `
736+
exports[`overlay should show a warning when "client.overlay.errors" is "true": page html 1`] = `
667737
"<body>
668738
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
669739
<iframe
@@ -682,7 +752,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
682752
"
683753
`;
684754

685-
exports[`overlay should show on a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
755+
exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
686756
"<body>
687757
<div
688758
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -726,7 +796,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
726796
"
727797
`;
728798

729-
exports[`overlay should show on a warning when "client.overlay.warnings" is "true": page html 1`] = `
799+
exports[`overlay should show a warning when "client.overlay.warnings" is "true": page html 1`] = `
730800
"<body>
731801
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
732802
<iframe
@@ -745,7 +815,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
745815
"
746816
`;
747817

748-
exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = `
818+
exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = `
749819
"<body>
750820
<div
751821
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -802,7 +872,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
802872
"
803873
`;
804874

805-
exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = `
875+
exports[`overlay should show an ansi formatted error for initial compilation: page html 1`] = `
806876
"<body>
807877
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
808878
<iframe
@@ -821,7 +891,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
821891
"
822892
`;
823893

824-
exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
894+
exports[`overlay should show an error for initial compilation: overlay html 1`] = `
825895
"<body>
826896
<div
827897
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -865,7 +935,7 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
865935
"
866936
`;
867937

868-
exports[`overlay should show on an error for initial compilation: page html 1`] = `
938+
exports[`overlay should show an error for initial compilation: page html 1`] = `
869939
"<body>
870940
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
871941
<iframe
@@ -884,7 +954,7 @@ exports[`overlay should show on an error for initial compilation: page html 1`]
884954
"
885955
`;
886956

887-
exports[`overlay should show on an error when "client.overlay" is "true": overlay html 1`] = `
957+
exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = `
888958
"<body>
889959
<div
890960
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -928,7 +998,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
928998
"
929999
`;
9301000

931-
exports[`overlay should show on an error when "client.overlay" is "true": page html 1`] = `
1001+
exports[`overlay should show an error when "client.overlay" is "true": page html 1`] = `
9321002
"<body>
9331003
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
9341004
<iframe
@@ -947,7 +1017,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": page h
9471017
"
9481018
`;
9491019

950-
exports[`overlay should show on an error when "client.overlay.errors" is "true": overlay html 1`] = `
1020+
exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = `
9511021
"<body>
9521022
<div
9531023
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -991,7 +1061,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
9911061
"
9921062
`;
9931063

994-
exports[`overlay should show on an error when "client.overlay.errors" is "true": page html 1`] = `
1064+
exports[`overlay should show an error when "client.overlay.errors" is "true": page html 1`] = `
9951065
"<body>
9961066
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
9971067
<iframe
@@ -1010,7 +1080,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
10101080
"
10111081
`;
10121082

1013-
exports[`overlay should show on an error when "client.overlay.warnings" is "true": overlay html 1`] = `
1083+
exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = `
10141084
"<body>
10151085
<div
10161086
id=\\"webpack-dev-server-client-overlay-div\\"
@@ -1054,7 +1124,7 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
10541124
"
10551125
`;
10561126

1057-
exports[`overlay should show on an error when "client.overlay.warnings" is "true": page html 1`] = `
1127+
exports[`overlay should show an error when "client.overlay.warnings" is "true": page html 1`] = `
10581128
"<body>
10591129
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
10601130
<iframe

0 commit comments

Comments
 (0)