Skip to content

Commit 5ed19ec

Browse files
adamdbradleyadamdbradley
committed
feat(dev-server): minify dev server client
1 parent ac13652 commit 5ed19ec

File tree

5 files changed

+80
-42
lines changed

5 files changed

+80
-42
lines changed

‎scripts/build-dev-server-client.js‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const fs = require('fs-extra');
22
const path = require('path');
33
const rollup = require('rollup');
44
const { run, transpile } = require('./script-utils');
5+
const terser = require('terser');
56

67
const ROOT_DIR = path.join(__dirname, '..');
78
const DST_DIR = path.join(ROOT_DIR, 'dist');
@@ -26,26 +27,39 @@ async function bundleDevServerClient() {
2627
const { output } = await rollupBuild.generate({
2728
format: 'esm',
2829

29-
banner: [
30-
'<meta charset="utf-8">',
31-
'💎 Stencil Dev Server',
32-
'<script>',
33-
'/* Dev Server Client */'
34-
].join('\n'),
35-
3630
intro: '(function(iframeWindow, appWindow, appDoc, config) {\n' +
3731
'"use strict";',
3832

39-
outro: '})(window, window.parent, window.parent.document, __DEV_CLIENT_CONFIG__);',
40-
41-
footer: '</script>'
42-
33+
outro: '})(window, window.parent, window.parent.document, window.__DEV_CLIENT_CONFIG__);',
4334
});
4435

4536
let code = output[0].code.trim();
4637
code = code.replace('exports ', '');
4738

48-
await fs.writeFile(outputFile, code);
39+
const results = terser.minify(code);
40+
41+
if (results.error) {
42+
throw new Error(results.error);
43+
}
44+
code = results.code;
45+
46+
const html = [
47+
'<!doctype html>',
48+
'<html>',
49+
'<head>',
50+
'<meta charset="utf-8">',
51+
'<title>Stencil Dev Server Connector &#9889;</title>',
52+
'<script>',
53+
code,
54+
'</script>',
55+
'</head>',
56+
'<body style="background:black;color:white;font:24px monospace;text-align:center;">',
57+
'Stencil Dev Server Connector &#9889;',
58+
'</body>',
59+
'</html>'
60+
];
61+
62+
await fs.writeFile(outputFile, html.join('\n'));
4963
}
5064

5165

‎src/dev-server/dev-client/build-progress.ts‎

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,25 @@
11
import * as d from '../../declarations';
2-
import { onBuildLog, onBuildResults } from './build-events';
2+
import { onBuildLog, onBuildResults, onBuildStatus } from './build-events';
33

44

