chore(release): v0.17.10

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

.github/workflows/validate.yml

@@ -7,24 +7,12 @@ on:
       - main
 
 jobs:
-  formatting:
+  checks:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm format:check
-  lint:
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm lint
-  type-check:
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm compile
+      - run: pnpm check
   validate-demo:
     runs-on: ubuntu-22.04
     steps:

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## v0.17.10
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.9...v0.17.10)
+
+### 🚀 Enhancements
+
+- Add `dev.server.port` config ([#577](https://github.com/wxt-dev/wxt/pull/577))
+
+### 🏡 Chore
+
+- Use `@aklinker1/check` to simplify checks setup ([#550](https://github.com/wxt-dev/wxt/pull/550))
+- Refactor order of config resolution ([#578](https://github.com/wxt-dev/wxt/pull/578))
+
+### ❤️ Contributors
+
+- Zizheng Tai ([@zizhengtai](http://github.com/zizhengtai))
+
 ## v0.17.9
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.8...v0.17.9)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.17.9",
+  "version": "0.17.10",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
@@ -87,14 +87,9 @@
   "scripts": {
     "wxt": "tsx src/cli/index.ts",
     "build": "tsx scripts/build.ts",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "lint": "run-p -c -s lint:*",
-    "lint:eslint": "echo 'ESLint: TODO'",
-    "lint:package": "publint",
-    "compile": "run-s -c compile:*",
-    "compile:wxt": "tsc --noEmit",
-    "compile:virtual": "tsc --noEmit -p src/virtual",
+    "check": "run-s -c check:*",
+    "check:default": "check",
+    "check:tsc-virtual": "tsc --noEmit -p src/virtual",
     "test": "vitest",
     "test:coverage": "vitest run --coverage.enabled \"--coverage.include=src/**\" \"--coverage.exclude=src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\"",
     "prepare": "simple-git-hooks",
@@ -146,6 +141,7 @@
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
+    "@aklinker1/check": "^1.1.1",
     "@faker-js/faker": "^8.3.1",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash.merge": "^4.6.9",

pnpm-lock.yaml

@@ -123,6 +123,9 @@ importers:
         specifier: ^0.10.0
         version: 0.10.0
     devDependencies:
+      '@aklinker1/check':
+        specifier: ^1.1.1
+        version: 1.1.1(typescript@5.3.3)
       '@faker-js/faker':
         specifier: ^8.3.1
         version: 8.3.1
@@ -238,6 +241,18 @@ importers:
 
 packages:
 
+  /@aklinker1/check@1.1.1(typescript@5.3.3):
+    resolution: {integrity: sha512-P6+vKw9Qm4y3newTcKt4kfxr4cCZgjaoDpCddpqutTZm6bKTgpmtUQNUzWbmpT/V41+86wNAko/jh58Klmn/5A==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    dependencies:
+      '@antfu/utils': 0.7.7
+      ci-info: 4.0.0
+      citty: 0.1.6
+      typescript: 5.3.3
+    dev: true
+
   /@aklinker1/rollup-plugin-visualizer@5.12.0:
     resolution: {integrity: sha512-X24LvEGw6UFmy0lpGJDmXsMyBD58XmX1bbwsaMLhNoM+UMQfQ3b2RtC+nz4b/NoRK5r6QJSKJHBNVeUdwqybaQ==}
     engines: {node: '>=14'}
@@ -402,6 +417,10 @@ packages:
       '@jridgewell/trace-mapping': 0.3.18
     dev: true
 
+  /@antfu/utils@0.7.7:
+    resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
+    dev: true
+
   /@babel/code-frame@7.22.5:
     resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==}
     engines: {node: '>=6.9.0'}
@@ -1910,13 +1929,12 @@ packages:
   /ci-info@4.0.0:
     resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
     engines: {node: '>=8'}
-    dev: false
+    dev: true
 
   /citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
     dependencies:
       consola: 3.2.3
-    dev: false
 
   /cli-boxes@3.0.0:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
@@ -2054,7 +2072,6 @@ packages:
   /consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
-    dev: false
 
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}

src/cli/__tests__/index.test.ts

@@ -116,6 +116,20 @@ describe('CLI', () => {
       });
     });
 
+    it('should respect passing --port', async () => {
+      const expectedPort = 3100;
+      mockArgv('--port', String(expectedPort));
+      await importCli();
+
+      expect(createServerMock).toBeCalledWith({
+        dev: {
+          server: {
+            port: expectedPort,
+          },
+        },
+      });
+    });
+
     it('should respect passing --debug', async () => {
       mockArgv('--debug');
       await importCli();

src/cli/commands.ts

@@ -16,6 +16,7 @@ cli
   .option('-c, --config <file>', 'use specified config file')
   .option('-m, --mode <mode>', 'set env mode')
   .option('-b, --browser <browser>', 'specify a browser')
+  .option('-p, --port <port>', 'specify a port for the dev server')
   .option(
     '-e, --filter-entrypoint <entrypoint>',
     'only build specific entrypoints',
@@ -35,6 +36,14 @@ cli
         configFile: flags.config,
         debug: flags.debug,
         filterEntrypoints: getArrayFromFlags(flags, 'filterEntrypoint'),
+        dev:
+          flags.port == null
+            ? undefined
+            : {
+                server: {
+                  port: parseInt(flags.port),
+                },
+              },
       });
       await server.start();
       return { isOngoing: true };

src/core/builders/vite/index.ts

@@ -2,12 +2,11 @@ import type * as vite from 'vite';
 import {
   BuildStepOutput,
   Entrypoint,
-  InlineConfig,
   ResolvedConfig,
-  UserConfig,
   VirtualEntrypointType,
   WxtBuilder,
   WxtBuilderServer,
+  WxtDevServer,
 } from '~/types';
 import * as wxtPlugins from './plugins';
 import {
@@ -16,9 +15,8 @@ import {
 } from '~/core/utils/entrypoints';
 
 export async function createViteBuilder(
-  inlineConfig: InlineConfig,
-  userConfig: UserConfig,
-  wxtConfig: Omit<ResolvedConfig, 'builder'>,
+  wxtConfig: ResolvedConfig,
+  server?: WxtDevServer,
 ): Promise<WxtBuilder> {
   const vite = await import('vite');
 
@@ -26,14 +24,7 @@ export async function createViteBuilder(
    * Returns the base vite config shared by all builds based on the inline and user config.
    */
   const getBaseConfig = async () => {
-    const resolvedInlineConfig =
-      (await inlineConfig.vite?.(wxtConfig.env)) ?? {};
-    const resolvedUserConfig = (await userConfig.vite?.(wxtConfig.env)) ?? {};
-
-    const config: vite.InlineConfig = vite.mergeConfig(
-      resolvedUserConfig,
-      resolvedInlineConfig,
-    );
+    const config: vite.InlineConfig = await wxtConfig.vite(wxtConfig.env);
 
     config.root = wxtConfig.root;
     config.configFile = false;
@@ -55,13 +46,13 @@ export async function createViteBuilder(
     config.plugins ??= [];
     config.plugins.push(
       wxtPlugins.download(wxtConfig),
-      wxtPlugins.devHtmlPrerender(wxtConfig),
+      wxtPlugins.devHtmlPrerender(wxtConfig, server),
       wxtPlugins.unimport(wxtConfig),
       wxtPlugins.virtualEntrypoint('background', wxtConfig),
       wxtPlugins.virtualEntrypoint('content-script-isolated-world', wxtConfig),
       wxtPlugins.virtualEntrypoint('content-script-main-world', wxtConfig),
       wxtPlugins.virtualEntrypoint('unlisted-script', wxtConfig),
-      wxtPlugins.devServerGlobals(wxtConfig),
+      wxtPlugins.devServerGlobals(wxtConfig, server),
       wxtPlugins.tsconfigPaths(wxtConfig),
       wxtPlugins.noopBackground(),
       wxtPlugins.globals(wxtConfig),

src/core/builders/vite/plugins/devHtmlPrerender.ts

@@ -13,6 +13,7 @@ let reactRefreshPreamble = '';
  */
 export function devHtmlPrerender(
   config: Omit<ResolvedConfig, 'builder'>,
+  server: WxtDevServer | undefined,
 ): vite.PluginOption {
   const htmlReloadId = '@wxt/reload-html';
   const resolvedHtmlReloadId = resolve(
@@ -38,7 +39,6 @@ export function devHtmlPrerender(
       // Convert scripts like src="./main.tsx" -> src="http://localhost:3000/entrypoints/popup/main.tsx"
       // before the paths are replaced with their bundled path
       transform(code, id) {
-        const server = config.server;
         if (
           config.command !== 'serve' ||
           server == null ||
@@ -68,7 +68,6 @@ export function devHtmlPrerender(
 
       // Pass the HTML through the dev server to add dev-mode specific code
       async transformIndexHtml(html, ctx) {
-        const server = config.server;
         if (config.command !== 'serve' || server == null) return;
 
         const originalUrl = `${server.origin}${ctx.path}`;

src/core/builders/vite/plugins/devServerGlobals.ts

@@ -1,22 +1,23 @@
 import { Plugin } from 'vite';
-import { ResolvedConfig } from '~/types';
+import { ResolvedConfig, WxtDevServer } from '~/types';
 
 /**
  * Defines global constants about the dev server. Helps scripts connect to the server's web socket.
  */
 export function devServerGlobals(
   config: Omit<ResolvedConfig, 'builder'>,
+  server: WxtDevServer | undefined,
 ): Plugin {
   return {
     name: 'wxt:dev-server-globals',
     config() {
-      if (config.server == null || config.command == 'build') return;
+      if (server == null || config.command == 'build') return;
 
       return {
         define: {
           __DEV_SERVER_PROTOCOL__: JSON.stringify('ws:'),
-          __DEV_SERVER_HOSTNAME__: JSON.stringify(config.server.hostname),
-          __DEV_SERVER_PORT__: JSON.stringify(config.server.port),
+          __DEV_SERVER_HOSTNAME__: JSON.stringify(server.hostname),
+          __DEV_SERVER_PORT__: JSON.stringify(server.port),
         },
       };
     },

src/core/create-server.ts

@@ -40,14 +40,63 @@ import { mapWxtOptionsToRegisteredContentScript } from './utils/content-scripts'
 export async function createServer(
   inlineConfig?: InlineConfig,
 ): Promise<WxtDevServer> {
-  const port = await getPort();
-  const hostname = 'localhost';
-  const origin = `http://${hostname}:${port}`;
-  const serverInfo: ServerInfo = {
-    port,
-    hostname,
-    origin,
-  };
+  await registerWxt('serve', inlineConfig, async (config) => {
+    const { port, hostname } = config.dev.server!;
+    const serverInfo: ServerInfo = {
+      port,
+      hostname,
+      origin: `http://${hostname}:${port}`,
+    };
+
+    // Server instance must be created first so its reference can be added to the internal config used
+    // to pre-render entrypoints
+    const server: WxtDevServer = {
+      ...serverInfo,
+      get watcher() {
+        return builderServer.watcher;
+      },
+      get ws() {
+        return builderServer.ws;
+      },
+      currentOutput: undefined,
+      async start() {
+        await builderServer.listen();
+        wxt.logger.success(`Started dev server @ ${serverInfo.origin}`);
+        await buildAndOpenBrowser();
+      },
+      async stop() {
+        await runner.closeBrowser();
+        await builderServer.close();
+      },
+      async restart() {
+        await closeAndRecreateRunner();
+        await buildAndOpenBrowser();
+      },
+      transformHtml(url, html, originalUrl) {
+        return builderServer.transformHtml(url, html, originalUrl);
+      },
+      reloadContentScript(payload) {
+        server.ws.send('wxt:reload-content-script', payload);
+      },
+      reloadPage(path) {
+        server.ws.send('wxt:reload-page', path);
+      },
+      reloadExtension() {
+        server.ws.send('wxt:reload-extension');
+      },
+      async restartBrowser() {
+        await closeAndRecreateRunner();
+        await runner.openBrowser();
+      },
+    };
+    return server;
+  });
+
+  const server = wxt.server!;
+  let [runner, builderServer] = await Promise.all([
+    createExtensionRunner(),
+    wxt.builder.createServer(server),
+  ]);
 
   const buildAndOpenBrowser = async () => {
     // Build after starting the dev server so it can be used to transform HTML files
@@ -74,55 +123,6 @@ export async function createServer(
     runner = await createExtensionRunner();
   };
 
-  // Server instance must be created first so its reference can be added to the internal config used
-  // to pre-render entrypoints
-  const server: WxtDevServer = {
-    ...serverInfo,
-    get watcher() {
-      return builderServer.watcher;
-    },
-    get ws() {
-      return builderServer.ws;
-    },
-    currentOutput: undefined,
-    async start() {
-      await builderServer.listen();
-      wxt.logger.success(`Started dev server @ ${serverInfo.origin}`);
-      await buildAndOpenBrowser();
-    },
-    async stop() {
-      await runner.closeBrowser();
-      await builderServer.close();
-    },
-    async restart() {
-      await closeAndRecreateRunner();
-      await buildAndOpenBrowser();
-    },
-    transformHtml(url, html, originalUrl) {
-      return builderServer.transformHtml(url, html, originalUrl);
-    },
-    reloadContentScript(payload) {
-      server.ws.send('wxt:reload-content-script', payload);
-    },
-    reloadPage(path) {
-      server.ws.send('wxt:reload-page', path);
-    },
-    reloadExtension() {
-      server.ws.send('wxt:reload-extension');
-    },
-    async restartBrowser() {
-      await closeAndRecreateRunner();
-      await runner.openBrowser();
-    },
-  };
-
-  await registerWxt('serve', inlineConfig, server);
-
-  let [runner, builderServer] = await Promise.all([
-    createExtensionRunner(),
-    wxt.config.builder.createServer(server),
-  ]);
-
   // Register content scripts for the first time after the background starts up since they're not
   // listed in the manifest
   server.ws.on('wxt:background-initialized', () => {
@@ -137,11 +137,6 @@ export async function createServer(
   return server;
 }
 
-async function getPort(): Promise<number> {
-  const { default: getPort, portNumbers } = await import('get-port');
-  return await getPort({ port: portNumbers(3000, 3010) });
-}
-
 /**
  * Returns a function responsible for reloading different parts of the extension when a file
  * changes.

src/core/utils/building/build-entrypoints.ts

@@ -18,7 +18,7 @@ export async function buildEntrypoints(
     spinner.text =
       pc.dim(`[${i + 1}/${groups.length}]`) + ` ${groupNameColored}`;
     try {
-      steps.push(await wxt.config.builder.build(group));
+      steps.push(await wxt.builder.build(group));
     } catch (err) {
       spinner.stop().clear();
       wxt.logger.error(err);

src/core/utils/building/internal-build.ts

@@ -37,7 +37,7 @@ export async function internalBuild(): Promise<BuildOutput> {
   const target = `${wxt.config.browser}-mv${wxt.config.manifestVersion}`;
   wxt.logger.info(
     `${verb} ${pc.cyan(target)} for ${pc.cyan(wxt.config.mode)} with ${pc.green(
-      `${wxt.config.builder.name} ${wxt.config.builder.version}`,
+      `${wxt.builder.name} ${wxt.builder.version}`,
     )}`,
   );
   const startTime = Date.now();

src/core/utils/building/resolve-config.ts

@@ -7,7 +7,6 @@ import {
   UserManifestFn,
   UserManifest,
   ExtensionRunnerConfig,
-  WxtDevServer,
   WxtResolvedUnimportOptions,
   Logger,
   WxtCommand,
@@ -15,7 +14,6 @@ import {
 import path from 'node:path';
 import { createFsCache } from '~/core/utils/cache';
 import consola, { LogLevels } from 'consola';
-import { createViteBuilder } from '~/core/builders/vite';
 import defu from 'defu';
 import { NullablyRequired } from '../types';
 import { isModuleInstalled } from '../package';
@@ -32,7 +30,6 @@ import { normalizePath } from '../paths';
 export async function resolveConfig(
   inlineConfig: InlineConfig,
   command: WxtCommand,
-  server?: WxtDevServer,
 ): Promise<ResolvedConfig> {
   // Load user config
 
@@ -54,7 +51,7 @@ export async function resolveConfig(
 
   // Merge it into the inline config
 
-  const mergedConfig = mergeInlineConfig(inlineConfig, userConfig);
+  const mergedConfig = await mergeInlineConfig(inlineConfig, userConfig);
 
   // Apply defaults to make internal config.
 
@@ -113,7 +110,20 @@ export async function resolveConfig(
     }).map(([key, value]) => [key, path.resolve(root, value)]),
   );
 
-  const finalConfig: Omit<ResolvedConfig, 'builder'> = {
+  let devServerConfig: ResolvedConfig['dev']['server'];
+  if (command === 'serve') {
+    let port = mergedConfig.dev?.server?.port;
+    if (port == null || !isFinite(port)) {
+      const { default: getPort, portNumbers } = await import('get-port');
+      port = await getPort({ port: portNumbers(3000, 3010) });
+    }
+    devServerConfig = {
+      port,
+      hostname: 'localhost',
+    };
+  }
+
+  return {
     browser,
     command,
     debug,
@@ -143,22 +153,12 @@ export async function resolveConfig(
     experimental: defu(mergedConfig.experimental, {
       includeBrowserPolyfill: true,
     }),
-    server,
     dev: {
+      server: devServerConfig,
       reloadCommand,
     },
     hooks: mergedConfig.hooks ?? {},
-  };
-
-  const builder = await createViteBuilder(
-    inlineConfig,
-    userConfig,
-    finalConfig,
-  );
-
-  return {
-    ...finalConfig,
-    builder,
+    vite: mergedConfig.vite ?? (() => ({})),
   };
 }
 
@@ -174,10 +174,10 @@ async function resolveManifestConfig(
 /**
  * Merge the inline config and user config. Inline config is given priority. Defaults are not applied here.
  */
-function mergeInlineConfig(
+async function mergeInlineConfig(
   inlineConfig: InlineConfig,
   userConfig: UserConfig,
-): InlineConfig {
+): Promise<InlineConfig> {
   // Merge imports option
   const imports: InlineConfig['imports'] =
     inlineConfig.imports === false || userConfig.imports === false
@@ -199,14 +199,16 @@ function mergeInlineConfig(
     inlineConfig.transformManifest?.(manifest);
   };
 
+  // Builders
+  const builderConfig = await mergeBuilderConfig(inlineConfig, userConfig);
+
   return {
     ...defu(inlineConfig, userConfig),
     // Custom merge values
     transformManifest,
     imports,
     manifest,
-    // Vite builder handles merging vite config internally
-    vite: undefined,
+    ...builderConfig,
   };
 }
 
@@ -337,3 +339,21 @@ const COMMAND_MODES: Record<WxtCommand, string> = {
   build: 'production',
   serve: 'development',
 };
+
+export async function mergeBuilderConfig(
+  inlineConfig: InlineConfig,
+  userConfig: UserConfig,
+): Promise<Pick<InlineConfig, 'vite'>> {
+  const vite = await import('vite').catch(() => void 0);
+  if (vite) {
+    return {
+      vite: async (env) => {
+        const resolvedInlineConfig = (await inlineConfig.vite?.(env)) ?? {};
+        const resolvedUserConfig = (await userConfig.vite?.(env)) ?? {};
+        return vite.mergeConfig(resolvedUserConfig, resolvedInlineConfig);
+      },
+    };
+  }
+
+  throw Error('Builder not found. Make sure vite is installed.');
+}

src/core/utils/manifest.ts

@@ -455,8 +455,8 @@ function discoverIcons(
 }
 
 function addDevModeCsp(manifest: Manifest.WebExtensionManifest): void {
-  const permission = `http://${wxt.config.server?.hostname ?? ''}/*`;
-  const allowedCsp = wxt.config.server?.origin ?? 'http://localhost:*';
+  const permission = `http://${wxt.server?.hostname ?? ''}/*`;
+  const allowedCsp = wxt.server?.origin ?? 'http://localhost:*';
 
   if (manifest.manifest_version === 3) {
     addHostPermission(manifest, permission);
@@ -473,7 +473,7 @@ function addDevModeCsp(manifest: Manifest.WebExtensionManifest): void {
         "script-src 'self'; object-src 'self';", // default CSP for MV2
   );
 
-  if (wxt.config.server) csp.add('script-src', allowedCsp);
+  if (wxt.server) csp.add('script-src', allowedCsp);
 
   if (manifest.manifest_version === 3) {
     manifest.content_security_policy ??= {};

src/core/utils/testing/fake-objects.ts

@@ -270,7 +270,6 @@ export const fakeResolvedConfig = fakeObjectCreator<ResolvedConfig>(() => {
     srcDir: fakeDir(),
     typesDir: fakeDir(),
     wxtDir: fakeDir(),
-    server: mock<WxtDevServer>(),
     analysis: {
       enabled: false,
       open: false,
@@ -296,11 +295,11 @@ export const fakeResolvedConfig = fakeObjectCreator<ResolvedConfig>(() => {
     experimental: {
       includeBrowserPolyfill: true,
     },
-    builder: mock(),
     dev: {
       reloadCommand: 'Alt+R',
     },
     hooks: {},
+    vite: () => ({}),
   };
 });
 
@@ -310,6 +309,8 @@ export const fakeWxt = fakeObjectCreator<Wxt>(() => ({
   logger: mock(),
   reloadConfig: vi.fn(),
   pm: mock(),
+  server: faker.helpers.arrayElement([undefined, mock<WxtDevServer>()]),
+  builder: mock(),
 }));
 
 export function setFakeWxt(overrides?: DeepPartial<Wxt>) {

src/core/wxt.ts

@@ -1,7 +1,15 @@
-import { InlineConfig, Wxt, WxtCommand, WxtDevServer, WxtHooks } from '~/types';
+import {
+  InlineConfig,
+  ResolvedConfig,
+  Wxt,
+  WxtCommand,
+  WxtDevServer,
+  WxtHooks,
+} from '~/types';
 import { resolveConfig } from './utils/building';
 import { createHooks } from 'hookable';
 import { createWxtPackageManager } from './package-managers';
+import { createViteBuilder } from './builders/vite';
 
 /**
  * Global variable set once `createWxt` is called once. Since this variable is used everywhere, this
@@ -15,10 +23,12 @@ export let wxt: Wxt;
 export async function registerWxt(
   command: WxtCommand,
   inlineConfig: InlineConfig = {},
-  server?: WxtDevServer,
+  getServer?: (config: ResolvedConfig) => Promise<WxtDevServer>,
 ): Promise<void> {
-  const config = await resolveConfig(inlineConfig, command, server);
   const hooks = createHooks<WxtHooks>();
+  const config = await resolveConfig(inlineConfig, command);
+  const server = await getServer?.(config);
+  const builder = await createViteBuilder(config, server);
   const pm = await createWxtPackageManager(config.root);
 
   wxt = {
@@ -28,9 +38,11 @@ export async function registerWxt(
       return config.logger;
     },
     async reloadConfig() {
-      wxt.config = await resolveConfig(inlineConfig, command, server);
+      wxt.config = await resolveConfig(inlineConfig, command);
     },
     pm,
+    builder,
+    server,
   };
 
   // Initialize hooks

src/types/index.ts

@@ -309,6 +309,12 @@ export interface InlineConfig {
    * Config effecting dev mode only.
    */
   dev?: {
+    server?: {
+      /**
+       * Port to run the dev server on. Defaults to the first open port from 3000 to 3010.
+       */
+      port?: number;
+    };
     /**
      * Controls whether a custom keyboard shortcut command, `Alt+R`, is added during dev mode to
      * quickly reload the extension.
@@ -344,6 +350,11 @@ export interface InlineConfig {
   vite?: (env: ConfigEnv) => WxtViteConfig | Promise<WxtViteConfig>;
 }
 
+// TODO: Move into @wxt/vite-builder
+export interface ResolvedConfig {
+  vite: (env: ConfigEnv) => WxtViteConfig | Promise<WxtViteConfig>;
+}
+
 // TODO: Move into @wxt/vite-builder
 export type WxtViteConfig = Omit<
   vite.UserConfig,
@@ -1002,6 +1013,14 @@ export interface Wxt {
    * Package manager utilities.
    */
   pm: WxtPackageManager;
+  /**
+   * If the dev server was started, it will be availble.
+   */
+  server?: WxtDevServer;
+  /**
+   * The module in charge of executing all the build steps.
+   */
+  builder: WxtBuilder;
 }
 
 export interface ResolvedConfig {
@@ -1028,7 +1047,6 @@ export interface ResolvedConfig {
   imports: false | WxtResolvedUnimportOptions;
   manifest: UserManifest;
   fsCache: FsCache;
-  server?: WxtDevServer;
   runnerConfig: C12ResolvedConfig<ExtensionRunnerConfig>;
   zip: {
     name?: string;
@@ -1064,11 +1082,15 @@ export interface ResolvedConfig {
   experimental: {
     includeBrowserPolyfill: boolean;
   };
-  builder: WxtBuilder;
   dev: {
+    /** Only defined during dev command */
+    server?: {
+      port: number;
+      hostname: string;
+    };
     reloadCommand: string | false;
   };
-  hooks: Partial<WxtHooks>;
+  hooks: NestedHooks<WxtHooks>;
 }
 
 export interface FsCache {