chore(release): @wxt-dev/storage v1.2.2

Co-authored-by: Aaron <aaronklinker1@gmail.com>

.github/workflows/release.yml

@@ -33,7 +33,8 @@ jobs:
     name: Publish
     runs-on: ubuntu-22.04
     permissions:
-      contents: write
+      contents: write # Push version changes
+      id-token: write # OIDC for NPM publishing
     needs:
       - validate
     steps:
@@ -61,9 +62,8 @@ jobs:
       - name: Publish to NPM
         working-directory: packages/${{ inputs.package }}
         run: |
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
-          pnpm build
-          pnpm publish
+          sudo npm i -g npm@latest
+          npm publish
 
       - name: Create GitHub release
         run: pnpm tsx scripts/create-github-release.ts ${{ inputs.package }}

.github/workflows/update-browser-package.yml

@@ -12,7 +12,8 @@ jobs:
     name: 'Sync with @types/chrome'
     runs-on: ubuntu-latest
     permissions:
-      contents: write
+      contents: write # Push version changes
+      id-token: write # OIDC for NPM publishing
     steps:
       - name: Checkout
         uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
@@ -42,5 +43,5 @@ jobs:
         if: steps.commit.outputs.changes_detected == 'true'
         working-directory: packages/browser
         run: |
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
-          pnpm publish
+          sudo npm i -g npm@latest
+          npm publish

docs/guide/essentials/unit-testing.md

@@ -9,7 +9,7 @@ WXT provides first class support for Vitest for unit testing:
 ```ts
 // vitest.config.ts
 import { defineConfig } from 'vitest/config';
-import { WxtVitest } from 'wxt/testing';
+import { WxtVitest } from 'wxt/testing/vitest-plugin';
 
 export default defineConfig({
   plugins: [WxtVitest()],
@@ -36,7 +36,7 @@ This example demonstrates that you don't have to mock `browser.storage` (used by
 
 ```ts
 import { describe, it, expect } from 'vitest';
-import { fakeBrowser } from 'wxt/testing';
+import { fakeBrowser } from 'wxt/testing/fake-browser';
 
 const accountStorage = storage.defineItem<Account>('local:account');
 

packages/storage/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.2.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/storage-v1.2.1...storage-v1.2.2)
+
+## v1.2.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/storage-v1.2.0...storage-v1.2.1)
+
 ## v1.2.0
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/storage-v1.1.1...storage-v1.2.0)