55
export function initBuildProgress(win: d.DevClientWindow, doc: Document) {
6-
const PROGRESS_BAR_ID = `dev-server-progress`;
76
const barColor = `#5851ff`;
87
const errorColor = `#b70c19`;
9-
let removeTimerId: any;
8+
let addBarTimerId: any;
9+
let removeBarTimerId: any;
1010
let opacityTimerId: any;
1111
let incIntervalId: any;
1212
let progressIncrease: number;
1313
let currentProgress = 0;
1414

1515
function update() {
1616
clearTimeout(opacityTimerId);
17-
clearTimeout(removeTimerId);
17+
clearTimeout(removeBarTimerId);
1818

19-
let progressBar = doc.getElementById(PROGRESS_BAR_ID);
19+
const progressBar = getProgressBar();
2020
if (!progressBar) {
21-
progressBar = doc.createElement('div');
22-
progressBar.id = PROGRESS_BAR_ID;
23-
progressBar.style.position = `absolute`;
24-
progressBar.style.top = `0`;
25-
progressBar.style.left = `0`;
26-
progressBar.style.zIndex = `100001`;
27-
progressBar.style.width = `100%`;
28-
progressBar.style.height = `2px`;
29-
progressBar.style.transform = `scaleX(0)`;
30-
progressBar.style.opacity = `1`;
31-
progressBar.style.background = barColor;
32-
progressBar.style.transformOrigin = `left center`;
33-
progressBar.style.transition = `transform .1s ease-in-out, opacity .5s ease-in`;
34-
(progressBar.style as any).contain = `strict`;
35-
doc.body.appendChild(progressBar);
36-
requestAnimationFrame(update);
21+
createProgressBar();
22+
addBarTimerId = setTimeout(update, 16);
3723
return;
3824
}
3925
progressBar.style.background = barColor;
@@ -57,23 +43,30 @@ export function initBuildProgress(win: d.DevClientWindow, doc: Document) {
5743
progressIncrease = 0.05;
5844
incIntervalId = null;
5945
clearTimeout(opacityTimerId);
60-
clearTimeout(removeTimerId);
46+
clearTimeout(addBarTimerId);
47+
clearTimeout(removeBarTimerId);
6148

62-
const progressBar = doc.getElementById(PROGRESS_BAR_ID);
49+
const progressBar = getProgressBar();
6350
if (progressBar) {
6451
if (currentProgress >= 1) {
6552
progressBar.style.transform = `scaleX(1)`;
6653
}
6754

6855
opacityTimerId = setTimeout(() => {
6956
try {
70-
progressBar.style.opacity = `0`;
57+
const progressBar = getProgressBar();
58+
if (progressBar) {
59+
progressBar.style.opacity = `0`;
60+
}
7161
} catch (e) {}
7262
}, 150);
7363

74-
removeTimerId = setTimeout(() => {
64+
removeBarTimerId = setTimeout(() => {
7565
try {
76-
progressBar.parentNode.removeChild(progressBar);
66+
const progressBar = getProgressBar();
67+
if (progressBar) {
68+
progressBar.parentNode.removeChild(progressBar);
69+
}
7770
} catch (e) {}
7871
}, 1000);
7972
}
@@ -98,7 +91,7 @@ export function initBuildProgress(win: d.DevClientWindow, doc: Document) {
9891

9992
onBuildResults(win, buildResults => {
10093
if (buildResults.hasError) {
101-
const progressBar = doc.getElementById(PROGRESS_BAR_ID);
94+
const progressBar = getProgressBar();
10295
if (progressBar) {
10396
progressBar.style.transform = `scaleX(1)`;
10497
progressBar.style.background = errorColor;
@@ -107,7 +100,38 @@ export function initBuildProgress(win: d.DevClientWindow, doc: Document) {
107100
reset();
108101
});
109102

103+
onBuildStatus(win, buildStatus => {
104+
if (buildStatus === 'disabled') {
105+
reset();
106+
}
107+
});
108+
110109
if (doc.head.dataset.tmpl === 'tmpl-initial-load') {
111110
update();
112111
}
112+
113+
const PROGRESS_BAR_ID = `dev-server-progress-bar`;
114+
115+
function getProgressBar() {
116+
return doc.getElementById(PROGRESS_BAR_ID);
117+
}
118+
119+
function createProgressBar() {
120+
const progressBar = doc.createElement('div');
121+
progressBar.id = PROGRESS_BAR_ID;
122+
progressBar.style.position = `absolute`;
123+
progressBar.style.top = `0`;
124+
progressBar.style.left = `0`;
125+
progressBar.style.zIndex = `100001`;
126+
progressBar.style.width = `100%`;
127+
progressBar.style.height = `2px`;
128+
progressBar.style.transform = `scaleX(0)`;
129+
progressBar.style.opacity = `1`;
130+
progressBar.style.background = barColor;
131+
progressBar.style.transformOrigin = `left center`;
132+
progressBar.style.transition = `transform .1s ease-in-out, opacity .5s ease-in`;
133+
(progressBar.style as any).contain = `strict`;
134+
doc.body.appendChild(progressBar);
135+
}
136+
113137
}

‎src/dev-server/dev-client/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ declare const config: d.DevClientConfig;
99

1010
applyPolyfills(iframeWindow);
1111

12-
initClient(appWindow, appDoc, config);
12+
initClient(appWindow, appDoc, config || {} as any);

‎src/dev-server/serve-dev-client.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ async function serveDevClientScript(devServerConfig: d.DevServerConfig, fs: d.Fi
5050
reloadStrategy: devServerConfig.reloadStrategy
5151
};
5252

53-
content = content.replace('__DEV_CLIENT_CONFIG__', JSON.stringify(devClientConfig));
53+
content = content.replace('window.__DEV_CLIENT_CONFIG__', JSON.stringify(devClientConfig));
5454

5555
res.writeHead(200, util.responseHeaders({
5656
'Content-Type': 'text/html'

‎src/dev-server/serve-file.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,5 +117,5 @@ const urlVersionIds = new Map<string, string>();
117117

118118
function getDevServerClientScript(devServerConfig: d.DevServerConfig, req: d.HttpRequest) {
119119
const devServerClientUrl = util.getDevServerClientUrl(devServerConfig, req.host);
120-
return `\n<iframe title="Stencil dev client" src="${devServerClientUrl}" style="display:block;width:0;height:0;border:0"></iframe>`;
120+
return `\n<iframe title="Stencil Dev Server Connector &#9889;" src="${devServerClientUrl}" style="display:block;width:0;height:0;border:0"></iframe>`;
121121
}

0 commit comments

Comments
 (0)