chore(release): wxt v0.18.8

This closes https://github.com/wxt-dev/wxt/issues/743

.github/workflows/validate.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm -r --sequential build
+      - run: pnpm buildc all
   build-demo:
     runs-on: ubuntu-22.04
     steps:

docs/.vitepress/components/UsingWxtSection.vue

@@ -29,6 +29,7 @@ const chromeExtensionIds = [
   'nedcanggplmbbgmlpcjiafgjcpdimpea', // YTBlock - Block any content from YouTube™
   'oadbjpccljkplmhnjekgjamejnbadlne', // demo.fun - Interactive product demos that convert
   'iopdafdcollfgaoffingmahpffckmjni', // SmartEReply: Elevate Your LinkedIn™ Engagement with AI 🚀📈
+  'khjdmjcmpolknpccmaaipmidphjokhdf', // WorkFlowy MultiFlow
 ];
 
 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);

docs/get-started/installation.md

@@ -15,7 +15,14 @@ npx wxt@latest init <project-name>
 ```
 
 ```sh [bun]
-bunx wxt@latest init <project-name>
+# The "wxt init" command currently fails when ran with bunx.
+# Use NPX as a workaround, and select "bun" as your package
+# manager. To stay up to date with this issue, follow
+# https://github.com/wxt-dev/wxt/issues/707
+#
+# bunx wxt@latest init <project-name>
+
+npx wxt@latest init <project-name>
 ```
 
 :::
@@ -96,7 +103,6 @@ pnpm dev
 ```
 
 :::tip 🎉&ensp;Well done!
-
 The dev command will build the extension for development, open the browser, and reload the different parts of the extension when you save changes.
 :::
 

docs/guide/directory-structure/entrypoints/sandbox.md

@@ -12,8 +12,8 @@ Firefox does not support sandboxed pages.
   :patterns="[
     ['sandbox.html', 'sandbox.html'],
     ['sandbox/index.html', 'sandbox.html'],
-    ['<name>.sandbox.html', '<name>.html` '],
-    ['<name>.sandbox/index.html', '<name>.html` '],
+    ['<name>.sandbox.html', '<name>.html'],
+    ['<name>.sandbox/index.html', '<name>.html'],
   ]"
 />
 

docs/guide/key-concepts/frontend-frameworks.md

@@ -1,28 +1,59 @@
 # Frontend Frameworks
 
-WXT supports all frontend frameworks with a Vite plugin:
+## Built-in Modules
 
-- `@vitejs/plugin-vue`
-- `@vitejs/plugin-react`
-- `@vitejs/plugin-react-swc`
-- And more!
+WXT has preconfigured modules for 4 frameworks:
 
