Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f032868

Browse files
siketyansiketyan
committed
feat(vite-plugin): support https dev server
1 parent 2a629cf commit f032868

15 files changed

Lines changed: 430 additions & 12 deletions

File tree

‎packages/vite-plugin/rollup.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const external: (string | RegExp)[] = [
2929
'node:fs',
3030
'node:path',
3131

32+
/%PROTO%/,
3233
/%PORT%/,
3334
/%PATH%/,
3435
]

‎packages/vite-plugin/src/client/es/loading-page-script.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* service worker takes control of fetch (e.g., in the onInstalled event).
44
*/
55

6-
const VITE_URL = 'http://localhost:%PORT%'
6+
const VITE_URL = '%PROTO%://localhost:%PORT%'
77

88
document.body.innerHTML = `
99
<div

‎packages/vite-plugin/src/node/plugin-background.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const pluginBackground: CrxPluginFn = () => {
3434
},
3535
load(id) {
3636
if (id === workerClientId) {
37-
const base = `http://localhost:${config.server.port}/`
37+
const base = `${config.server.https ? 'https' : 'http'}://localhost:${config.server.port}/`
3838
return defineClientValues(
3939
workerHmrClient.replace('__BASE__', JSON.stringify(base)),
4040
config,
@@ -61,6 +61,7 @@ export const pluginBackground: CrxPluginFn = () => {
6161

6262
let loader: string
6363
if (config.command === 'serve') {
64+
const proto = config.server.https ? 'https' : 'http';
6465
const port = config.server.port?.toString()
6566
if (typeof port === 'undefined')
6667
throw new Error('server port is undefined in watch mode')
@@ -70,20 +71,20 @@ export const pluginBackground: CrxPluginFn = () => {
7071
// can't use import statements
7172

7273
// development, required to define env vars
73-
loader = `import('http://localhost:${port}/@vite/env');\n`
74+
loader = `import('${proto}://localhost:${port}/@vite/env');\n`
7475
// development, required hmr client
75-
loader += `import('http://localhost:${port}${workerClientId}');\n`
76+
loader += `import('${proto}://localhost:${port}${workerClientId}');\n`
7677
// development, optional service worker
7778
if (worker)
78-
loader += `import('http://localhost:${port}/${worker}');\n`
79+
loader += `import('${proto}://localhost:${port}/${worker}');\n`
7980
} else {
8081
// development, required to define env vars
81-
loader = `import 'http://localhost:${port}/@vite/env';\n`
82+
loader = `import '${proto}://localhost:${port}/@vite/env';\n`
8283
// development, required hmr client
83-
loader += `import 'http://localhost:${port}${workerClientId}';\n`
84+
loader += `import '${proto}://localhost:${port}${workerClientId}';\n`
8485
// development, optional service worker
8586
if (worker)
86-
loader += `import 'http://localhost:${port}/${worker}';\n`
87+
loader += `import '${proto}://localhost:${port}/${worker}';\n`
8788
}
8889
} else if (worker) {
8990
// production w/ service worker loader at root, see comment at top of file.

‎packages/vite-plugin/src/node/plugin-manifest.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -378,10 +378,9 @@ Public dir: "${config.publicDir}"`,
378378
const refId = this.emitFile({
379379
type: 'asset',
380380
name: 'loading-page.js',
381-
source: loadingPageScript.replace(
382-
'%PORT%',
383-
`${config.server.port ?? 0}`,
384-
),
381+
source: loadingPageScript
382+
.replace('%PROTO%', config.server.https ? 'https' : 'http')
383+
.replace('%PORT%', `${config.server.port ?? 0}`),
385384
})
386385
const loadingPageScriptName = this.getFileName(refId)
387386
files.html.map((f) =>

‎packages/vite-plugin/tests/out/with-https-server/__snapshots__/build.test.ts.snap‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
// Vitest Snapshot v1
2+
3+
exports[`build fs output > _00 manifest.json 1`] = `
4+
Object {
5+
"action": Object {
6+
"default_popup": "src/popup.html",
7+
},
8+
"background": Object {
9+
"service_worker": "service-worker-loader.js",
10+
"type": "module",
11+
},
12+
"content_scripts": Array [
13+
Object {
14+
"js": Array [
15+
"assets/content.js.hash0.js",
16+
],
17+
"matches": Array [
18+
"https://a.com/*",
19+
"http://b.com/*",
20+
],
21+
},
22+
],
23+
"description": "test extension",
24+
"host_permissions": Array [
25+
"https://c.com/*",
26+
],
27+
"manifest_version": 3,
28+
"name": "Test Extension",
29+
"version": "1.0.0",
30+
"web_accessible_resources": Array [
31+
Object {
32+
"matches": Array [
33+
"http://b.com/*",
34+
"https://a.com/*",
35+
],
36+
"resources": Array [
37+
"assets/content.js.hash0.js",
38+
],
39+
"use_dynamic_url": false,
40+
},
41+
],
42+
}
43+
`;
44+
45+
exports[`build fs output > _01 output files 1`] = `
46+
Array [
47+
"assets/background.js.hash1.js",
48+
"assets/content.js.hash0.js",
49+
"assets/popup.html.hash2.js",
50+
"assets/vendor.hash3.js",
51+
"manifest.json",
52+
"service-worker-loader.js",
53+
"src/popup.html",
54+
]
55+
`;
56+
57+
exports[`build fs output > assets/background.js.hash1.js 1`] = `
58+
"console.log(\\"service_worker.js\\");
59+
"
60+
`;
61+
62+
exports[`build fs output > assets/content.js.hash0.js 1`] = `
63+
"(function(){console.log(\\"content script\\");
64+
})()
65+
"
66+
`;
67+
68+
exports[`build fs output > assets/popup.html.hash2.js 1`] = `
69+
"import { R as React, a as ReactDOM } from \\"./vendor.hash3.js\\";
70+
(function polyfill() {
71+
const relList = document.createElement(\\"link\\").relList;
72+
if (relList && relList.supports && relList.supports(\\"modulepreload\\")) {
73+
return;
74+
}
75+
for (const link of document.querySelectorAll('link[rel=\\"modulepreload\\"]')) {
76+
processPreload(link);
77+
}
78+
new MutationObserver((mutations) => {
79+
for (const mutation of mutations) {
80+
if (mutation.type !== \\"childList\\") {
81+
continue;
82+
}
83+
for (const node of mutation.addedNodes) {
84+
if (node.tagName === \\"LINK\\" && node.rel === \\"modulepreload\\")
85+
processPreload(node);
86+
}
87+
}
88+
}).observe(document, { childList: true, subtree: true });
89+
function getFetchOpts(script) {
90+
const fetchOpts = {};
91+
if (script.integrity)
92+
fetchOpts.integrity = script.integrity;
93+
if (script.referrerpolicy)
94+
fetchOpts.referrerPolicy = script.referrerpolicy;
95+
if (script.crossorigin === \\"use-credentials\\")
96+
fetchOpts.credentials = \\"include\\";
97+
else if (script.crossorigin === \\"anonymous\\")
98+
fetchOpts.credentials = \\"omit\\";
99+
else
100+
fetchOpts.credentials = \\"same-origin\\";
101+
return fetchOpts;
102+
}
103+
function processPreload(link) {
104+
if (link.ep)
105+
return;
106+
link.ep = true;
107+
const fetchOpts = getFetchOpts(link);
108+
fetch(link.href, fetchOpts);
109+
}
110+
})();
111+
const App = () => {
112+
return /* @__PURE__ */ React.createElement(\\"div\\", null, /* @__PURE__ */ React.createElement(\\"h1\\", null, \\"Popup Page\\"), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"If you are seeing this, React is working!\\"));
113+
};
114+
console.log(\\"popup script\\");
115+
const root = document.querySelector(\\"#root\\");
116+
ReactDOM.render(/* @__PURE__ */ React.createElement(App, null), root);
117+
"
118+
`;
119+
120+
exports[`build fs output > service-worker-loader.js 1`] = `
121+
"import './assets/background.js.hash1.js';
122+
"
123+
`;
124+
125+
exports[`build fs output > src/popup.html 1`] = `
126+
"<!DOCTYPE html>
127+
<html lang=\\"en\\">
128+
<head>
129+
<meta charset=\\"UTF-8\\" />
130+
<meta name=\\"viewport\\" content=\\"width=1000, initial-scale=1.0\\" />
131+
<title>Popup Page</title>
132+
<script type=\\"module\\" crossorigin src=\\"/assets/popup.html.hash2.js\\"></script>
133+
<link rel=\\"modulepreload\\" crossorigin href=\\"/assets/vendor.hash3.js\\">
134+
</head>
135+
<body>
136+
<div id=\\"root\\"></div>
137+
138+
</body>
139+
</html>
140+
"
141+
`;

‎packages/vite-plugin/tests/out/with-https-server/__snapshots__/serve.test.ts.snap‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
// Vitest Snapshot v1
2+
3+
exports[`serve fs output > _00 manifest.json 1`] = `
4+
Object {
5+
"action": Object {
6+
"default_popup": "src/popup.html",
7+
},
8+
"background": Object {
9+
"service_worker": "service-worker-loader.js",
10+
"type": "module",
11+
},
12+
"content_scripts": Array [
13+
Object {
14+
"js": Array [
15+
"src/content.js-loader.js",
16+
],
17+
"matches": Array [
18+
"https://a.com/*",
19+
"http://b.com/*",
20+
],
21+
},
22+
],
23+
"description": "test extension",
24+
"host_permissions": Array [
25+
"https://c.com/*",
26+
],
27+
"manifest_version": 3,
28+
"name": "Test Extension",
29+
"version": "1.0.0",
30+
"web_accessible_resources": Array [
31+
Object {
32+
"matches": Array [
33+
"<all_urls>",
34+
],
35+
"resources": Array [
36+
"*",
37+
"**/*",
38+
],
39+
"use_dynamic_url": false,
40+
},
41+
],
42+
}
43+
`;
44+
45+
exports[`serve fs output > _01 output files 1`] = `
46+
Array [
47+
"assets/loading-page.hash0.js",
48+
"manifest.json",
49+
"service-worker-loader.js",
50+
"src/content.js-loader.js",
51+
"src/content.js.js",
52+
"src/popup.html",
53+
"vendor/crx-client-port.js",
54+
"vendor/vite-client.js",
55+
"vendor/vite-dist-client-env.mjs.js",
56+
"vendor/webcomponents-custom-elements.js",
57+
]
58+
`;
59+
60+
exports[`serve fs output > _02 optimized deps 1`] = `
61+
Set {
62+
"src/content.js",
63+
"src/background.js",
64+
"src/popup.html",
65+
}
66+
`;
67+
68+
exports[`serve fs output > assets/loading-page.hash0.js 1`] = `
69+
"const VITE_URL = \\"https://localhost:3000\\";
70+
document.body.innerHTML = \`
71+
<div
72+
id=\\"app\\"
73+
style=\\"
74+
border: 1px solid #ddd;
75+
padding: 20px;
76+
border-radius: 5px;
77+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
78+
\\"
79+
>
80+
<h1 style=\\"color: #333\\">Vite Dev Mode</h1>
81+
<p style=\\"color: #666\\">
82+
Cannot connect to the Vite Dev Server on <a href=\\"\${VITE_URL}\\">\${VITE_URL}</a>
83+
</p>
84+
<p style=\\"color: #666\\">
85+
Double-check that Vite is working and reload the extension.
86+
</p>
87+
<p style=\\"color: #666\\">
88+
This page will close when the extension reloads.
89+
</p>
90+
<button
91+
style=\\"
92+
padding: 10px 20px;
93+
border: none;
94+
background-color: #007bff;
95+
color: #fff;
96+
border-radius: 5px;
97+
cursor: pointer;
98+
\\"
99+
>
100+
Reload Extension
101+
</button>
102+
</div>\`;
103+
document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => {
104+
chrome.runtime.reload();
105+
});
106+
let tries = 0;
107+
let ready = false;
108+
do {
109+
try {
110+
await fetch(VITE_URL);
111+
ready = true;
112+
} catch {
113+
const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3);
114+
console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`);
115+
console.log(\`[CRXJS] Retrying in \${timeout}ms...\`);
116+
await new Promise((resolve) => setTimeout(resolve, timeout));
117+
}
118+
} while (!ready);
119+
location.reload();
120+
"
121+
`;
122+
123+
exports[`serve fs output > service-worker-loader.js 1`] = `
124+
"import 'https://localhost:3000/@vite/env';
125+
import 'https://localhost:3000/@crx/client-worker';
126+
import 'https://localhost:3000/src/background.js';
127+
"
128+
`;
129+
130+
exports[`serve fs output > src/content.js.js 1`] = `
131+
"console.log('content script')
132+
"
133+
`;
134+
135+
exports[`serve fs output > src/content.js-loader.js 1`] = `
136+
"(function () {
137+
'use strict';
138+
139+
const injectTime = performance.now();
140+
(async () => {
141+
if (\\"\\")
142+
await import(
143+
/* @vite-ignore */
144+
chrome.runtime.getURL(\\"\\")
145+
);
146+
await import(
147+
/* @vite-ignore */
148+
chrome.runtime.getURL(\\"vendor/vite-client.js\\")
149+
);
150+
const { onExecute } = await import(
151+
/* @vite-ignore */
152+
chrome.runtime.getURL(\\"src/content.js.js\\")
153+
);
154+
onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });
155+
})().catch(console.error);
156+
157+
})();
158+
"
159+
`;
160+
161+
exports[`serve fs output > src/popup.html 1`] = `
162+
"<!DOCTYPE html>
163+
<html lang=\\"en\\">
164+
<head>
165+
<title>Vite Dev Mode</title>
166+
<script src=\\"/assets/loading-page.hash0.js\\" type=\\"module\\"></script>
167+
</head>
168+
<body
169+
style=\\"font-family: Arial, sans-serif; padding: 20px; text-align: center\\"
170+
>
171+
<h1>Vite Dev Mode</h1>
172+
</body>
173+
</html>
174+
"
175+
`;

0 commit comments

Comments
 (0)