chore: Refactor order of config resolution (#578)

aklinker1 · web-flow · commit c9c5d721ec27 · 2024-03-29T00:21:09.000-05:00
diff --git a/src/core/builders/vite/index.ts b/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,24 +15,16 @@ 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');
 
   /**
    * 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),
diff --git a/src/core/builders/vite/plugins/devHtmlPrerender.ts b/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}`;
diff --git a/src/core/builders/vite/plugins/devServerGlobals.ts b/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),
         },
       };
     },
diff --git a/src/core/create-server.ts b/src/core/create-server.ts
@@ -40,14 +40,64 @@ 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 = await getPort();
+    const hostname = 'localhost';
+    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 +124,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', () => {
diff --git a/src/core/utils/building/build-entrypoints.ts b/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);
diff --git a/src/core/utils/building/internal-build.ts b/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();
diff --git a/src/core/utils/building/resolve-config.ts b/src/core/utils/building/resolve-config.ts
@@ -7,15 +7,13 @@ import {
   UserManifestFn,
   UserManifest,
   ExtensionRunnerConfig,
-  WxtDevServer,
   WxtResolvedUnimportOptions,
   Logger,
   WxtCommand,
 } from '~/types';
 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,7 @@ export async function resolveConfig(
     }).map(([key, value]) => [key, path.resolve(root, value)]),
   );
 
-  const finalConfig: Omit<ResolvedConfig, 'builder'> = {
+  return {
     browser,
     command,
     debug,
@@ -143,22 +140,11 @@ export async function resolveConfig(
     experimental: defu(mergedConfig.experimental, {
       includeBrowserPolyfill: true,
     }),
-    server,
     dev: {
       reloadCommand,
     },
     hooks: mergedConfig.hooks ?? {},
-  };
-
-  const builder = await createViteBuilder(
-    inlineConfig,
-    userConfig,
-    finalConfig,
-  );
-
-  return {
-    ...finalConfig,
-    builder,
+    vite: mergedConfig.vite ?? (() => ({})),
   };
 }
 
@@ -174,10 +160,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 +185,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 +325,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.');
+}
diff --git a/src/core/utils/manifest.ts b/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 ??= {};
diff --git a/src/core/utils/testing/fake-objects.ts b/src/core/utils/testing/fake-objects.ts
diff --git a/src/core/wxt.ts b/src/core/wxt.ts
diff --git a/src/types/index.ts b/src/types/index.ts
