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

@crxjs/vite-plugin 1.0.2 → 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,29 @@
 # @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
+- b83a4bd: Check for manifest assets first in the project root, then check in
+  the public dir. Throw an informative error if the file does not exist in
+  either dir.
+## 1.0.3
+### Patch Changes
+- 8b2e587: check service worker on interval from extension page
 ## 1.0.2
 ### Patch Changes

package/dist/index.cjs CHANGED Viewed

@@ -17,6 +17,7 @@ var vite = require('vite');
 var module$1 = require('module');
 var cheerio = require('cheerio');
 var jsesc = require('jsesc');
+var fs = require('fs');
 var injector = require('connect-injector');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -2093,27 +2094,40 @@ const pluginFileWriterEvents = () => {
   };
 };
-var preControllerScript = "setTimeout(() => location.reload(), 100);\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}`)
           });
         }
       }
@@ -2731,7 +2745,14 @@ const pluginManifest = (_manifest) => () => {
         const files = await manifestFiles(manifest2);
         await Promise.all(assetTypes.map((k) => files[k]).flat().map(async (f) => {
           if (typeof bundle[f] === "undefined") {
-            const filename = join(config.root, f);
+            let filename = join(config.root, f);
+            if (!fs.existsSync(filename))
+              filename = join(config.publicDir, f);
+            if (!fs.existsSync(filename))
+              throw new Error(`ENOENT: Could not load manifest asset "${f}".
+Manifest assets must exist in one of these directories:
+Project root: "${config.root}"
+Public dir: "${config.publicDir}"`);
             this.emitFile({
               type: "asset",
               fileName: f,

package/dist/index.mjs CHANGED Viewed

@@ -13,6 +13,7 @@ import { createLogger } from 'vite';
 import { createRequire } from 'module';
 import { load } from 'cheerio';
 import jsesc from 'jsesc';
+import { existsSync } from 'fs';
 import injector from 'connect-injector';
 const _debug = (id) => debug$5("crx").extend(id);
@@ -2060,27 +2061,40 @@ const pluginFileWriterEvents = () => {
   };
 };
-var preControllerScript = "setTimeout(() => location.reload(), 100);\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}`)
           });
         }
       }
@@ -2698,7 +2712,14 @@ const pluginManifest = (_manifest) => () => {
         const files = await manifestFiles(manifest2);
         await Promise.all(assetTypes.map((k) => files[k]).flat().map(async (f) => {
           if (typeof bundle[f] === "undefined") {
-            const filename = join(config.root, f);
+            let filename = join(config.root, f);
+            if (!existsSync(filename))
+              filename = join(config.publicDir, f);
+            if (!existsSync(filename))
+              throw new Error(`ENOENT: Could not load manifest asset "${f}".
+Manifest assets must exist in one of these directories:
+Project root: "${config.root}"
+Public dir: "${config.publicDir}"`);
             this.emitFile({
               type: "asset",
               fileName: f,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "1.0.2",
+  "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",