Update loading message (#806)

crxjs · Oct 16, 2023 · 60e5407 · 60e5407
1 parent f5c4bd7
commit 60e5407
Show file tree

Hide file tree

Showing 14 changed files with 563 additions and 145 deletions.
diff --git a/.changeset/shaggy-glasses-design.md 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
@@ -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 = `
+<div
+      id="app"
+      style="
+        border: 1px solid #ddd;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      "
+    >
+      <h1 style="color: #333">Vite Dev Mode</h1>
+      <p style="color: #666">
+        Cannot connect to the Vite Dev Server on <a href="${VITE_URL}">${VITE_URL}</a>
+      </p>
+      <p style="color: #666">
+        Double-check that Vite is working and reload the extension.
+      </p>
+      <p style="color: #666">
+        This page will close when the extension reloads.
+      </p>
+      <button
+        style="
+          padding: 10px 20px;
+          border: none;
+          background-color: #007bff;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+      >
+        Reload Extension
+      </button>
+    </div>`
+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
diff --git a/packages/vite-plugin/src/client/html/loading-page.html b/packages/vite-plugin/src/client/html/loading-page.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Vite Dev Mode</title>
+    <script src="%SCRIPT%" type="module"></script>
+  </head>
+  <body
+    style="font-family: Arial, sans-serif; padding: 20px; text-align: center"
+  >
+    <h1>Vite Dev Mode</h1>
+  </body>
+</html>
diff --git a/packages/vite-plugin/src/client/html/precontroller.html b/packages/vite-plugin/src/client/html/precontroller.html
diff --git 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
@@ -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 = \`
+<div
+      id=\\"app\\"
+      style=\\"
+        border: 1px solid #ddd;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      \\"
+    >
+      <h1 style=\\"color: #333\\">Vite Dev Mode</h1>
+      <p style=\\"color: #666\\">
+        Cannot connect to the Vite Dev Server on <a href=\\"\${VITE_URL}\\">\${VITE_URL}</a>
+      </p>
+      <p style=\\"color: #666\\">
+        Double-check that Vite is working and reload the extension.
+      </p>
+      <p style=\\"color: #666\\">
+        This page will close when the extension reloads.
+      </p>
+      <button
+        style=\\"
+          padding: 10px 20px;
+          border: none;
+          background-color: #007bff;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        \\"
+      >
+        Reload Extension
+      </button>
+    </div>\`;
+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`] = `
 "<!DOCTYPE html>
 <html lang=\\"en\\">
   <head>
-    <title>Waiting for the extension service worker...</title>
-    <script src=\\"/assets/precontroller.hash0.js\\"></script>
+    <title>Vite Dev Mode</title>
+    <script src=\\"/assets/loading-page.hash0.js\\" type=\\"module\\"></script>
   </head>
-  <body>
-    <h1>Waiting for service worker</h1>
-
-    <p>
-      If you see this message, it means the service worker has not loaded fully.
-    </p>
-
-    <p>This page is never added in production.</p>
+  <body
+    style=\\"font-family: Arial, sans-serif; padding: 20px; text-align: center\\"
+  >
+    <h1>Vite Dev Mode</h1>
   </body>
 </html>
 "

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
@@ -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 = \`
+<div
+      id=\\"app\\"
+      style=\\"
+        border: 1px solid #ddd;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      \\"
+    >
+      <h1 style=\\"color: #333\\">Vite Dev Mode</h1>
+      <p style=\\"color: #666\\">
+        Cannot connect to the Vite Dev Server on <a href=\\"\${VITE_URL}\\">\${VITE_URL}</a>
+      </p>
+      <p style=\\"color: #666\\">
+        Double-check that Vite is working and reload the extension.
+      </p>
+      <p style=\\"color: #666\\">
+        This page will close when the extension reloads.
+      </p>
+      <button
+        style=\\"
+          padding: 10px 20px;
+          border: none;
+          background-color: #007bff;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        \\"
+      >
+        Reload Extension
+      </button>
+    </div>\`;
+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`] = `
 "<!DOCTYPE html>
 <html lang=\\"en\\">
   <head>
-    <title>Waiting for the extension service worker...</title>
-    <script src=\\"/assets/precontroller.hash0.js\\"></script>
+    <title>Vite Dev Mode</title>
+    <script src=\\"/assets/loading-page.hash0.js\\" type=\\"module\\"></script>
   </head>
-  <body>
-    <h1>Waiting for service worker</h1>
-
-    <p>
-      If you see this message, it means the service worker has not loaded fully.
-    </p>
-
-    <p>This page is never added in production.</p>
+  <body
+    style=\\"font-family: Arial, sans-serif; padding: 20px; text-align: center\\"
+  >
+    <h1>Vite Dev Mode</h1>
   </body>
 </html>
 "