npm - @crxjs/vite-plugin - Versions diffs - 1.0.4 → 1.0.5 - Mend

@crxjs/vite-plugin 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,15 @@
 # @crxjs/vite-plugin
+## 1.0.5
+### Patch Changes
+- 86adbec: Sometimes during development, an extension page may open before the
+  service worker has a chance to control fetch. The HTML file will load from the
+  file system, but the script tag might load from the dev server. This PR adds a
+  precontroller loader plugin to the dev server so that the extension page will
+  reload and the fetch handler will get the real HTML file from the server.
 ## 1.0.4
 ### Patch Changes

package/dist/index.cjs CHANGED Viewed

@@ -2094,27 +2094,40 @@ const pluginFileWriterEvents = () => {
   };
 };
-var preControllerScript = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\n";
+var precontrollerScript = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\n";
-var preControllerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%PATH%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>\n      During development, the service worker reroutes HTML requests to the dev\n      server, so this file isn't used unless the extension service worker opens\n      a page immediately after a full extension reload, and before the service\n      worker takes control of fetch (e.g., in the onInstalled event). In that\n      case, this page will continuously reload until the service worker is\n      ready, always less than 100 ms.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
+var precontrollerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%PATH%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
 const pluginFileWriterHtml = () => {
+  let precontrollerName;
   return {
     name: "crx:file-writer-html",
     apply: "build",
+    fileWriterStart(server) {
+      const plugins = server.config.plugins;
+      const i = plugins.findIndex(({ name }) => name === "alias");
+      plugins.splice(i, 0, {
+        name: "crx:load-precontroller",
+        apply: "serve",
+        load(id) {
+          if (id === `/${precontrollerName}`)
+            return "location.reload();";
+        }
+      });
+    },
     renderCrxManifest(manifest) {
       if (this.meta.watchMode) {
         const refId = this.emitFile({
           type: "asset",
           name: "precontroller.js",
-          source: preControllerScript
+          source: precontrollerScript
         });
-        const name = this.getFileName(refId);
+        precontrollerName = this.getFileName(refId);
         for (const fileName of htmlFiles(manifest)) {
           this.emitFile({
             type: "asset",
             fileName,
-            source: preControllerHtml.replace("%PATH%", `/${name}`)
+            source: precontrollerHtml.replace("%PATH%", `/${precontrollerName}`)
           });
         }
       }

package/dist/index.mjs CHANGED Viewed

@@ -2061,27 +2061,40 @@ const pluginFileWriterEvents = () => {
   };
 };
-var preControllerScript = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\n";
+var precontrollerScript = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\n";
-var preControllerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%PATH%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>\n      During development, the service worker reroutes HTML requests to the dev\n      server, so this file isn't used unless the extension service worker opens\n      a page immediately after a full extension reload, and before the service\n      worker takes control of fetch (e.g., in the onInstalled event). In that\n      case, this page will continuously reload until the service worker is\n      ready, always less than 100 ms.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
+var precontrollerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%PATH%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
 const pluginFileWriterHtml = () => {
+  let precontrollerName;
   return {
     name: "crx:file-writer-html",
     apply: "build",
+    fileWriterStart(server) {
+      const plugins = server.config.plugins;
+      const i = plugins.findIndex(({ name }) => name === "alias");
+      plugins.splice(i, 0, {
+        name: "crx:load-precontroller",
+        apply: "serve",
+        load(id) {
+          if (id === `/${precontrollerName}`)
+            return "location.reload();";
+        }
+      });
+    },
     renderCrxManifest(manifest) {
       if (this.meta.watchMode) {
         const refId = this.emitFile({
           type: "asset",
           name: "precontroller.js",
-          source: preControllerScript
+          source: precontrollerScript
         });
-        const name = this.getFileName(refId);
+        precontrollerName = this.getFileName(refId);
         for (const fileName of htmlFiles(manifest)) {
           this.emitFile({
             type: "asset",
             fileName,
-            source: preControllerHtml.replace("%PATH%", `/${name}`)
+            source: precontrollerHtml.replace("%PATH%", `/${precontrollerName}`)
           });
         }
       }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -82,10 +82,10 @@
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-node-resolve": "13.2.0",
     "@types/acorn": "4.0.6",
-    "@types/chrome": "0.0.183",
+    "@types/chrome": "0.0.184",
     "@types/debug": "4.1.7",
     "@types/fs-extra": "9.0.13",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.0",
     "@types/jest-image-snapshot": "4.3.1",
     "@types/jsesc": "3.0.1",
     "@types/node": "17.0.18",
@@ -94,7 +94,7 @@
     "@typescript-eslint/eslint-plugin": "5.21.0",
     "@typescript-eslint/parser": "5.21.0",
     "@vitejs/plugin-react": "1.3.1",
-    "@vitejs/plugin-vue": "2.3.1",
+    "@vitejs/plugin-vue": "2.3.2",
     "esbuild": "0.14.38",
     "esbuild-runner": "2.2.1",
     "eslint": "^8.14.0",