From 60e54074973039a02c797f8e329a97d1b896261e Mon Sep 17 00:00:00 2001 From: Jack Steam Date: Mon, 16 Oct 2023 08:44:28 -0500 Subject: [PATCH] Update loading message (#806) --- .changeset/shaggy-glasses-design.md | 5 ++ .../src/client/es/loading-page-script.ts | 64 ++++++++++++++++ .../client/es/page-precontroller-script.ts | 10 --- .../src/client/html/loading-page.html | 12 +++ .../src/client/html/precontroller.html | 16 ---- .../vite-plugin/src/node/plugin-manifest.ts | 17 +++-- .../basic-js/__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- .../basic-ts/__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- .../__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- .../__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- .../__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- .../__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- .../__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- .../__snapshots__/serve.test.ts.snap | 73 +++++++++++++++---- 14 files changed, 563 insertions(+), 145 deletions(-) create mode 100644 .changeset/shaggy-glasses-design.md create mode 100644 packages/vite-plugin/src/client/es/loading-page-script.ts delete mode 100644 packages/vite-plugin/src/client/es/page-precontroller-script.ts create mode 100644 packages/vite-plugin/src/client/html/loading-page.html delete mode 100644 packages/vite-plugin/src/client/html/precontroller.html diff --git a/.changeset/shaggy-glasses-design.md b/.changeset/shaggy-glasses-design.md new file mode 100644 index 000000000..df58c80a9 --- /dev/null +++ b/.changeset/shaggy-glasses-design.md @@ -0,0 +1,5 @@ +--- +"@fake-scope/fake-pkg": patch +--- + +Update loading message diff --git a/packages/vite-plugin/src/client/es/loading-page-script.ts b/packages/vite-plugin/src/client/es/loading-page-script.ts new file mode 100644 index 000000000..822eeec4d --- /dev/null +++ b/packages/vite-plugin/src/client/es/loading-page-script.ts @@ -0,0 +1,64 @@ +/** + * This script runs in Vite dev mode if an extension page opens before the + * service worker takes control of fetch (e.g., in the onInstalled event). + */ + +const VITE_URL = 'http://localhost:%PORT%' + +document.body.innerHTML = ` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on ${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
` +document.body.querySelector('button')?.addEventListener('click', () => { + chrome.runtime.reload() +}) + +// ping the dev server until it's ready +let tries = 0 +let ready = false +do { + try { + await fetch(VITE_URL) + ready = true + } catch { + // exponential backoff for retries, maxing out at every 5 seconds + const timeout = Math.min(100 * Math.pow(2, ++tries), 5000) + console.log(`[CRXJS] Vite Dev Server is not available on ${VITE_URL}`) + console.log(`[CRXJS] Retrying in ${timeout}ms...`) + await new Promise((resolve) => setTimeout(resolve, timeout)) + } +} while (!ready) + +// reload the extension to load the built files from the dev server +chrome.runtime.reload() + +export {} diff --git a/packages/vite-plugin/src/client/es/page-precontroller-script.ts b/packages/vite-plugin/src/client/es/page-precontroller-script.ts deleted file mode 100644 index 6a2cf5302..000000000 --- a/packages/vite-plugin/src/client/es/page-precontroller-script.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * This script only runs in development, and only if an extension page opens - * before the service worker takes control of fetch (e.g., in the onInstalled event). - * - * Note: `oncontrollerchange` does not fire in this context, instead the page - * continuously reloads until the service worker takes over. - */ -const id = setInterval(() => location.reload(), 100) -setTimeout(() => clearInterval(id), 5000) -export {} diff --git a/packages/vite-plugin/src/client/html/loading-page.html b/packages/vite-plugin/src/client/html/loading-page.html new file mode 100644 index 000000000..f7f9a3a6a --- /dev/null +++ b/packages/vite-plugin/src/client/html/loading-page.html @@ -0,0 +1,12 @@ + + + + Vite Dev Mode + + + +

Vite Dev Mode

+ + diff --git a/packages/vite-plugin/src/client/html/precontroller.html b/packages/vite-plugin/src/client/html/precontroller.html deleted file mode 100644 index 7a892d483..000000000 --- a/packages/vite-plugin/src/client/html/precontroller.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - Waiting for the extension service worker... - - - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

- - diff --git a/packages/vite-plugin/src/node/plugin-manifest.ts b/packages/vite-plugin/src/node/plugin-manifest.ts index d9c8c863a..d6c838bf0 100644 --- a/packages/vite-plugin/src/node/plugin-manifest.ts +++ b/packages/vite-plugin/src/node/plugin-manifest.ts @@ -1,5 +1,5 @@ -import precontrollerJs from 'client/es/page-precontroller-script.ts' -import precontrollerHtml from 'client/html/precontroller.html' +import loadingPageScript from 'client/es/loading-page-script.ts' +import loadingPageHtml from 'client/html/loading-page.html' import { existsSync, promises as fs } from 'fs' import colors from 'picocolors' import { OutputAsset, OutputChunk } from 'rollup' @@ -382,17 +382,20 @@ Public dir: "${config.publicDir}"`, if (config.command === 'serve' && files.html.length) { const refId = this.emitFile({ type: 'asset', - name: 'precontroller.js', - source: precontrollerJs, + name: 'loading-page.js', + source: loadingPageScript.replace( + '%PORT%', + `${config.server.port ?? 0}`, + ), }) - const precontrollerJsName = this.getFileName(refId) + const loadingPageScriptName = this.getFileName(refId) files.html.map((f) => this.emitFile({ type: 'asset', fileName: f, - source: precontrollerHtml.replace( + source: loadingPageHtml.replace( '%SCRIPT%', - `/${precontrollerJsName}`, + `/${loadingPageScriptName}`, ), }), ) diff --git a/packages/vite-plugin/tests/out/basic-js/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/basic-js/__snapshots__/serve.test.ts.snap index 3bd85dc5c..6908c8981 100644 --- a/packages/vite-plugin/tests/out/basic-js/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/basic-js/__snapshots__/serve.test.ts.snap @@ -44,7 +44,7 @@ Object { exports[`serve fs output > _01 output files 1`] = ` Array [ - "assets/precontroller.hash0.js", + "assets/loading-page.hash0.js", "manifest.json", "service-worker-loader.js", "src/content.js-loader.js", @@ -65,9 +65,58 @@ Set { } `; -exports[`serve fs output > assets/precontroller.hash0.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`serve fs output > assets/loading-page.hash0.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -113,17 +162,13 @@ exports[`serve fs output > src/popup.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

" diff --git a/packages/vite-plugin/tests/out/basic-ts/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/basic-ts/__snapshots__/serve.test.ts.snap index ea2999ad5..61c911b6e 100644 --- a/packages/vite-plugin/tests/out/basic-ts/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/basic-ts/__snapshots__/serve.test.ts.snap @@ -41,7 +41,7 @@ Object { exports[`serve fs output > _01 output files 1`] = ` Array [ - "assets/precontroller.hash0.js", + "assets/loading-page.hash0.js", "manifest.json", "service-worker-loader.js", "src/content.ts-loader.js", @@ -62,9 +62,58 @@ Set { } `; -exports[`serve fs output > assets/precontroller.hash0.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`serve fs output > assets/loading-page.hash0.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -111,17 +160,13 @@ exports[`serve fs output > src/popup.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

" diff --git a/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/serve.test.ts.snap index 36a722be0..1dc5238e4 100644 --- a/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/serve.test.ts.snap @@ -39,7 +39,7 @@ Object { exports[`serve fs output > _01 output files 1`] = ` Array [ - "assets/precontroller.hash0.js", + "assets/loading-page.hash0.js", "manifest.json", "service-worker-loader.js", "src/App.tsx.js", @@ -66,9 +66,58 @@ Set { } `; -exports[`serve fs output > assets/precontroller.hash0.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`serve fs output > assets/loading-page.hash0.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -181,17 +230,13 @@ exports[`serve fs output > src/popup.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

" diff --git a/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/serve.test.ts.snap index 5ff9277d5..4cc67c955 100644 --- a/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/serve.test.ts.snap @@ -44,7 +44,7 @@ Object { exports[`works with 'self' directive > _01 output files 1`] = ` Array [ - "assets/precontroller.hash0.js", + "assets/loading-page.hash0.js", "manifest.json", "service-worker-loader.js", "src/content.ts-loader.js", @@ -65,9 +65,58 @@ Set { } `; -exports[`works with 'self' directive > assets/precontroller.hash0.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`works with 'self' directive > assets/loading-page.hash0.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -114,17 +163,13 @@ exports[`works with 'self' directive > src/popup.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

" diff --git a/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/serve.test.ts.snap index 39fea1a2c..077942c98 100644 --- a/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/serve.test.ts.snap @@ -39,7 +39,7 @@ Object { exports[`serve fs output > _01 output files 1`] = ` Array [ - "assets/precontroller.hash.js", + "assets/loading-page.hash.js", "favicon.ico", "manifest.json", "service-worker-loader.js", @@ -75,9 +75,58 @@ Set { } `; -exports[`serve fs output > assets/precontroller.hash.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`serve fs output > assets/loading-page.hash.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -454,17 +503,13 @@ exports[`serve fs output > src/popup.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

" diff --git a/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/serve.test.ts.snap index b7c6c05cc..3d122fc95 100644 --- a/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/serve.test.ts.snap @@ -41,7 +41,7 @@ Object { exports[`serve fs output > _01 output files 1`] = ` Array [ - "assets/precontroller.hash0.js", + "assets/loading-page.hash0.js", "index.html", "manifest.json", "service-worker-loader.js", @@ -64,9 +64,58 @@ Set { } `; -exports[`serve fs output > assets/precontroller.hash0.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`serve fs output > assets/loading-page.hash0.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -74,17 +123,13 @@ exports[`serve fs output > index.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

" diff --git a/packages/vite-plugin/tests/out/with-public-dir/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/with-public-dir/__snapshots__/serve.test.ts.snap index 393b543e0..9648a1874 100644 --- a/packages/vite-plugin/tests/out/with-public-dir/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/with-public-dir/__snapshots__/serve.test.ts.snap @@ -42,7 +42,7 @@ Object { exports[`serve fs output > _01 output files 1`] = ` Array [ - "assets/precontroller.hash0.js", + "assets/loading-page.hash0.js", "favicon.svg", "icons/action-icon-128.png", "icons/action-icon-16.png", @@ -64,9 +64,58 @@ Set { } `; -exports[`serve fs output > assets/precontroller.hash0.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`serve fs output > assets/loading-page.hash0.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -80,17 +129,13 @@ exports[`serve fs output > src/popup.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

" diff --git a/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/serve.test.ts.snap index 282e48469..60799ba0f 100644 --- a/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/serve.test.ts.snap +++ b/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/serve.test.ts.snap @@ -41,7 +41,7 @@ Object { exports[`serve fs output > _01 output files 1`] = ` Array [ - "assets/precontroller.hash0.js", + "assets/loading-page.hash0.js", "manifest.json", "service-worker-loader.js", "src/content.ts-loader.js", @@ -62,9 +62,58 @@ Set { } `; -exports[`serve fs output > assets/precontroller.hash0.js 1`] = ` -"const id = setInterval(() => location.reload(), 100); -setTimeout(() => clearInterval(id), 5e3); +exports[`serve fs output > assets/loading-page.hash0.js 1`] = ` +"const VITE_URL = \\"http://localhost:3000\\"; +document.body.innerHTML = \` +
+

Vite Dev Mode

+

+ Cannot connect to the Vite Dev Server on \${VITE_URL} +

+

+ Double-check that Vite is working and reload the extension. +

+

+ This page will close when the extension reloads. +

+ +
\`; +document.body.querySelector(\\"button\\")?.addEventListener(\\"click\\", () => { + chrome.runtime.reload(); +}); +let tries = 0; +let ready = false; +do { + try { + await fetch(VITE_URL); + ready = true; + } catch { + const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3); + console.log(\`[CRXJS] Vite Dev Server is not available on \${VITE_URL}\`); + console.log(\`[CRXJS] Retrying in \${timeout}ms...\`); + await new Promise((resolve) => setTimeout(resolve, timeout)); + } +} while (!ready); +chrome.runtime.reload(); " `; @@ -114,17 +163,13 @@ exports[`serve fs output > src/popup.html 1`] = ` " - Waiting for the extension service worker... - + Vite Dev Mode + - -

Waiting for service worker

- -

- If you see this message, it means the service worker has not loaded fully. -

- -

This page is never added in production.

+ +

Vite Dev Mode

"