perf(size)!: Switch from tsup to unbuild for building WXT

docs/guide/go-further/testing.md

@@ -19,7 +19,7 @@ There are other options for unit tests however, like [Jest](https://jestjs.io/),
 If you want to try to use a different framework for unit tests, you will need to configure the environment manually:
 
 - **Auto-imports**: Add `unimport` to your test environment or disable them by setting `imports: false` in your `wxt.config.ts` file
-- **`browser` mock**: Mock the `webextension-polyfill` module globally with `wxt/dist/virtual/mock-browser.js`
+- **`browser` mock**: Mock the `webextension-polyfill` module globally with `wxt/dist/virtual/mock-browser.mjs`
 - **[Remote Code Bundling](/guide/go-further/remote-code)**: If you use it, configure your environment to handle the `url:` module prefix
 - **Global Variables**: If you consume them, manually define globals provided by WXT (like `import.meta.env.BROWSER`) by adding them to the global scope before accessing them (`import.meta.env.BROWSER = "chrome"`)
 - **Import paths**: If you use the `@/` or `~/` path aliases, add them to your test environment

packages/wxt/bin/wxt.mjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import '../dist/cli.js';
+import '../dist/cli/index.mjs';

packages/wxt/build.config.ts

@@ -0,0 +1,49 @@
+import { defineBuildConfig } from 'unbuild';
+import { version } from './package.json';
+import { readFile, writeFile } from 'fs/promises';
+import {
+  virtualEntrypointModuleNames,
+  virtualModuleNames,
+} from './src/core/utils/virtual-modules';
+
+export default defineBuildConfig([
+  // Non-virtual modules can be transpiled with mkdist
+  {
+    entries: [
+      {
+        builder: 'mkdist',
+        input: 'src',
+        pattern: ['**/*', '!**/__tests__', '!**/*.md', '!virtual'],
+        declaration: true,
+      },
+    ],
+    hooks: {
+      async 'build:done'() {
+        // Replace any template variables in output files
+        await replaceVars('dist/version.mjs', { version });
+      },
+    },
+  },
+
+  // Virtual modules must be bundled individually
+  ...virtualModuleNames.map((moduleName) => ({
+    entries: [`src/virtual/${moduleName}.ts`],
+    externals: [
+      ...virtualEntrypointModuleNames.map((name) => `virtual:user-${name}`),
+      'virtual:wxt-plugins',
+      'virtual:app-config',
+      'wxt/browser',
+      'wxt/sandbox',
+      'wxt/client',
+      'wxt/testing',
+    ],
+  })),
+]);
+
+async function replaceVars(file: string, vars: Record<string, string>) {
+  let text = await readFile(file, 'utf8');
+  Object.entries(vars).forEach(([name, value]) => {
+    text = text.replaceAll(`{{${name}}}`, value);
+  });
+  await writeFile(file, text, 'utf8');
+}

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { TestProject } from '../utils';
-import { resetBundleIncrement } from '~/core/builders/vite/plugins';
+import { resetBundleIncrement } from '../../src/core/builders/vite/plugins';
 import open from 'open';
 
 vi.mock('open');

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { TestProject } from '../utils';
-import { WxtHooks } from '~/types';
+import { WxtHooks } from '../../src/types';
 
 const hooks: WxtHooks = {
   ready: vi.fn(),

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

@@ -1,9 +1,8 @@
 import { describe, it, expect } from 'vitest';
-import { TestProject } from '../utils';
+import { TestProject, WXT_PACKAGE_DIR } from '../utils';
 import { execaCommand } from 'execa';
 import glob from 'fast-glob';
 import { mkdir, writeJson } from 'fs-extra';
-import { WXT_PACKAGE_DIR } from '../utils';
 
 describe('Init command', () => {
   it('should download and create a template', async () => {

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

@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { TestProject } from '../utils';
 import type { GenericEntrypoint, InlineConfig } from '../../src/types';
 import { readFile } from 'fs-extra';
-import { normalizePath } from '~/core/utils/paths';
+import { normalizePath } from '../../src/core/utils/paths';
 
 describe('Module Helpers', () => {
   describe('options', () => {

packages/wxt/e2e/tests/user-config.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { TestProject } from '../utils';
-import { InlineConfig } from '~/types';
+import { InlineConfig } from '../../src/types';
 
 describe('User Config', () => {
   // Root directory is tested with all tests.

packages/wxt/package.json

@@ -30,69 +30,44 @@
     "wxt": "./bin/wxt.mjs",
     "wxt-publish-extension": "./bin/wxt-publish-extension.cjs"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
     },
     "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./dist/client.js"
+      "types": "./dist/client/index.d.ts",
+      "default": "./dist/client/index.mjs"
     },
     "./sandbox": {
-      "types": "./dist/sandbox.d.ts",
-      "import": "./dist/sandbox.js"
+      "types": "./dist/sandbox/index.d.ts",
+      "default": "./dist/sandbox/index.mjs"
     },
     "./browser": {
       "types": "./dist/browser.d.ts",
-      "import": "./dist/browser.js"
+      "default": "./dist/browser.mjs"
     },
     "./testing": {
-      "import": {
-        "types": "./dist/testing.d.ts",
-        "default": "./dist/testing.js"
-      },
-      "require": {
-        "types": "./dist/testing.d.cts",
-        "default": "./dist/testing.cjs"
-      }
+      "types": "./dist/testing/index.d.ts",
+      "default": "./dist/testing/index.mjs"
     },
     "./storage": {
-      "import": {
-        "types": "./dist/storage.d.ts",
-        "default": "./dist/storage.js"
-      },
-      "require": {
-        "types": "./dist/storage.d.cts",
-        "default": "./dist/storage.cjs"
-      }
+      "types": "./dist/storage.d.ts",
+      "default": "./dist/storage.mjs"
     },
     "./vite-builder-env": {
       "types": "./dist/vite-builder-env.d.ts"
     },
     "./modules": {
-      "import": {
-        "types": "./dist/modules.d.ts",
-        "default": "./dist/modules.js"
-      },
-      "require": {
-        "types": "./dist/modules.d.cts",
-        "default": "./dist/modules.cjs"
-      }
+      "types": "./dist/modules.d.ts",
+      "default": "./dist/modules.mjs"
     }
   },
   "scripts": {
     "wxt": "tsx src/cli/index.ts",
-    "build": "buildc -- tsx scripts/build.ts",
+    "build": "buildc -- unbuild",
     "check": "buildc --deps-only -- run-s -c check:*",
     "check:default": "check",
     "check:tsc-virtual": "tsc --noEmit -p src/virtual",
@@ -158,9 +133,9 @@
     "lodash.merge": "^4.6.2",
     "p-map": "^7.0.2",
     "publint": "^0.2.9",
-    "tsup": "^8.2.1",
     "tsx": "4.15.7",
     "typescript": "^5.5.3",
+    "unbuild": "^2.0.0",
     "vitest": "^2.0.3",
     "vitest-plugin-random-seed": "^1.1.0"
   }

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

@@ -1,4 +1,4 @@
-import { fakeWxt } from '~/core/utils/testing/fake-objects';
+import { fakeWxt } from '../core/utils/testing/fake-objects';
 import { addImportPreset, addViteConfig } from '../modules';
 import { describe, it, expect } from 'vitest';
 import { createHooks } from 'hookable';

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

@@ -1,7 +1,7 @@
 import { fakeBrowser } from '@webext-core/fake-browser';
 import { describe, it, expect, beforeEach, vi, expectTypeOf } from 'vitest';
-import { browser } from '~/browser';
-import { WxtStorageItem, storage } from '~/storage';
+import { browser } from '../browser';
+import { WxtStorageItem, storage } from '../storage';
 
 /**
  * This works because fakeBrowser is synchronous, and is will finish any number of chained

packages/wxt/src/builtin-modules/index.ts

@@ -1,4 +1,4 @@
-import { WxtModule } from '~/types';
+import { WxtModule } from '../types';
 import unimport from './unimport';
 
 export const builtinModules: WxtModule<any>[] = [unimport];

packages/wxt/src/builtin-modules/unimport.ts

@@ -1,10 +1,10 @@
-import { addViteConfig, defineWxtModule } from '~/modules';
+import { addViteConfig, defineWxtModule } from '../modules';
 import type {
   EslintGlobalsPropValue,
   WxtDirFileEntry,
   WxtModule,
   WxtResolvedUnimportOptions,
-} from '~/types';
+} from '../types';
 import { type Unimport, createUnimport } from 'unimport';
 import { Plugin } from 'vite';
 import { extname } from 'node:path';

packages/wxt/src/cli/__tests__/index.test.ts

@@ -1,10 +1,10 @@
 import { describe, it, vi, beforeEach, expect } from 'vitest';
-import { build } from '~/core/build';
-import { createServer } from '~/core/create-server';
-import { zip } from '~/core/zip';
-import { prepare } from '~/core/prepare';
-import { clean } from '~/core/clean';
-import { initialize } from '~/core/initialize';
+import { build } from '../../core/build';
+import { createServer } from '../../core/create-server';
+import { zip } from '../../core/zip';
+import { prepare } from '../../core/prepare';
+import { clean } from '../../core/clean';
+import { initialize } from '../../core/initialize';
 import { mock } from 'vitest-mock-extended';
 import consola from 'consola';
 
@@ -35,7 +35,7 @@ function mockArgv(...args: string[]) {
 }
 
 async function importCli() {
-  await import('~/cli');
+  await import('../../cli');
 }
 
 describe('CLI', () => {