packages/storage/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wxt-dev/storage",
   "description": "Web extension storage API provided by WXT, supports all browsers.",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "repository": {
     "type": "git",

packages/wxt/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## v0.20.11
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.20.10...wxt-v0.20.11)
+
+### 🩹 Fixes
+
+- Split `wxt/testing` into separate modules to fix issues with `jsdom` and `happy-dom` ([#1844](https://github.com/wxt-dev/wxt/pull/1844))
+- `input_components` is supported by mv3 ([#1881](https://github.com/wxt-dev/wxt/pull/1881))
+
+### 🏡 Chore
+
+- **deps:** Upgrade project subdependencies ([#1882](https://github.com/wxt-dev/wxt/pull/1882))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](https://github.com/aklinker1))
+- Qijia Liu <liumeo@pku.edu.cn>
+- Marcellino Ornelas ([@marcellino-ornelas](https://github.com/marcellino-ornelas))
+
 ## v0.20.10
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.20.9...wxt-v0.20.10)

packages/wxt/e2e/tests/output-structure.test.ts

@@ -345,7 +345,6 @@ describe('Output Directory Structure', () => {
       .toMatchInlineSnapshot(`
         ".output/chrome-mv3/background.js
         ----------------------------------------
-        var _a, _b;
         import { l as logHello, i as initPlugins } from "./chunks/_virtual_wxt-plugins-OjKtWpmY.js";
         function defineBackground(arg) {
           if (arg == null || typeof arg === "function") return { main: arg };
@@ -357,7 +356,7 @@ describe('Output Directory Structure', () => {
             logHello("background");
           }
         });
-        ((_b = (_a = globalThis.browser) == null ? void 0 : _a.runtime) == null ? void 0 : _b.id) ? globalThis.browser : globalThis.chrome;
+        globalThis.browser?.runtime?.id ? globalThis.browser : globalThis.chrome;
         function print(method, ...args) {
           return;
         }
@@ -423,9 +422,8 @@ describe('Output Directory Structure', () => {
       .toMatchInlineSnapshot(`
         ".output/chrome-mv3/background.js
         ----------------------------------------
-        var background = function() {
+        var background = (function() {
           "use strict";
-          var _a, _b;
           function defineBackground(arg) {
             if (arg == null || typeof arg === "function") return { main: arg };
             return arg;
@@ -440,7 +438,7 @@ describe('Output Directory Structure', () => {
           });
           function initPlugins() {
           }
-          ((_b = (_a = globalThis.browser) == null ? void 0 : _a.runtime) == null ? void 0 : _b.id) ? globalThis.browser : globalThis.chrome;
+          globalThis.browser?.runtime?.id ? globalThis.browser : globalThis.chrome;
           function print(method, ...args) {
             return;
           }
@@ -465,7 +463,7 @@ describe('Output Directory Structure', () => {
           }
           const result$1 = result;
           return result$1;
-        }();
+        })();
         "
       `);
   });

packages/wxt/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.20.10",
+  "version": "0.20.11",
   "description": "⚡ Next-gen Web Extension Framework",
   "license": "MIT",
   "scripts": {
@@ -179,6 +179,14 @@
       "types": "./dist/browser.d.ts",
       "default": "./dist/browser.mjs"
     },
+    "./testing/fake-browser": {
+      "types": "./dist/testing/fake-browser.d.ts",
+      "default": "./dist/testing/fake-browser.mjs"
+    },
+    "./testing/vitest-plugin": {
+      "types": "./dist/testing/wxt-vitest-plugin.d.ts",
+      "default": "./dist/testing/wxt-vitest-plugin.mjs"
+    },
     "./testing": {
       "types": "./dist/testing/index.d.ts",
       "default": "./dist/testing/index.mjs"

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

@@ -43,7 +43,7 @@ export function extensionApiMock(config: ResolvedConfig): vite.PluginOption {
 
 const setupTemplate = `
   import { vi } from 'vitest';
-  import { fakeBrowser } from 'wxt/testing';
+  import { fakeBrowser } from 'wxt/testing/fake-browser';
 
   vi.stubGlobal("chrome", fakeBrowser);
   vi.stubGlobal("browser", fakeBrowser);

packages/wxt/src/core/utils/__tests__/manifest.test.ts

@@ -1351,7 +1351,6 @@ describe('Manifest Utils', () => {
         event_rules: {},
         file_browser_handlers: {},
         file_system_provider_capabilities: {},
-        input_components: {},
         nacl_modules: {},
         natively_connectable: {},
         offline_enabled: {},

packages/wxt/src/core/utils/env.ts

@@ -8,6 +8,7 @@ import type { TargetBrowser } from '../../types';
 export function loadEnv(mode: string, browser: TargetBrowser) {
   return expand(
     config({
+      quiet: true,
       // Files on top override files below
       path: [
         `.env.${mode}.${browser}.local`,

packages/wxt/src/core/utils/manifest.ts

@@ -716,7 +716,6 @@ const mv2OnlyKeys = [
   'event_rules',
   'file_browser_handlers',
   'file_system_provider_capabilities',
-  'input_components',
   'nacl_modules',
   'natively_connectable',
   'offline_enabled',

packages/wxt/src/testing/fake-browser.ts

@@ -1 +1,11 @@
+/**
+ * The fake browser is automatically used as a mock for the `wxt/browser` import
+ * when using `wxt/testing/vitest-plugin` with Vitest. It is also setup to
+ * reset all state before each test.
+ *
+ * This module is just a re-export of [@webext-core/fake-browser](https://webext-core.aklinker1.io/fake-browser/triggering-events).
+ *
+ * @module wxt/testing/fake-browser
+ */
+
 export { fakeBrowser, type FakeBrowser } from '@webext-core/fake-browser';

packages/wxt/src/testing/index.ts

@@ -1,5 +1,9 @@
 /**
  * Utilities for unit testing WXT extensions.
+ *
+ * @deprecated Use `wxt/testing/*` instead to prevent issues with JSDOM or
+ * HappyDOM environments. Will be removed in the next major version of WXT.
+ *
  * @module wxt/testing
  */
 export * from './fake-browser';

packages/wxt/src/testing/wxt-vitest-plugin.ts

@@ -1,3 +1,10 @@
+/**
+ * Contains a Vitest plugin that configures your test environment to work with
+ * WXT projects.
+ *
+ * @module wxt/testing/vitest
+ */
+
 import type * as vite from 'vite';
 import {
   download,
@@ -16,7 +23,7 @@ import { registerWxt, wxt } from '../core/wxt';
  * ```ts
  * // vitest.config.ts
  * import { defineConfig } from 'vitest/config';
- * import { WxtVitest } from 'wxt/testing';
+ * import { WxtVitest } from 'wxt/testing/vitest-plugin';
  *
  * export default defineConfig({
  *   plugins: [WxtVitest()],

packages/wxt/typedoc.json

@@ -17,6 +17,8 @@
     "src/utils/split-shadow-root-css.ts",
     "src/utils/storage.ts",
     "src/testing/index.ts",
+    "src/testing/fake-browser.ts",
+    "src/testing/wxt-vitest-plugin.ts",
     "src/modules.ts"
   ]
 }

templates/vanilla/entrypoints/popup/main.ts

@@ -1,12 +1,12 @@
 import './style.css';
 import typescriptLogo from '@/assets/typescript.svg';
-import viteLogo from '/wxt.svg';
+import wxtLogo from '/wxt.svg';
 import { setupCounter } from '@/components/counter';
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <div>
     <a href="https://wxt.dev" target="_blank">
-      <img src="${viteLogo}" class="logo" alt="WXT logo" />
+      <img src="${wxtLogo}" class="logo" alt="WXT logo" />
     </a>
     <a href="https://www.typescriptlang.org/" target="_blank">
       <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />