feat!: Vite 4 Support (#81)

aklinker1 · web-flow · commit 1c9ae7ca5c2c · 2023-03-11T10:55:59.000-06:00
BREAKING CHANGE: Vite 4 plugins have different types and cannot be used with Vite 3.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+pnpm-lock.yaml linguist-generated
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
         "body-parser",
         "download",
         "express",
-        "safe-compare"
+        "safe-compare",
+        "@algolia/client-search"
       ]
     }
   }
diff --git a/packages/create-vite-plugin-web-extension/package.json b/packages/create-vite-plugin-web-extension/package.json
@@ -28,11 +28,11 @@
     "@types/tmp": "^0.2.3",
     "@types/webextension-polyfill": "^0.9.0",
     "@vitejs/plugin-react-swc": "^3.0.1",
-    "@vitejs/plugin-vue": "^2.1.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "tsup": "^5.5.0",
     "tsx": "^3.12.1",
     "typescript": "^4.4.4",
-    "vite": "3.1.2",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "workspace:*",
     "vue": "^3.2.45",
     "vue-tsc": "^1.0.16"
diff --git a/packages/create-vite-plugin-web-extension/templates/react-js/package.json b/packages/create-vite-plugin-web-extension/templates/react-js/package.json
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "vite": "^4.0.0",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "^1.4.9",
     "webextension-polyfill": "^0.10.0"
   }
diff --git a/packages/create-vite-plugin-web-extension/templates/react-ts/package.json b/packages/create-vite-plugin-web-extension/templates/react-ts/package.json
@@ -17,7 +17,7 @@
     "@types/webextension-polyfill": "^0.9.0",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "^1.4.9",
     "webextension-polyfill": "^0.10.0"
   }
diff --git a/packages/create-vite-plugin-web-extension/templates/vanilla-js/package.json b/packages/create-vite-plugin-web-extension/templates/vanilla-js/package.json
@@ -8,7 +8,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "vite": "^3.2.5",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "^2.0.2",
     "webextension-polyfill": "^0.10.0"
   }
diff --git a/packages/create-vite-plugin-web-extension/templates/vanilla-ts/package.json b/packages/create-vite-plugin-web-extension/templates/vanilla-ts/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@types/webextension-polyfill": "^0.10.0",
     "typescript": "^4.9.5",
-    "vite": "^3.2.5",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "^2.0.2",
     "webextension-polyfill": "^0.10.0"
   }
diff --git a/packages/create-vite-plugin-web-extension/templates/vue-js/package.json b/packages/create-vite-plugin-web-extension/templates/vue-js/package.json
@@ -11,8 +11,8 @@
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.2.0",
-    "vite": "^3.2.5",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "^2.0.2",
     "webextension-polyfill": "^0.10.0"
   }
diff --git a/packages/create-vite-plugin-web-extension/templates/vue-ts/package.json b/packages/create-vite-plugin-web-extension/templates/vue-ts/package.json
@@ -12,9 +12,9 @@
   },
   "devDependencies": {
     "@types/webextension-polyfill": "^0.10.0",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "typescript": "^4.9.5",
-    "vite": "^3.2.5",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "^2.0.2",
     "vue-tsc": "^1.2.0",
     "webextension-polyfill": "^0.10.0"
diff --git a/packages/demo-localization/package.json b/packages/demo-localization/package.json
@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "typescript": "^4.4.4",
-    "vite": "3.1.2",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "workspace:*"
   }
 }
diff --git a/packages/demo-vanilla/package.json b/packages/demo-vanilla/package.json
@@ -16,7 +16,7 @@
     "@types/lodash.debounce": "^4.0.6",
     "sass": "^1.49.9",
     "typescript": "^4.4.4",
-    "vite": "3.1.2",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "workspace:*"
   }
 }
diff --git a/packages/demo-vue/package.json b/packages/demo-vue/package.json
@@ -13,10 +13,10 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "^4.0.6",
-    "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/compiler-sfc": "^3.2.25",
     "typescript": "^4.4.4",
-    "vite": "3.1.2",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "workspace:*",
     "vue": "^3.2.25"
   }
diff --git a/packages/e2e/package.json b/packages/e2e/package.json
@@ -11,7 +11,7 @@
     "cross-env": "^7.0.3",
     "sass": "^1.49.9",
     "typescript": "^4.4.4",
