properly render manifest in watch mode

packages/demo-vue/package.json

@@ -7,6 +7,8 @@
     "dev:firefox": "pnpm install && tsc && TARGET=firefox vite dev",
     "build": "pnpm install && tsc && vite build",
     "build:firefox": "pnpm install && tsc && TARGET=firefox vite build",
+    "build:watch": "pnpm build --watch",
+    "build:watch:firefox": "pnpm build:firefox --watch",
     "validate": "web-ext lint -s dist"
   },
   "dependencies": {

packages/vite-plugin-web-extension/package.json

@@ -57,7 +57,7 @@
     "@types/md5": "^2.3.1",
     "@types/node": "^16.11.6",
     "@types/webextension-polyfill": "^0.9.0",
-    "rollup": "^2.62.0",
+    "rollup": "2.78.1",
     "tsup": "^5.5.0",
     "typescript": "^4.4.4",
     "vite": "*",

packages/vite-plugin-web-extension/src/plugins/bundle-tracker-plugin.ts

@@ -0,0 +1,24 @@
+import { OutputAsset, OutputChunk } from "rollup";
+import { Plugin } from "vite";
+import { BUNDLE_TRACKER_PLUGIN_NAME } from "../utils/constants";
+
+export interface BundleTrackerPlugin extends Plugin {
+  getChunks(): Array<OutputChunk | OutputAsset> | undefined;
+}
+
+/**
+ * A plugin that tracks and saves the output bundle for use when rendering the final manifest.
+ */
+export function bundleTrackerPlugin(): BundleTrackerPlugin {
+  let chunks: Array<OutputChunk | OutputAsset> | undefined;
+  return {
+    name: BUNDLE_TRACKER_PLUGIN_NAME,
+    buildStart() {
+      chunks = undefined;
+    },
+    writeBundle(_, bundle) {
+      chunks = Object.values(bundle);
+    },
+    getChunks: () => chunks,
+  };
+}

packages/vite-plugin-web-extension/src/plugins/manifest-loader-plugin.ts

@@ -12,7 +12,7 @@ import { inspect } from "node:util";
 import { mergeConfigs } from "../utils/merge-configs";
 import { getOutDir, getPublicDir, getRootDir } from "../utils/paths";
 import { OutputAsset, OutputChunk } from "rollup";
-import { extension, Manifest } from "webextension-polyfill";
+import { Manifest } from "webextension-polyfill";
 import { startWebExt, ExtensionRunner } from "../utils/extension-runner";
 import { createManifestValidator } from "../utils/manifest-validation";
 import { colorizeFilename } from "../utils/filenames";
@@ -100,6 +100,7 @@ export function manifestLoaderPlugin(options: InternalPluginOptions): Plugin {
     manifest: any,
     bundles: Array<OutputChunk | OutputAsset>
   ): any {
+    console.log(bundles);
     const findReplacement = (entry: string) =>
       bundles.find((output) => {
         if (

packages/vite-plugin-web-extension/src/utils/build-context.ts

@@ -1,4 +1,4 @@
-import { OutputAsset, OutputChunk, RollupWatcher } from "rollup";
+import { OutputAsset, OutputBundle, OutputChunk, RollupWatcher } from "rollup";
 import { inspect } from "util";
 import * as Vite from "vite";
 import { Manifest } from "webextension-polyfill";
@@ -14,6 +14,8 @@ import path from "node:path";
 import { getInputAbsPaths } from "./paths";
 import uniqBy from "lodash.uniqby";
 import { createMultibuildCompleteManager } from "../plugins/multibuild-complete-plugin";
+import md5 from "md5";
+import { bundleTrackerPlugin } from "../plugins/bundle-tracker-plugin";
 
 interface RebuildOptions {
   rootDir: string;
@@ -274,6 +276,21 @@ export function createBuildContext({
     logger.log(`\n${GREEN}✓${RESET} All steps completed.\n`);
   }
 
+  function waitForWatchBuildComplete(watcher: RollupWatcher) {
+    return new Promise<void>((res, rej) => {
+      watcher.addListener("event", async (e) => {
+        switch (e.code) {
+          case "END":
+            res();
+            break;
+          case "ERROR":
+            rej(e.error);
+            break;
+        }
+      });
+    });
+  }
+
   return {
     async rebuild(rebuildOptions) {
       const { rootDir, mode } = rebuildOptions;
@@ -288,28 +305,18 @@ export function createBuildContext({
 
       const newBundles: Array<OutputChunk | OutputAsset> = [];
       for (const config of buildConfigs) {
+        const bundleTracker = bundleTrackerPlugin();
+        (config.plugins ??= []).push(bundleTracker);
+
         const output = await Vite.build(config);
-        if (Array.isArray(output)) {
-          newBundles.push(...output.map((o) => o.output).flat());
-        } else if ("output" in output) {
-          newBundles.push(...output.output);
-        } else {
-          // In watch mode, wait until it's built once
-          // @ts-expect-error: Rollup/Vite type conflict
+        if ("addListener" in output) {
           activeWatchers.push(output);
-          await new Promise<void>((res, rej) => {
-            output.addListener("event", (e) => {
-              switch (e.code) {
-                case "BUNDLE_END":
-                  res();
-                  break;
-                case "ERROR":
-                  rej(e.error);
-                  break;
-              }
-            });
-          });
+          // In watch mode, wait until it's built once
+          await waitForWatchBuildComplete(output);
         }
+
+        const chunks = bundleTracker.getChunks() ?? [];
+        newBundles.push(...chunks);
       }
       bundles = uniqBy(newBundles, "fileName");
       // This prints before the manifest plugin continues in build mode

packages/vite-plugin-web-extension/src/utils/constants.ts

@@ -1,3 +1,4 @@
 export const MANIFEST_LOADER_PLUGIN_NAME = `web-extension:manifest`;
 export const LABELED_STEP_PLUGIN_NAME = `web-extension:labeled-step`;
 export const MULTIBUILD_COMPLETE_PLUGIN_NAME = `web-extension:multibuild`;
+export const BUNDLE_TRACKER_PLUGIN_NAME = `web-extension:bundle-tracker`;