@crxjs/vite-plugin 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/index.mjs

@@ -24,8 +24,10 @@ const pluginOptionsProvider = (options) => {
     name: pluginName$1,
     api: {
       crx: {
+        // during testing this can be null, we don't provide options through the test config
         options
       }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }
   };
 };
@@ -292,6 +294,7 @@ const pluginBackground = () => {
     },
     {
       name: "crx:background-loader-file",
+      // this should happen after other plugins; the loader file is an implementation detail
       enforce: "post",
       configResolved(_config) {
         config = _config;
@@ -318,6 +321,7 @@ const pluginBackground = () => {
         }
         const refId = this.emitFile({
           type: "asset",
+          // fileName b/c service worker must be at root of crx
           fileName: getFileName({ type: "loader", id: "service-worker" }),
           source: loader
         });
@@ -426,6 +430,7 @@ function prepAsset(fileName, { id, source }) {
 }
 function prepScript(fileName, script) {
   return ($) => $.pipe(
+    // get script contents from dev server
     mergeMap(async ({ server }) => {
       const target = getOutputPath(server, fileName);
       const viteUrl = getViteUrl(script);
@@ -435,7 +440,9 @@ function prepScript(fileName, script) {
       const { code, deps = [], dynamicDeps = [] } = transformResult;
       return { target, code, deps: [...deps, ...dynamicDeps].flat(), server };
     }),
+    // retry in case of dependency rebundle
     retry({ count: 10, delay: 100 }),
+    // patch content scripts
     mergeMap(async ({ target, server, ...rest }) => {
       const plugins = server.config.plugins;
       let { code, deps } = rest;
@@ -455,7 +462,8 @@ function prepScript(fileName, script) {
         if (i.n) {
           depSet.add(i.n);
           const fileName2 = getFileName({ type: "module", id: i.n });
-          magic.overwrite(i.s, i.e, `/${fileName2}`);
+          const fullImport = code.substring(i.s, i.e);
+          magic.overwrite(i.s, i.e, fullImport.replace(i.n, `/${fileName2}`));
         }
       return { target, source: magic.toString(), deps: [...depSet] };
     })
@@ -526,8 +534,11 @@ function update(_id) {
 async function write(fileId) {
   const start2 = performance.now();
   const deps = await firstValueFrom(
+    // wait for start event
     start$.pipe(
+      // prepare either asset or script contents
       prepFileData(fileId),
+      // output file and add dependencies to file writer
       mergeMap(async ({ target, source, deps: deps2 }) => {
         const files = deps2.map((id) => {
           const r = [add({ id, type: "module" })];
@@ -543,6 +554,7 @@ async function write(fileId) {
           await outputFile(target, source, { encoding: "utf8" });
         return files;
       }),
+      // abort write operation on close event
       takeUntil(close$),
       concatWith(of([]))
     )
@@ -707,6 +719,34 @@ const pluginDynamicContentScripts = () => {
       configResolved(_config) {
         config = _config;
       },
+      configureServer(server) {
+        return () => {
+          server.middlewares.use(async (req, res, next) => {
+            try {
+              await allFilesReady();
+              next();
+            } catch (error) {
+              let err;
+              if (error instanceof Error) {
+                err = error;
+              } else if (typeof error === "string") {
+                err = new Error(error);
+              } else {
+                err = new Error(
+                  `Unexpected error "${error}" in middleware for "${req.url}"`
+                );
+              }
+              server.ws.send({
+                type: "error",
+                err: {
+                  message: err.message,
+                  stack: err.stack ?? "no stack available"
+                }
+              });
+            }
+          });
+        };
+      },
       async resolveId(_source, importer) {
         if (importer && _source.includes("?script")) {
           const url = new URL(_source, "stub://stub");
@@ -775,7 +815,6 @@ const pluginDynamicContentScripts = () => {
           if (config.command === "build") {
             return `export default import.meta.CRX_DYNAMIC_SCRIPT_${script.refId};`;
           } else if (typeof script.fileName === "string") {
-            await fileReady(script);
             return `export default ${JSON.stringify(script.fileName)};`;
           } else {
             throw new Error(
@@ -788,6 +827,12 @@ const pluginDynamicContentScripts = () => {
     {
       name: "crx:dynamic-content-scripts-build",
       apply: "build",
+      /**
+       * Replace dynamic script placeholders during build.
+       *
+       * Can't use `renderChunk` b/c pre plugin crx:content-scripts uses
+       * `generateBundle` to emit loaders. Must come after "enforce: pre".
+       */
       generateBundle(options, bundle) {
         for (const chunk of Object.values(bundle))
           if (chunk.type === "chunk") {
@@ -1056,6 +1101,7 @@ const pluginHMR = () => {
       name: "crx:hmr",
       apply: "serve",
       enforce: "pre",
+      // server hmr host should be localhost
       async config({ server = {}, ...config2 }) {
         if (server.hmr === false)
           return;
@@ -1065,6 +1111,7 @@ const pluginHMR = () => {
         server.hmr.host = "localhost";
         return { server, ...config2 };
       },
+      // server should ignore outdir
       configResolved(_config) {
         config = _config;
         const { watch = {} } = config.server;
@@ -1102,6 +1149,7 @@ const pluginHMR = () => {
       closeBundle() {
         subs.unsubscribe();
       },
+      // background changes require a full extension reload
       handleHotUpdate({ modules, server }) {
         const { root } = server.config;
         const relFiles = /* @__PURE__ */ new Set();
@@ -1129,6 +1177,7 @@ const pluginHMR = () => {
       name: "crx:hmr",
       apply: "serve",
       enforce: "post",
+      // get final output manifest for handleHotUpdate 👆
       async transformCrxManifest(manifest) {
         inputManifestFiles = await manifestFiles(manifest, { cwd: config.root });
         return null;
@@ -1219,6 +1268,7 @@ const pluginHtmlInlineScripts = () => {
   };
   const postPlugin = {
     name: "crx:html-auditor-post",
+    // this hook isn't audited b/c we add it after we set up the auditors
     transformIndexHtml(html, ctx) {
       const key = toKey(ctx);
       const p = pages.get(key);
@@ -1563,6 +1613,7 @@ Public dir: "${config.publicDir}"`
               this.emitFile({
                 type: "asset",
                 fileName: f,
+                // TODO: cache source buffer
                 source: await readFile(filename)
               });
             }
@@ -1675,8 +1726,11 @@ const pluginWebAccessibleResources = () => {
           ...rest
         })).filter(({ resources }) => resources.length);
         manifest.web_accessible_resources.push({
+          // change the extension origin on every reload
           use_dynamic_url: true,
+          // all web origins can access
           matches: ["<all_urls>"],
+          // all resources are web accessible
           resources: ["**/*", "*"]
         });
         return manifest;
@@ -1806,6 +1860,7 @@ const pluginWebAccessibleResources = () => {
 };
 
 const crx = (options) => {
+  contentScripts.clear();
   return [
     pluginOptionsProvider(options),
     pluginBackground(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.12",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -88,7 +88,7 @@
     "@rollup/plugin-node-resolve": "13.2.0",
     "@sveltejs/vite-plugin-svelte": "1.1.0",
     "@types/acorn": "4.0.6",
-    "@types/chrome": "0.0.198",
+    "@types/chrome": "0.0.209",
     "@types/debug": "4.1.7",
     "@types/fs-extra": "9.0.13",
     "@types/jest-image-snapshot": "^5.1.0",
@@ -101,7 +101,7 @@
     "@vitejs/plugin-react": "^2.1.0",
     "@vitejs/plugin-vue": "3.2.0",
     "chokidar": "^3.5.3",
-    "esbuild": "0.15.16",
+    "esbuild": "0.17.4",
     "esbuild-runner": "2.2.2",
     "eslint": "8.26.0",
     "eslint-plugin-react": "^7.29.4",
@@ -116,7 +116,7 @@
     "svelte": "^3.48.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.7",
-    "vite-plugin-inspect": "0.7.5",
+    "vite-plugin-inspect": "0.7.14",
     "vitest": "0.24.3",
     "vue": "3.2.41"
   }