-    "vite": "3.1.2",
+    "vite": "^4.1.4",
     "vite-plugin-web-extension": "workspace:*",
     "vitest": "^0.23.2"
   }
diff --git a/packages/vite-plugin-web-extension/package.json b/packages/vite-plugin-web-extension/package.json
@@ -45,6 +45,7 @@
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
     "md5": "^2.3.0",
+    "vite": "^4.1.4",
     "web-ext": "^7.2.0",
     "webextension-polyfill": "^0.10.0",
     "yaml": "^2.2.1"
@@ -57,13 +58,12 @@
     "@types/md5": "^2.3.1",
     "@types/node": "^16.11.6",
     "@types/webextension-polyfill": "^0.9.0",
-    "rollup": "2.78.1",
+    "rollup": "3.15.0",
     "tsup": "^6.5.0",
     "typescript": "^4.4.4",
-    "vite": "3.1.2",
     "vitest": "^0.28.4"
   },
   "peerDependencies": {
-    "vite": "^3"
+    "vite": "^4"
   }
-}
+}
diff --git a/packages/vite-plugin-web-extension/src/build/build-context.ts b/packages/vite-plugin-web-extension/src/build/build-context.ts
@@ -144,7 +144,7 @@ export function createBuildContext({
 
   function waitForWatchBuildComplete(watcher: rollup.RollupWatcher) {
     return new Promise<void>((res, rej) => {
-      watcher.addListener("event", async (e) => {
+      watcher.on("event", async (e) => {
         switch (e.code) {
           case "END":
             res();
@@ -174,7 +174,7 @@ export function createBuildContext({
         (config.plugins ??= []).push(bundleTracker);
 
         const output = await vite.build(config);
-        if ("addListener" in output) {
+        if ("on" in output) {
           activeWatchers.push(output);
           // In watch mode, wait until it's built once
           await waitForWatchBuildComplete(output);
diff --git a/packages/vite-plugin-web-extension/src/build/getViteConfigsForInputs.ts b/packages/vite-plugin-web-extension/src/build/getViteConfigsForInputs.ts
@@ -1,6 +1,5 @@
 import path from "node:path";
 import * as vite from "vite";
-import { V } from "vitest/dist/global-fe52f84b";
 import type browser from "webextension-polyfill";
 import { Logger } from "../logger";
 import { ProjectPaths, Manifest } from "../options";
diff --git a/packages/vite-plugin-web-extension/src/build/renderManifest.test.ts b/packages/vite-plugin-web-extension/src/build/renderManifest.test.ts
@@ -1,5 +1,4 @@
 import { describe, expect, it } from "vitest";
-import { Manifest } from "webextension-polyfill";
 import { renderManifest, BundleMap } from "./renderManifest";
 
 describe("renderManifest", () => {
diff --git a/packages/vite-plugin-web-extension/src/plugins/bundle-tracker-plugin.ts b/packages/vite-plugin-web-extension/src/plugins/bundle-tracker-plugin.ts
@@ -1,4 +1,3 @@
-import * as rollup from "rollup";
 import * as vite from "vite";
 import { BUNDLE_TRACKER_PLUGIN_NAME } from "../constants";
 
diff --git a/packages/vite-plugin-web-extension/src/plugins/manifest-loader-plugin.ts b/packages/vite-plugin-web-extension/src/plugins/manifest-loader-plugin.ts
@@ -15,8 +15,6 @@ import {
 import path from "node:path";
 import fs from "fs-extra";
 import { inspect } from "node:util";
-import * as rollup from "rollup";
-import type browser from "webextension-polyfill";
 import { createWebExtRunner, ExtensionRunner } from "../extension-runner";
 import { createManifestValidator } from "../manifest-validation";
 import { ContentSecurityPolicy } from "../csp";
@@ -223,12 +221,17 @@ export function manifestLoaderPlugin(options: ResolvedOptions): vite.Plugin {
       isError = err != null;
     },
 
-    // Runs during: build, watch
+    // Runs during: build, watch, dev (only when pressing ctrl+C to stop server)
     async closeBundle() {
       if (isError || mode === BuildMode.BUILD || options.disableAutoLaunch) {
         return;
       }
 
+      // Vite4 handles SIGINT (ctrl+C) in dev mode and calls closeBundle after stopping the server.
+      // So we need to manually close the open browser.
+      if (mode === BuildMode.DEV) return await extensionRunner.exit();
+
+      // This is where we open the browser in watch mode.
       await openBrowser();
     },
 
diff --git a/packages/vite-plugin-web-extension/src/utils.test.ts b/packages/vite-plugin-web-extension/src/utils.test.ts
@@ -257,8 +257,10 @@ describe("Utils", () => {
     });
 
     it("should work with Vite library options", () => {
-      const inputRecord: vite.LibraryOptions = { entry: "src/test.ts" };
-      const expected = [inputRecord.entry];
+      const inputRecord: vite.LibraryOptions = {
+        entry: ["src/test.ts", "test2.ts"],
+      };
+      const expected = inputRecord.entry;
 
       const actual = getInputPaths(paths, inputRecord);
 
diff --git a/packages/vite-plugin-web-extension/src/utils.ts b/packages/vite-plugin-web-extension/src/utils.ts
@@ -131,7 +131,8 @@ export function getInputPaths(
   let inputs: string[];
   if (typeof input === "string") inputs = [input];
   else if (Array.isArray(input)) inputs = input;
-  else if ("entry" in input) inputs = [input.entry];
+  else if ("entry" in input)
+    inputs = getInputPaths(paths, (input as vite.LibraryOptions).entry);
   else inputs = Object.values(input);
 
   return inputs.map((file) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,8 @@`
`18`	`18`	`"body-parser",`
`19`	`19`	`"download",`
`20`	`20`	`"express",`
`21`		`- "safe-compare"`
	`21`	`+ "safe-compare",`
	`22`	`+ "@algolia/client-search"`
`22`	`23`	`]`
`23`	`24`	`}`
`24`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`},`
`14`	`14`	`"devDependencies": {`
`15`	`15`	`"@vitejs/plugin-react-swc": "^3.0.0",`
`16`		`- "vite": "^4.0.0",`
	`16`	`+ "vite": "^4.1.4",`
`17`	`17`	`"vite-plugin-web-extension": "^1.4.9",`
`18`	`18`	`"webextension-polyfill": "^0.10.0"`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`"@types/webextension-polyfill": "^0.9.0",`
`18`	`18`	`"@vitejs/plugin-react-swc": "^3.0.0",`
`19`	`19`	`"typescript": "^4.9.3",`
`20`		`- "vite": "^4.0.0",`
	`20`	`+ "vite": "^4.1.4",`
`21`	`21`	`"vite-plugin-web-extension": "^1.4.9",`
`22`	`22`	`"webextension-polyfill": "^0.10.0"`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`"build": "vite build"`
`9`	`9`	`},`
`10`	`10`	`"devDependencies": {`
`11`		`- "vite": "^3.2.5",`
	`11`	`+ "vite": "^4.1.4",`
`12`	`12`	`"vite-plugin-web-extension": "^2.0.2",`
`13`	`13`	`"webextension-polyfill": "^0.10.0"`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`"devDependencies": {`
`12`	`12`	`"@types/webextension-polyfill": "^0.10.0",`
`13`	`13`	`"typescript": "^4.9.5",`
`14`		`- "vite": "^3.2.5",`
	`14`	`+ "vite": "^4.1.4",`
`15`	`15`	`"vite-plugin-web-extension": "^2.0.2",`
`16`	`16`	`"webextension-polyfill": "^0.10.0"`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`},`
`8`	`8`	`"devDependencies": {`
`9`	`9`	`"typescript": "^4.4.4",`
`10`		`- "vite": "3.1.2",`
	`10`	`+ "vite": "^4.1.4",`
`11`	`11`	`"vite-plugin-web-extension": "workspace:*"`
`12`	`12`	`}`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`"@types/lodash.debounce": "^4.0.6",`
`17`	`17`	`"sass": "^1.49.9",`
`18`	`18`	`"typescript": "^4.4.4",`
`19`		`- "vite": "3.1.2",`
	`19`	`+ "vite": "^4.1.4",`
`20`	`20`	`"vite-plugin-web-extension": "workspace:*"`
`21`	`21`	`}`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { describe, expect, it } from "vitest";`
`2`		`-import { Manifest } from "webextension-polyfill";`
`3`	`2`	`import { renderManifest, BundleMap } from "./renderManifest";`
`4`	`3`
`5`	`4`	`describe("renderManifest", () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import * as rollup from "rollup";`
`2`	`1`	`import * as vite from "vite";`
`3`	`2`	`import { BUNDLE_TRACKER_PLUGIN_NAME } from "../constants";`
`4`	`3`