-Just add the vite plugin to your config and you're good to go! Use the framework in HTML pages or content scripts, it will just work 👍
+- [`@wxt-dev/module-react`](https://github.com/wxt-dev/wxt/tree/main/packages/module-react)
+- [`@wxt-dev/module-vue`](https://github.com/wxt-dev/wxt/tree/main/packages/module-vue)
+- [`@wxt-dev/module-svelte`](https://github.com/wxt-dev/wxt/tree/main/packages/module-svelte)
+- [`@wxt-dev/module-solid`](https://github.com/wxt-dev/wxt/tree/main/packages/module-solid)
+
+Install the module for your framework, then add it to your config:
 
 :::code-group
 
-```ts [Vue]
+```ts [React]
 import { defineConfig } from 'wxt';
-import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
-  vite: () => ({
-    plugins: [vue()],
-  }),
+  modules: ['@wxt-dev/module-react'],
 });
 ```
 
-```ts [React]
+```ts [Vue]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-vue'],
+});
+```
+
+```ts [Svelte]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-svelte'],
+});
+```
+
+```ts [Solid]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-solid'],
+});
+```
+
+:::
+
+## Adding Vite Plugins
+
+If your framework doesn't have an official WXT module, no worries! WXT supports any framework with a Vite plugin.
+
+Just add the Vite plugin to your config and you're good to go! Use the framework in HTML pages or content scripts, it will just work 👍
+
+```ts
 import { defineConfig } from 'wxt';
 import react from '@vitejs/plugin-react';
 
@@ -33,18 +64,7 @@ export default defineConfig({
 });
 ```
 
-```ts [Svelte]
-import { defineConfig } from 'wxt';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-
-export default defineConfig({
-  vite: () => ({
-    plugins: [svelte()],
-  }),
-});
-```
-
-:::
+The WXT modules just simplify the configuration and add auto-imports. They're not much different than the above.
 
 ## Multiple Apps
 
@@ -84,9 +104,9 @@ Lots of frameworks come with routers for building a multi-page app using the URL
 
 Instead, you need to configure the router to run in "hash" mode, where the routing information is apart of the URL's hash, not the path (ie: `popup.html#/` and `popup.html#/account/settings`)
 
-Refer to your router's docs for information about "hash" mode and how to enable it. Here's a non-extensive list of a few popular routers:
+Refer to your router's docs for information about hash mode and how to enable it. Here's a non-extensive list of a few popular routers:
 
-- [React](https://reactrouter.com/en/main/routers/create-hash-router)
-- [Vue](https://router.vuejs.org/guide/essentials/history-mode.html#Hash-Mode)
-- [Svelte](https://www.npmjs.com/package/svelte-spa-router#hash-based-routing)
-- [Solid](https://github.com/solidjs/solid-router?tab=readme-ov-file#hash-mode-router)
+- [`react-router`](https://reactrouter.com/en/main/routers/create-hash-router)
+- [`vue-router`](https://router.vuejs.org/guide/essentials/history-mode.html#Hash-Mode)
+- [`svelte-spa-router`](https://www.npmjs.com/package/svelte-spa-router#hash-based-routing)
+- [`solid-router`](https://github.com/solidjs/solid-router?tab=readme-ov-file#hash-mode-router)

package.json

@@ -15,10 +15,10 @@
     "docs:gen": "typedoc --options docs/typedoc.json",
     "docs:dev": "pnpm -s docs:gen && vitepress dev docs",
     "docs:build": "pnpm -s docs:gen && vitepress build docs",
-    "docs:preview": "pnpm -s docs:gen && vitepress preview docs",
-    "build-deps": "pnpm tsx scripts/build-deps.ts"
+    "docs:preview": "pnpm -s docs:gen && vitepress preview docs"
   },
   "devDependencies": {
+    "@aklinker1/buildc": "^1.0.7",
     "@aklinker1/check": "^1.3.1",
     "@types/fs-extra": "^11.0.4",
     "@vitest/coverage-v8": "^1.6.0",

packages/module-react/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.0
+
+Initial release 🎉

packages/module-react/package.json

@@ -21,12 +21,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm -s build-deps && unbuild",
-    "check": "pnpm -s build-deps && check",
-    "build-deps": "pnpm -ws build-deps @wxt-dev/module-react"
+    "build": "buildc -- unbuild",
+    "check": "buildc --deps-only -- check"
   },
   "peerDependencies": {
-    "wxt": ">=0.18.5"
+    "wxt": ">=0.18.6"
   },
   "dependencies": {
     "@vitejs/plugin-react": "^4.3.1"

packages/module-solid/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## v1.0.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/module-solid-v1.0.0...module-solid-v1.0.1)
+
+### 🩹 Fixes
+
+- Add `target: esnext` by default ([#733](https://github.com/wxt-dev/wxt/pull/733))
+
+### 🏡 Chore
+
+- Add changelog ([21e8ca0](https://github.com/wxt-dev/wxt/commit/21e8ca0))
+
+## v1.0.0
+
+Initial release 🎉

packages/module-solid/README.md

@@ -4,7 +4,7 @@ Enables the use of [SolidJS](https://www.solidjs.com/) in your web extension, in
 
 This plugin makes a few changes:
 
-1. Adds `vite-plugin-solid` to vite
+1. Adds `vite-plugin-solid` to and sets `build.target: esnext` in the vite config
 2. Adds the [`solid-js` preset](https://github.com/unjs/unimport/blob/main/src/presets/solid.ts) to auto-imports
 
 ## Usage

packages/module-solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wxt-dev/module-solid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -21,12 +21,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm -s build-deps && unbuild",
-    "check": "pnpm -s build-deps && check",
-    "build-deps": "pnpm -ws build-deps @wxt-dev/module-solid"
+    "build": "buildc -- unbuild",
+    "check": "buildc --deps-only -- check"
   },
   "peerDependencies": {
-    "wxt": ">=0.18.5"
+    "wxt": ">=0.18.6"
   },
   "dependencies": {
     "vite-plugin-solid": "^2.10.2"

packages/module-solid/src/index.ts

@@ -10,6 +10,9 @@ export default defineWxtModule<SolidModuleOptions>({
 
     addViteConfig(wxt, () => ({
       plugins: [solid(vite)],
+      build: {
+        target: 'esnext',
+      },
     }));
 
     addImportPreset(wxt, 'solid-js');

packages/module-svelte/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.0
+
+Initial release 🎉

packages/module-svelte/package.json

@@ -21,12 +21,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm -s build-deps && unbuild",
-    "check": "pnpm -s build-deps && check",
-    "build-deps": "pnpm -ws build-deps @wxt-dev/module-svelte"
+    "build": "buildc -- unbuild",
+    "check": "buildc --deps-only -- check"
   },
   "peerDependencies": {
-    "wxt": ">=0.18.5"
+    "wxt": ">=0.18.6"
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.1"

packages/module-vue/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.0
+
+Initial release 🎉

packages/module-vue/package.json

@@ -21,12 +21,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm -s build-deps && unbuild",
-    "check": "pnpm -s build-deps && check",
-    "build-deps": "pnpm -ws build-deps @wxt-dev/module-vue"
+    "build": "buildc -- unbuild",
+    "check": "buildc --deps-only -- check"
   },
   "peerDependencies": {
-    "wxt": ">=0.18.5"
+    "wxt": ">=0.18.6"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.5"

packages/wxt-demo/package.json

@@ -4,18 +4,17 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "pnpm -s build-deps && wxt",
-    "build": "pnpm -s build-deps && wxt build",
-    "build:all": "pnpm -s build-deps && run-s -s 'build:all:*'",
+    "dev": "buildc --deps-only -- wxt",
+    "build": "buildc -- wxt build",
+    "build:all": "buildc --deps-only -- run-s -s 'build:all:*'",
     "build:all:chrome-mv3": "wxt build",
     "build:all:chrome-mv2": "wxt build --mv2",
     "build:all:firefox-mv3": "wxt build -b firefox --mv3",
     "build:all:firefox-mv2": "wxt build -b firefox",
-    "test": "pnpm -s build-deps && vitest",
-    "zip": "pnpm -s build-deps && wxt zip",
-    "check": "pnpm -s build-deps && check",
-    "postinstall": "pnpm -s build-deps && wxt prepare",
-    "build-deps": "pnpm -sw build-deps wxt-demo"
+    "test": "buildc --deps-only -- vitest",
+    "zip": "buildc --deps-only -- wxt zip",
+    "check": "buildc --deps-only -- check",
+    "postinstall": "buildc --deps-only -- wxt prepare"
   },
   "dependencies": {
     "react": "^18.3.1",
@@ -27,5 +26,8 @@
     "sass": "^1.77.5",
     "typescript": "^5.4.5",
     "wxt": "workspace:*"
+  },
+  "buildc": {
+    "outDir": ".output/chrome-mv3"
   }
 }

packages/wxt-demo/src/entrypoints/ui.content/index.ts

@@ -13,7 +13,7 @@ export default defineContentScript({
       anchor: 'form[role=search]',
       onMount: (container) => {
         const app = document.createElement('div');
-        app.textContent = 'Custom content script UI';
+        app.textContent = browser.i18n.getMessage('prompt_for_name');
         container.append(app);
       },
     });

packages/wxt-demo/wxt.config.ts

@@ -21,6 +21,9 @@ export default defineConfig({
   experimental: {
     viteRuntime: true,
   },
+  runner: {
+    startUrls: ['https://duckduckgo.com'],
+  },
   example: {
     a: 'a',
     // @ts-expect-error: c is not defined, this should error out

packages/wxt/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## v0.18.8
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.7...wxt-v0.18.8)
+
+### 🚀 Enhancements
+
+- **dev:** Reload extension when public files change ([#752](https://github.com/wxt-dev/wxt/pull/752))
+
+### 🩹 Fixes
+
+- Don't load plugins twice in HTML pages ([#746](https://github.com/wxt-dev/wxt/pull/746))
+- Ignore .wxt file changes in dev ([#755](https://github.com/wxt-dev/wxt/pull/755))
+- **modules:** `addViteConfig` ignored user vite config ([#760](https://github.com/wxt-dev/wxt/pull/760))
+
+### 🏡 Chore
+
+- Refactor client web socket util ([#753](https://github.com/wxt-dev/wxt/pull/753))
+- Add E2E test for `addImportPreset` ([9fc6408](https://github.com/wxt-dev/wxt/commit/9fc6408))
+
+## v0.18.7
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.6...wxt-v0.18.7)
+
+### 🩹 Fixes
+
+- **dev:** Fix CSP error loading HTML plugins ([#723](https://github.com/wxt-dev/wxt/pull/723))
+- Generalize react-refresh preamble logic to virtualize all inline scripts ([#728](https://github.com/wxt-dev/wxt/pull/728))
+- **zip:** Revert dotfile changes from #674 ([#742](https://github.com/wxt-dev/wxt/pull/742), [#674](https://github.com/wxt-dev/wxt/issues/674))
+
+### 🏡 Chore
+
+- **deps:** Upgrade and sync all dependencies ([#725](https://github.com/wxt-dev/wxt/pull/725))
+- Extract build cache script to NPM package ([#737](https://github.com/wxt-dev/wxt/pull/737))
+
 ## v0.18.6
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.5...wxt-v0.18.6)

packages/wxt/e2e/tests/modules.test.ts

@@ -287,5 +287,29 @@ describe('Module Helpers', () => {
 
       await expect(project.serializeOutput()).resolves.toContain(expectedText);
     });
+
+    it('should add preset', async () => {
+      const project = new TestProject();
+      project.addFile(
+        'entrypoints/background.ts',
+        `export default defineBackground(() => {
+            customImport();
+          });`,
+      );
+      project.addFile(
+        'modules/test.ts',
+        `import { defineWxtModule, addImportPreset } from 'wxt/modules';
+
+        export default defineWxtModule((wxt) => {
+          addImportPreset(wxt, "vue");
+        })`,
+      );
+
+      await project.build();
+
+      await expect(
+        project.serializeFile('.wxt/types/imports.d.ts'),
+      ).resolves.toContain("const ref: typeof import('vue')['ref']");
+    });
   });
 });

packages/wxt/e2e/tests/zip.test.ts

@@ -97,7 +97,8 @@ describe('Zipping', () => {
     expect(await project.fileExists(sourcesZip)).toBe(true);
   });
 
-  it('should not zip hidden files into sources by default', async () => {
+  // TODO: Fix #738 and re-enable
+  it.skip('should not zip hidden files into sources by default', async () => {
     const project = new TestProject({
       name: 'test',
       version: '1.0.0',
@@ -117,7 +118,8 @@ describe('Zipping', () => {
     expect(await project.fileExists(unzipDir, '.env')).toBe(false);
   });
 
-  it('should allow zipping hidden files into sources when explicitly listed', async () => {
+  // TODO: Fix #738 and re-enable
+  it.skip('should allow zipping hidden files into sources when explicitly listed', async () => {
     const project = new TestProject({
       name: 'test',
       version: '1.0.0',

packages/wxt/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.18.6",
+  "version": "0.18.8",
   "description": "Next gen framework for developing web extensions",
   "repository": {
     "type": "git",
@@ -92,12 +92,12 @@
   },
   "scripts": {
     "wxt": "tsx src/cli/index.ts",
-    "build": "tsx scripts/build.ts",
-    "check": "run-s -c check:*",
+    "build": "buildc -- tsx scripts/build.ts",
+    "check": "buildc --deps-only -- run-s -c check:*",
     "check:default": "check",
     "check:tsc-virtual": "tsc --noEmit -p src/virtual",
-    "test": "vitest",
-    "test:e2e": "vitest -r e2e",
+    "test": "buildc --deps-only -- vitest",
+    "test:e2e": "buildc --deps-only -- vitest -r e2e",
     "sync-releases": "pnpx changelogen@latest gh release"
   },
   "dependencies": {

packages/wxt/src/__tests__/modules.test.ts

@@ -13,10 +13,10 @@ describe('Module Utilities', () => {
       const userConfig = {};
       const moduleConfig = { build: { sourcemap: true } };
 
-      wxt.config.vite = () => userConfig;
+      wxt.config.vite = () => Promise.resolve(userConfig);
       addViteConfig(wxt, () => moduleConfig);
       await wxt.hooks.callHook('ready', wxt);
-      const actual: any = wxt.config.vite(wxt.config.env);
+      const actual = await wxt.config.vite(wxt.config.env);
 
       expect(actual).toEqual(expected);
     });
@@ -32,7 +32,7 @@ describe('Module Utilities', () => {
       wxt.config.vite = () => userConfig;
       addViteConfig(wxt, () => moduleConfig);
       await wxt.hooks.callHook('ready', wxt);
-      const actual: any = wxt.config.vite(wxt.config.env);
+      const actual = await wxt.config.vite(wxt.config.env);
 
       expect(actual).toEqual(expected);
     });

packages/wxt/src/core/builders/vite/plugins/wxtPluginLoader.ts

@@ -46,13 +46,19 @@ try {
       // Use "pre" so the new script is added before vite bundles all the scripts
       order: 'pre',
       handler(html, _ctx) {
-        const { document } = parseHTML(html);
-        const script = document.createElement('script');
-        script.type = 'module';
-        script.src =
+        const src =
           config.command === 'serve'
             ? `http://${config.dev.server?.hostname}:${config.dev.server?.port}/@id/${virtualHtmlModuleId}`
             : virtualHtmlModuleId;
+
+        const { document } = parseHTML(html);
+        const existing = document.querySelector(`script[src='${src}']`);
+        if (existing) return;
+
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.src = src;
+
         if (document.head == null) {
           const newHead = document.createElement('head');
           document.documentElement.prepend(newHead);

packages/wxt/src/core/create-server.ts

@@ -153,6 +153,7 @@ function createFileReloader(server: WxtDevServer) {
 
     // Here, "path" is a non-normalized path (ie: C:\\users\\... instead of C:/users/...)
     if (path.startsWith(wxt.config.outBaseDir)) return;
+    if (path.startsWith(wxt.config.wxtDir)) return;
     changeQueue.push([event, path]);
 
     await fileChangedMutex.runExclusive(async () => {

packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts

@@ -100,6 +100,11 @@ describe('Detect Dev Changes', () => {
   describe('Public Assets', () => {
     it("should return 'extension-reload' without any groups to rebuild when the changed file is a public asset", () => {
       const changes = ['/root/src/public/image.svg'];
+      setFakeWxt({
+        config: {
+          publicDir: '/root/src/public',
+        },
+      });
       const asset1 = fakeOutputAsset({
         fileName: 'image.svg',
       });
@@ -114,10 +119,7 @@ describe('Detect Dev Changes', () => {
       const expected: DevModeChange = {
         type: 'extension-reload',
         rebuildGroups: [],
-        cachedOutput: {
-          ...currentOutput,
-          publicAssets: [asset2],
-        },
+        cachedOutput: currentOutput,
       };
 
       const actual = detectDevChanges(changes, currentOutput);

packages/wxt/src/core/utils/building/detect-dev-changes.ts

@@ -2,7 +2,6 @@ import {
   BuildOutput,
   BuildStepOutput,
   EntrypointGroup,
-  OutputAsset,
   OutputFile,
 } from '~/types';
 import { every, some } from '~/core/utils/arrays';
@@ -50,12 +49,25 @@ export function detectDevChanges(
       findEffectedSteps(changedFile, currentOutput),
     ),
   );
-  if (changedSteps.size === 0) return { type: 'no-change' };
+  if (changedSteps.size === 0) {
+    const hasPublicChange = some(changedFiles, (file) =>
+      file.startsWith(wxt.config.publicDir),
+    );
+    if (hasPublicChange) {
+      return {
+        type: 'extension-reload',
+        rebuildGroups: [],
+        cachedOutput: currentOutput,
+      };
+    } else {
+      return { type: 'no-change' };
+    }
+  }
 
   const unchangedOutput: BuildOutput = {
     manifest: currentOutput.manifest,
     steps: [],
-    publicAssets: [],
+    publicAssets: [...currentOutput.publicAssets],
   };
   const changedOutput: BuildOutput = {
     manifest: currentOutput.manifest,
@@ -70,13 +82,6 @@ export function detectDevChanges(
       unchangedOutput.steps.push(step);
     }
   }
-  for (const asset of currentOutput.publicAssets) {
-    if (changedSteps.has(asset)) {
-      changedOutput.publicAssets.push(asset);
-    } else {
-      unchangedOutput.publicAssets.push(asset);
-    }
-  }
 
   const isOnlyHtmlChanges =
     changedFiles.length > 0 &&
@@ -117,8 +122,8 @@ export function detectDevChanges(
 function findEffectedSteps(
   changedFile: string,
   currentOutput: BuildOutput,
-): DetectedChange[] {
-  const changes: DetectedChange[] = [];
+): BuildStepOutput[] {
+  const changes: BuildStepOutput[] = [];
   const changedPath = normalizePath(changedFile);
 
   const isChunkEffected = (chunk: OutputFile): boolean =>
@@ -135,11 +140,6 @@ function findEffectedSteps(
     if (effectedChunk) changes.push(step);
   }
 
-  const effectedAsset = currentOutput.publicAssets.find((chunk) =>
-    isChunkEffected(chunk),
-  );
-  if (effectedAsset) changes.push(effectedAsset);
-
   return changes;
 }
 
@@ -194,10 +194,3 @@ interface ContentScriptReload extends RebuildChange {
   type: 'content-script-reload';
   changedSteps: BuildStepOutput[];
 }
-
-/**
- * When figuring out what needs reloaded, this stores the step that was changed, or the public
- * directory asset that was changed. It doesn't know what type of change is required yet. Just an
- * intermediate type.
- */
-type DetectedChange = BuildStepOutput | OutputAsset;

packages/wxt/src/core/zip.ts

@@ -104,7 +104,8 @@ async function zipDir(
       // Ignore node_modules, otherwise this glob step takes forever
       ignore: ['**/node_modules'],
       onlyFiles: true,
-      dot: true,
+      // TODO: Fix #738
+      // dot: true,
     })
   ).filter((relativePath) => {
     return (

packages/wxt/src/modules.ts

@@ -104,13 +104,11 @@ export function addViteConfig(
 ): void {
   wxt.hooks.hook('ready', (wxt) => {
     const userVite = wxt.config.vite;
-    wxt.config.vite = (env) =>
-      vite.mergeConfig(
-        // Use config added by module as base
-        viteConfig(env) ?? {},
-        // Overwrite module config with user config
-        userVite(env),
-      );
+    wxt.config.vite = async (env) => {
+      const fromUser = await userVite(env);
+      const fromModule = viteConfig(env) ?? {};
+      return vite.mergeConfig(fromModule, fromUser);
+    };
   });
 }
 

packages/wxt/src/sandbox/dev-server-websocket.ts

@@ -0,0 +1,85 @@
+import { logger } from './utils/logger';
+
+interface WebSocketMessage {
+  type: string;
+  event: string;
+  data?: any;
+}
+
+export interface WxtWebSocket extends WebSocket {
+  addWxtEventListener(
+    type: 'wxt:reload-extension',
+    callback: (event: CustomEvent<undefined>) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  addWxtEventListener(
+    type: 'wxt:reload-content-script',
+    callback?: (event: CustomEvent<ReloadContentScriptPayload>) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  addWxtEventListener(
+    type: 'wxt:reload-page',
+    callback?: (event: CustomEvent<string>) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  sendCustom(event: string, payload?: any): void;
+}
+
+let ws: WxtWebSocket | undefined;
+
+/**
+ * Connect to the websocket and listen for messages.
+ *
+ * @param onMessage Optional callback that is called when a message is recieved and we've verified
+ *                  it's structure is what we expect.
+ */
+export function getDevServerWebSocket(): WxtWebSocket {
+  if (import.meta.env.COMMAND !== 'serve')
+    throw Error(
+      'Must be running WXT dev command to connect to call getDevServerWebSocket()',
+    );
+
+  if (ws == null) {
+    const serverUrl = `${__DEV_SERVER_PROTOCOL__}//${__DEV_SERVER_HOSTNAME__}:${__DEV_SERVER_PORT__}`;
+    logger.debug('Connecting to dev server @', serverUrl);
+
+    ws = new WebSocket(serverUrl, 'vite-hmr') as WxtWebSocket;
+    ws.addWxtEventListener = ws.addEventListener.bind(ws);
+    ws.sendCustom = (event, payload) =>
+      ws?.send(JSON.stringify({ type: 'custom', event, payload }));
+
+    ws.addEventListener('open', () => {
+      logger.debug('Connected to dev server');
+    });
+    ws.addEventListener('close', () => {
+      logger.debug('Disconnected from dev server');
+    });
+    ws.addEventListener('error', (event) => {
+      logger.error('Failed to connect to dev server', event);
+    });
+
+    ws.addEventListener('message', (e) => {
+      try {
+        const message = JSON.parse(e.data) as WebSocketMessage;
+        if (message.type === 'custom') {
+          ws?.dispatchEvent(
+            new CustomEvent(message.event, { detail: message.data }),
+          );
+        }
+      } catch (err) {
+        logger.error('Failed to handle message', err);
+      }
+    });
+  }
+
+  return ws;
+}
+
+export interface ReloadContentScriptPayload {
+  registration?: 'manifest' | 'runtime';
+  contentScript: {
+    matches: string[];
+    js?: string[];
+    css?: string[];
+  };
+}

packages/wxt/src/virtual/background-entrypoint.ts

@@ -1,6 +1,6 @@
 import definition from 'virtual:user-background-entrypoint';
 import { initPlugins } from 'virtual:wxt-plugins';
-import { setupWebSocket } from './utils/setup-web-socket';
+import { getDevServerWebSocket } from '../sandbox/dev-server-websocket';
 import { logger } from '../sandbox/utils/logger';
 import { browser } from 'wxt/browser';
 import { keepServiceWorkerAlive } from './utils/keep-service-worker-alive';
@@ -8,18 +8,19 @@ import { reloadContentScript } from './utils/reload-content-scripts';
 
 if (import.meta.env.COMMAND === 'serve') {
   try {
-    const ws = setupWebSocket((message) => {
-      if (message.event === 'wxt:reload-extension') browser.runtime.reload();
-      if (message.event === 'wxt:reload-content-script' && message.data != null)
-        reloadContentScript(message.data);
+    const ws = getDevServerWebSocket();
+    ws.addWxtEventListener('wxt:reload-extension', () => {
+      browser.runtime.reload();
+    });
+    ws.addWxtEventListener('wxt:reload-content-script', (event) => {
+      reloadContentScript(event.detail);
     });
 
     if (import.meta.env.MANIFEST_VERSION === 3) {
       // Tell the server the background script is loaded and ready to go
-      ws.addEventListener('open', () => {
-        const msg = { type: 'custom', event: 'wxt:background-initialized' };
-        ws.send(JSON.stringify(msg));
-      });
+      ws.addEventListener('open', () =>
+        ws.sendCustom('wxt:background-initialized'),
+      );
 
       // Web Socket will disconnect if the service worker is killed
       keepServiceWorkerAlive();

packages/wxt/src/virtual/reload-html.ts

@@ -1,16 +1,12 @@
 import { logger } from '../sandbox/utils/logger';
-import { setupWebSocket } from './utils/setup-web-socket';
+import { getDevServerWebSocket } from '../sandbox/dev-server-websocket';
 
 if (import.meta.env.COMMAND === 'serve') {
   try {
-    setupWebSocket((message) => {
-      if (message.event === 'wxt:reload-page') {
-        // We need to remove the initial slash from the path to compare correctly
-        // "popup.html" === "/popup.html".substring(1)
-        if (message.data === location.pathname.substring(1)) {
-          location.reload();
-        }
-      }
+    const ws = getDevServerWebSocket();
+    ws.addWxtEventListener('wxt:reload-page', (event) => {
+      // "popup.html" === "/popup.html".substring(1)
+      if (event.detail === location.pathname.substring(1)) location.reload();
     });
   } catch (err) {
     logger.error('Failed to setup web socket connection with dev server', err);

packages/wxt/src/virtual/utils/reload-content-scripts.ts

@@ -1,16 +1,7 @@
 import { browser } from 'wxt/browser';
 import { logger } from '../../sandbox/utils/logger';
 import { MatchPattern } from 'wxt/sandbox';
-
-interface ContentScript {
-  matches: string[];
-  js?: string[];
-  css?: string[];
-}
-interface ReloadContentScriptPayload {
-  registration?: 'manifest' | 'runtime';
-  contentScript: ContentScript;
-}
+import type { ReloadContentScriptPayload } from '../../sandbox/dev-server-websocket';
 
 export function reloadContentScript(payload: ReloadContentScriptPayload) {
   const manifest = browser.runtime.getManifest();
@@ -32,6 +23,8 @@ export async function reloadContentScriptMv3({
   }
 }
 
+type ContentScript = ReloadContentScriptPayload['contentScript'];
+
 export async function reloadManifestContentScriptMv3(
   contentScript: ContentScript,
 ) {

packages/wxt/src/virtual/utils/setup-web-socket.ts

@@ -1,44 +0,0 @@
-import { logger } from '../../sandbox/utils/logger';
-
-interface WebSocketMessage {
-  type: string;
-  event: string;
-  data?: any;
-}
-
-/**
- * Connect to the websocket and listen for messages.
- *
- * @param onMessage Optional callback that is called when a message is recieved and we've verified
- *                  it's structure is what we expect.
- */
-export function setupWebSocket(
-  onMessage?: (message: WebSocketMessage) => void,
-) {
-  const serverUrl = `${__DEV_SERVER_PROTOCOL__}//${__DEV_SERVER_HOSTNAME__}:${__DEV_SERVER_PORT__}`;
-  logger.debug('Connecting to dev server @', serverUrl);
-  const ws = new WebSocket(serverUrl, 'vite-hmr');
-
-  ws.addEventListener('open', () => {
-    logger.debug('Connected to dev server');
-  });
-  ws.addEventListener('close', () => {
-    logger.debug('Disconnected from dev server');
-  });
-  ws.addEventListener('error', (event) => {
-    logger.error('Failed to connect to dev server', event);
-  });
-
-  ws.addEventListener('message', (e) => {
-    try {
-      const message = JSON.parse(e.data) as WebSocketMessage;
-      if (message.type === 'custom' && message.event?.startsWith?.('wxt:')) {
-        onMessage?.(message);
-      }
-    } catch (err) {
-      logger.error('Failed to handle message', err);
-    }
-  });
-
-  return ws;
-}

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     devDependencies:
+      '@aklinker1/buildc':
+        specifier: ^1.0.7
+        version: 1.0.7(typescript@5.4.5)
       '@aklinker1/check':
         specifier: ^1.3.1
         version: 1.3.1(typescript@5.4.5)
@@ -374,6 +377,23 @@ importers:
 
 packages:
 
+  /@aklinker1/buildc@1.0.7(typescript@5.4.5):
+    resolution: {integrity: sha512-8njwYe/uxeeyqfj1ryOOwWolNaoJpVjFMoR8muNezo4D6IL6NBNN2XNhqaCShlDBjHM5NG7mdsd/5rueqsKReg==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    dependencies:
+      cac: 6.7.14
+      consola: 3.2.3
+      dependency-graph: 1.0.0
+      fast-glob: 3.3.2
+      fs-extra: 11.2.0
+      ohash: 1.1.3
+      pathe: 1.1.2
+      typescript: 5.4.5
+      yaml: 2.4.5
+    dev: true
+
   /@aklinker1/check@1.3.1(typescript@5.4.5):
     resolution: {integrity: sha512-EALKJzoojytjC6cYLIjRjC+nNpVdqSWYjJm8FTUtWneemKDs+Q46PaMyEx2EYTRbj4fO0OXj9igABwbpp/vV4g==}
     hasBin: true

scripts/build-deps.ts

@@ -1,133 +0,0 @@
-//
-// Build all workspace packages, or only dependencies of a specific package.
-// Kind of a simple version of nx/turborepo, but we can keep using PNPM to run
-// all commands.
-//
-// Usage:
-//   pnpm tsx scripts/build-deps.ts               # Builds all packages in repo
-//   pnpm tsx scripts/build-deps.ts <packageName> # Builds only dependencies of <packageName>
-//
-
-import glob from 'fast-glob';
-import { DepGraph } from 'dependency-graph';
-import fs from 'fs-extra';
-import YAML from 'yaml';
-import { execa } from 'execa';
-import consola from 'consola';
-import { hashFile, hash } from 'hasha';
-import { resolve } from 'node:path';
-
-// Quick hack to prevent recursive calls to this script. If it's being called
-// from another instance of this script, the parent instance is already
-// preforming this build, so it can be skipped.
-if (process.env.BUILD_DEPS) process.exit(0);
-process.env.BUILD_DEPS = 'true';
-
-// Parse args
-const packageToBuild = process.argv[2];
-if (packageToBuild == null) {
-  consola.info('Building all packages...');
-} else {
-  consola.info(`Building dependencies of \`${packageToBuild}\``);
-}
-
-// Build graph
-const workspace: { packages: string[] } = YAML.parse(
-  await fs.readFile('pnpm-workspace.yaml', 'utf8'),
-);
-const packageDirs = await glob(workspace.packages, { onlyDirectories: true });
-
-const graph = new DepGraph<Record<string, any>>();
-// Add all packages to chart
-for (const packageDir of packageDirs) {
-  try {
-    const packageJson = await fs.readJson(`${packageDir}/package.json`);
-    graph.addNode(packageJson.name, { ...packageJson, dir: packageDir });
-  } catch {
-    // Package missing package.json, ignore it
-  }
-}
-// Add dependencies between packages
-graph.entryNodes().forEach((packageName) => {
-  const packageJson = graph.getNodeData(packageName);
-  [
-    ...Object.entries<string>(packageJson.dependencies ?? {}),
-    ...Object.entries<string>(packageJson.devDependencies ?? {}),
-  ].forEach(([dep, version]) => {
-    if (version !== 'workspace:*') return;
-    graph.addDependency(packageName, dep);
-  });
-});
-function printGraph(graph: DepGraph<any>) {
-  consola.debug('Dependency Graph:');
-  function printNode(node: string, level = 0) {
-    consola.debug(`${''.padStart(level * 2, ' ')}- \`${node}\``);
-    graph.dependenciesOf(node).forEach((dep) => printNode(dep, level + 1));
-  }
-  graph.entryNodes().forEach((entry) => printNode(entry));
-}
-printGraph(graph);
-if (packageToBuild) {
-  // Remove nodes not associated with the package to build
-  graph.entryNodes().forEach((entry) => {
-    if (entry !== packageToBuild) graph.removeNode(entry);
-  });
-}
-
-// Get order
-const buildOrder = graph.overallOrder().filter(
-  // Remove packageToBuild if provided
-  (packageName) => packageName !== packageToBuild,
-);
-consola.info('Build order:', buildOrder);
-
-// Build dependencies of a package
-async function hashDir(dir: string): Promise<string> {
-  const files = await glob('**/*', {
-    ignore: [
-      '**/dist/**',
-      '**/node_modules/**',
-      '**/__tests__/**',
-      '**/e2e/**',
-      'CHANGELOG.md',
-      'typedoc.json',
-      'vitest.*.ts',
-    ],
-    cwd: dir,
-  });
-  const hashes = await Promise.all(
-    files.sort().map(async (file) => {
-      const hash = await hashFile(resolve(dir, file), { algorithm: 'md5' });
-      return `${hash}-${file}`;
-    }),
-  );
-  consola.debug(hashes.join('\n'));
-  return await hash(hashes.join('\n'), { algorithm: 'md5' });
-}
-async function buildPackage(packageName: string): Promise<void> {
-  const packageJson = graph.getNodeData(packageName);
-  const hash = await hashDir(packageJson.dir);
-  consola.debug('Directory hash:', hash);
-  const cacheDir = resolve('.cache', packageJson.dir, hash);
-  const outputDir = resolve(packageJson.dir, 'dist');
-  if (await fs.pathExists(cacheDir)) {
-    await fs.ensureDir(outputDir);
-    await fs.copy(cacheDir, outputDir);
-    consola.success(`\`${packageName}\` cached`);
-  } else {
-    await execa('pnpm', ['--filter', packageName, 'build'], {
-      stdio: 'inherit',
-    });
-    await fs.ensureDir(cacheDir);
-    await fs.copy(outputDir, cacheDir);
-  }
-}
-
-try {
-  for (const packageName of buildOrder) {
-    await buildPackage(packageName);
-  }
-} catch (err) {
-  consola.error(err);
-  process.exit(1);
-}

scripts/create-github-release.ts

@@ -29,5 +29,7 @@ await createGithubRelease(config, {
   tag_name: prevTag,
   name: `${pkgName} v${currentVersion}`,
   body: releases[0].body,
+  // @ts-expect-error: Not typed in changelogen, but present: https://docs.github.com/en/rest/releases/releases?apiVersion=2022-11-28#create-a-release
+  make_latest: String(pkg === 'wxt'),
 });
 consola.success('Created release');

templates/react/package.json

@@ -21,7 +21,7 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@wxt-dev/module-react": "^1.0.0",
     "typescript": "^5.4.5",
     "wxt": "^0.18.6"
   }

templates/react/wxt.config.ts

@@ -1,9 +1,6 @@
 import { defineConfig } from 'wxt';
-import react from '@vitejs/plugin-react';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-  vite: () => ({
-    plugins: [react()],
-  }),
+  modules: ['@wxt-dev/module-react'],
 });

templates/solid/package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "typescript": "^5.4.5",
-    "vite-plugin-solid": "^2.10.2",
+    "@wxt-dev/module-solid": "^1.0.0",
     "wxt": "^0.18.6"
   }
 }

templates/solid/wxt.config.ts

@@ -1,12 +1,6 @@
 import { defineConfig } from 'wxt';
-import Solid from 'vite-plugin-solid';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-  vite: () => ({
-    build: {
-      target: 'esnext',
-    },
-    plugins: [Solid()],
-  }),
+  modules: ['@wxt-dev/module-solid'],
 });

templates/svelte/package.json

@@ -14,8 +14,8 @@
     "postinstall": "wxt prepare"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tsconfig/svelte": "^5.0.4",
+    "@wxt-dev/module-svelte": "^1.0.0",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
     "tslib": "^2.6.3",

templates/svelte/wxt.config.ts

@@ -1,16 +1,7 @@
 import { defineConfig } from 'wxt';
-import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
   srcDir: 'src',
-  vite: () => ({
-    plugins: [
-      svelte({
-        // Using a svelte.config.js file causes a segmentation fault when importing the file
-        configFile: false,
-        preprocess: [vitePreprocess()],
-      }),
-    ],
-  }),
+  modules: ['@wxt-dev/module-svelte'],
 });

templates/vue/package.json

@@ -18,7 +18,7 @@
     "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@wxt-dev/module-vue": "^1.0.0",
     "typescript": "^5.4.5",
     "vue-tsc": "^2.0.21",
     "wxt": "^0.18.6"

templates/vue/wxt.config.ts

@@ -1,18 +1,6 @@
 import { defineConfig } from 'wxt';
-import vue from '@vitejs/plugin-vue';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-  imports: {
-    addons: {
-      vueTemplate: true,
-    },
-  },
-  vite: () => ({
-    plugins: [vue()],
-    build: {
-      // Enabling sourcemaps with Vue during development is known to cause problems with Vue
-      sourcemap: false,
-    },
-  }),
+  modules: ['@wxt-dev/module-vue'],
 });