wxt 0.0.1 → 0.1.0

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/core/utils/getInternalConfig.ts
 import path2, { resolve as resolve7 } from "node:path";
-import * as vite from "vite";
+import * as vite2 from "vite";
 import { consola as consola2 } from "consola";
 
 // src/core/utils/importTsFile.ts
@@ -11,7 +11,7 @@ import { resolve } from "path";
 import { scanExports } from "unimport";
 async function importTsFile(root, path5) {
   const clientImports = await scanExports(
-    resolve(root, "node_modules/wxt/dist/client/index.js")
+    resolve(root, "node_modules/wxt/dist/client.js")
   );
   const jiti = createJITI(__filename, {
     cache: false,
@@ -38,6 +38,106 @@ async function importTsFile(root, path5) {
   }
 }
 
+// src/core/vite-plugins/devHtmlPrerender.ts
+import * as vite from "vite";
+
+// src/core/utils/entrypoints.ts
+import path, { relative, resolve as resolve2 } from "node:path";
+function getEntrypointName(entrypointsDir, inputPath) {
+  const relativePath = path.relative(entrypointsDir, inputPath);
+  const name = relativePath.split(/[\.\/]/, 2)[0];
+  return name;
+}
+function getEntrypointOutputFile(entrypoint, ext) {
+  return resolve2(entrypoint.outputDir, `${entrypoint.name}${ext}`);
+}
+function getEntrypointBundlePath(entrypoint, outDir, ext) {
+  return relative(outDir, getEntrypointOutputFile(entrypoint, ext));
+}
+
+// src/core/vite-plugins/devHtmlPrerender.ts
+import { parseHTML } from "linkedom";
+import { dirname, isAbsolute, relative as relative2, resolve as resolve3 } from "path";
+function devHtmlPrerender(config) {
+  return {
+    apply: "build",
+    name: "wxt:dev-html-prerender",
+    config(userConfig) {
+      return vite.mergeConfig(
+        {
+          resolve: {
+            alias: {
+              "@wxt/reload-html": resolve3(
+                config.root,
+                "node_modules/wxt/dist/virtual-modules/reload-html.js"
+              )
+            }
+          }
+        },
+        userConfig
+      );
+    },
+    async transform(html, id) {
+      const server = config.server;
+      if (config.command !== "serve" || server == null || !id.endsWith(".html"))
+        return;
+      const originalUrl = `${server.origin}${id}`;
+      const name = getEntrypointName(config.entrypointsDir, id);
+      const url = `${server.origin}/${name}.html`;
+      const serverHtml = await server.transformIndexHtml(
+        url,
+        html,
+        originalUrl
+      );
+      const { document } = parseHTML(serverHtml);
+      const pointToDevServer = (querySelector, attr) => {
+        document.querySelectorAll(querySelector).forEach((element) => {
+          const src = element.getAttribute(attr);
+          if (!src)
+            return;
+          if (isAbsolute(src)) {
+            element.setAttribute(attr, server.origin + src);
+          } else if (src.startsWith(".")) {
+            const abs = resolve3(dirname(id), src);
+            const pathname = relative2(config.root, abs);
+            element.setAttribute(attr, `${server.origin}/${pathname}`);
+          }
+        });
+      };
+      pointToDevServer("script[type=module]", "src");
+      pointToDevServer("link[rel=stylesheet]", "href");
+      const reloader = document.createElement("script");
+      reloader.src = "@wxt/reload-html";
+      reloader.type = "module";
+      document.head.appendChild(reloader);
+      const newHtml = document.toString();
+      config.logger.debug("Transformed " + id);
+      config.logger.debug("Old HTML:\n" + html);
+      config.logger.debug("New HTML:\n" + newHtml);
+      return newHtml;
+    }
+  };
+}
+
+// src/core/vite-plugins/devServerGlobals.ts
+function devServerGlobals(internalConfig) {
+  return {
+    name: "wxt:dev-server-globals",
+    config(config) {
+      if (internalConfig.server == null || internalConfig.command == "build")
+        return;
+      config.define ??= {};
+      config.define.__DEV_SERVER_PROTOCOL__ = JSON.stringify("ws:");
+      config.define.__DEV_SERVER_HOSTNAME__ = JSON.stringify(
+        internalConfig.server.hostname
+      );
+      config.define.__DEV_SERVER_PORT__ = JSON.stringify(
+        internalConfig.server.port
+      );
+    }
+  };
+}
+
 // src/core/utils/network.ts
 import dns from "node:dns";
 
@@ -107,61 +207,8 @@ function download(config) {
   };
 }
 
-// src/core/vite-plugins/unimport.ts
-import { createUnimport } from "unimport";
-
-// src/core/utils/auto-imports.ts
-import { mergeConfig } from "vite";
-function getUnimportOptions(config) {
-  const defaultOptions = {
-    debugLog: config.logger.debug,
-    imports: [
-      { name: "*", as: "browser", from: "webextension-polyfill" },
-      { name: "defineConfig", from: "wxt" }
-    ],
-    presets: [{ package: "wxt/client" }],
-    warn: config.logger.warn,
-    dirs: ["components", "composables", "hooks", "utils"]
-  };
-  return mergeConfig(
-    defaultOptions,
-    config.imports
-  );
-}
-
-// src/core/vite-plugins/unimport.ts
-function unimport(config) {
-  const options = getUnimportOptions(config);
-  const unimport2 = createUnimport(options);
-  return {
-    name: "wxt:unimport",
-    async config() {
-      await unimport2.scanImportsFromDir(void 0, { cwd: config.srcDir });
-    },
-    async transform(code, id) {
-      return unimport2.injectImports(code, id);
-    }
-  };
-}
-
-// src/core/vite-plugins/multipageMove.ts
-import { dirname, extname, resolve as resolve3 } from "node:path";
-
-// src/core/utils/entrypoints.ts
-import path, { relative, resolve as resolve2 } from "node:path";
-function getEntrypointName(entrypointsDir, inputPath) {
-  const relativePath = path.relative(entrypointsDir, inputPath);
-  const name = relativePath.split(/[\.\/]/, 2)[0];
-  return name;
-}
-function getEntrypointOutputFile(entrypoint, ext) {
-  return resolve2(entrypoint.outputDir, `${entrypoint.name}${ext}`);
-}
-function getEntrypointBundlePath(entrypoint, outDir, ext) {
-  return relative(outDir, getEntrypointOutputFile(entrypoint, ext));
-}
-
 // src/core/vite-plugins/multipageMove.ts
+import { dirname as dirname2, extname, resolve as resolve4 } from "node:path";
 import fs, { ensureDir } from "fs-extra";
 function multipageMove(entrypoints, config) {
   return {
@@ -187,10 +234,10 @@ function multipageMove(entrypoints, config) {
           );
           continue;
         }
-        const oldAbsPath = resolve3(config.outDir, oldBundlePath);
-        const newAbsPath = resolve3(config.outDir, newBundlePath);
-        await ensureDir(dirname(newAbsPath));
-        await fs.move(oldAbsPath, newAbsPath);
+        const oldAbsPath = resolve4(config.outDir, oldBundlePath);
+        const newAbsPath = resolve4(config.outDir, newBundlePath);
+        await ensureDir(dirname2(newAbsPath));
+        await fs.move(oldAbsPath, newAbsPath, { overwrite: true });
         const renamedChunk = {
           ...bundle[oldBundlePath],
           fileName: newBundlePath
@@ -202,47 +249,39 @@ function multipageMove(entrypoints, config) {
   };
 }
 
-// src/core/vite-plugins/devHtmlPrerender.ts
-import { parseHTML } from "linkedom";
-import { dirname as dirname2, isAbsolute, relative as relative2, resolve as resolve4 } from "path";
-function devHtmlPrerender(config) {
+// src/core/vite-plugins/unimport.ts
+import { createUnimport } from "unimport";
+
+// src/core/utils/auto-imports.ts
+import { mergeConfig as mergeConfig2 } from "vite";
+function getUnimportOptions(config) {
+  const defaultOptions = {
+    debugLog: config.logger.debug,
+    imports: [
+      { name: "*", as: "browser", from: "webextension-polyfill" },
+      { name: "defineConfig", from: "wxt" }
+    ],
+    presets: [{ package: "wxt/client" }],
+    warn: config.logger.warn,
+    dirs: ["components", "composables", "hooks", "utils"]
+  };
+  return mergeConfig2(
+    defaultOptions,
+    config.imports
+  );
+}
+
+// src/core/vite-plugins/unimport.ts
+function unimport(config) {
+  const options = getUnimportOptions(config);
+  const unimport2 = createUnimport(options);
   return {
-    apply: "build",
-    name: "wxt:dev-html-prerender",
-    async transform(html, id) {
-      const server = config.server;
-      if (config.command !== "serve" || server == null || !id.endsWith(".html"))
-        return;
-      const originalUrl = `${server.origin}${id}`;
-      const name = getEntrypointName(config.entrypointsDir, id);
-      const url = `${server.origin}/${name}.html`;
-      const serverHtml = await server.transformIndexHtml(
-        url,
-        html,
-        originalUrl
-      );
-      const { document } = parseHTML(serverHtml);
-      const pointToDevServer = (querySelector, attr) => {
-        document.querySelectorAll(querySelector).forEach((element) => {
-          const src = element.getAttribute(attr);
-          if (!src)
-            return;
-          if (isAbsolute(src)) {
-            element.setAttribute(attr, server.origin + src);
-          } else if (src.startsWith(".")) {
-            const abs = resolve4(dirname2(id), src);
-            const pathname = relative2(config.root, abs);
-            element.setAttribute(attr, `${server.origin}/${pathname}`);
-          }
-        });
-      };
-      pointToDevServer("script[type=module]", "src");
-      pointToDevServer("link[rel=stylesheet]", "href");
-      const newHtml = document.toString();
-      config.logger.debug("Transformed " + id);
-      config.logger.debug("Old HTML:\n" + html);
-      config.logger.debug("New HTML:\n" + newHtml);
-      return newHtml;
+    name: "wxt:unimport",
+    async config() {
+      await unimport2.scanImportsFromDir(void 0, { cwd: config.srcDir });
+    },
+    async transform(code, id) {
+      return unimport2.injectImports(code, id);
     }
   };
 }
@@ -267,10 +306,13 @@ function virtualEntrypoin(type, config) {
         return;
       const inputPath = id.replace(resolvedVirtualId, "");
       const template = await fs2.readFile(
-        resolve5(config.root, `node_modules/wxt/templates/virtual-${type}.ts`),
+        resolve5(
+          config.root,
+          `node_modules/wxt/dist/virtual-modules/${type}-entrypoint.js`
+        ),
         "utf-8"
       );
-      return template.replaceAll("{{moduleId}}", inputPath);
+      return template.replace(`virtual:user-${type}`, inputPath);
     }
   };
 }
@@ -334,6 +376,11 @@ function getGlobals(config) {
       name: "__IS_OPERA__",
       value: config.browser === "opera",
       type: `boolean`
+    },
+    {
+      name: "__COMMAND__",
+      value: config.command,
+      type: `"build" | "serve"`
     }
   ];
 }
@@ -378,7 +425,7 @@ async function getInternalConfig(config, command) {
       path2.resolve(root, config.configFile ?? "wxt.config.ts")
     );
   }
-  const merged = vite.mergeConfig(
+  const merged = vite2.mergeConfig(
     baseConfig,
     userConfig
   );
@@ -401,7 +448,7 @@ async function getInternalConfig(config, command) {
   };
   finalConfig.vite.root = root;
   finalConfig.vite.configFile = false;
-  finalConfig.vite.logLevel = "silent";
+  finalConfig.vite.logLevel = "warn";
   finalConfig.vite.build ??= {};
   finalConfig.vite.build.outDir = outDir;
   finalConfig.vite.build.emptyOutDir = false;
@@ -415,6 +462,7 @@ async function getInternalConfig(config, command) {
   finalConfig.vite.plugins.push(
     virtualEntrypoin("content-script", finalConfig)
   );
+  finalConfig.vite.plugins.push(devServerGlobals(finalConfig));
   finalConfig.vite.define ??= {};
   getGlobals(finalConfig).forEach((global) => {
     finalConfig.vite.define[global.name] = JSON.stringify(global.value);
@@ -422,27 +470,258 @@ async function getInternalConfig(config, command) {
   return finalConfig;
 }
 
-// src/core/build/findEntrypoints.ts
-import { relative as relative3, resolve as resolve8 } from "path";
+// src/index.ts
+import pc3 from "picocolors";
+import * as vite6 from "vite";
+
+// src/core/utils/arrays.ts
+function every(array, predicate) {
+  for (let i = 0; i < array.length; i++)
+    if (!predicate(array[i], i))
+      return false;
+  return true;
+}
+
+// src/core/utils/detectDevChanges.ts
+function detectDevChanges(changedFiles, currentOutput) {
+  if (currentOutput == null)
+    return { type: "no-change" };
+  const changedSteps = new Set(
+    changedFiles.flatMap(
+      (changedFile) => findEffectedSteps(changedFile, currentOutput)
+    )
+  );
+  if (changedSteps.size === 0)
+    return { type: "no-change" };
+  const unchangedOutput = {
+    manifest: currentOutput.manifest,
+    steps: [],
+    publicAssets: []
+  };
+  const changedOutput = {
+    manifest: currentOutput.manifest,
+    steps: [],
+    publicAssets: []
+  };
+  for (const step of currentOutput.steps) {
+    if (changedSteps.has(step)) {
+      changedOutput.steps.push(step);
+    } else {
+      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 && every(changedFiles, ([_, file]) => file.endsWith(".html"));
+  if (isOnlyHtmlChanges) {
+    return {
+      type: "html-reload",
+      cachedOutput: unchangedOutput,
+      rebuildGroups: changedOutput.steps.map((step) => step.entrypoints)
+    };
+  }
+  const isOnlyContentScripts = changedOutput.steps.length > 0 && every(
+    changedOutput.steps.flatMap((step) => step.entrypoints),
+    (entry) => entry.type === "content-script"
+  );
+  if (isOnlyContentScripts) {
+    return {
+      type: "content-script-reload",
+      cachedOutput: unchangedOutput,
+      changedSteps: changedOutput.steps,
+      rebuildGroups: changedOutput.steps.map((step) => step.entrypoints)
+    };
+  }
+  return {
+    type: "extension-reload",
+    cachedOutput: unchangedOutput,
+    rebuildGroups: changedOutput.steps.map((step) => step.entrypoints)
+  };
+}
+function findEffectedSteps(changedFile, currentOutput) {
+  const changes = [];
+  const changedPath = changedFile[1];
+  const isChunkEffected = (chunk) => (
+    // If it's an HTML file with the same path, is is effected because HTML files need to be pre-rendered
+    // TODO: use bundle path to support `<name>/index.html`?
+    chunk.type === "asset" && changedPath.endsWith(chunk.fileName) || // If it's a chunk that depends on the changed file, it is effected
+    chunk.type === "chunk" && chunk.moduleIds.includes(changedPath)
+  );
+  for (const step of currentOutput.steps) {
+    const effectedChunk = step.chunks.find((chunk) => isChunkEffected(chunk));
+    if (effectedChunk)
+      changes.push(step);
+  }
+  const effectedAsset = currentOutput.publicAssets.find(
+    (chunk) => isChunkEffected(chunk)
+  );
+  if (effectedAsset)
+    changes.push(effectedAsset);
+  return changes;
+}
+
+// src/index.ts
+import { Mutex } from "async-mutex";
+import { consola as consola3 } from "consola";
+import { relative as relative6 } from "node:path";
+
+// src/core/build/buildEntrypoints.ts
+import * as vite3 from "vite";
+
+// src/core/utils/removeEmptyDirs.ts
 import fs4 from "fs-extra";
-import picomatch from "picomatch";
-import { parseHTML as parseHTML2 } from "linkedom";
-import JSON5 from "json5";
+import path3 from "path";
+async function removeEmptyDirs(dir) {
+  const files = await fs4.readdir(dir);
+  for (const file of files) {
+    const filePath = path3.join(dir, file);
+    const stats = await fs4.stat(filePath);
+    if (stats.isDirectory()) {
+      await removeEmptyDirs(filePath);
+    }
+  }
+  try {
+    await fs4.rmdir(dir);
+  } catch {
+  }
+}
+
+// src/core/build/buildEntrypoints.ts
 import glob from "fast-glob";
-async function findEntrypoints(config) {
-  const relativePaths = await glob("**/*", {
-    cwd: config.entrypointsDir
-  });
-  relativePaths.sort();
-  const pathGlobs = Object.keys(PATH_GLOB_TO_TYPE_MAP);
-  const existingNames = {};
-  const entrypoints = [];
-  await Promise.all(
-    relativePaths.map(async (relativePath) => {
-      const path5 = resolve8(config.entrypointsDir, relativePath);
-      const matchingGlob = pathGlobs.find(
-        (glob3) => picomatch.isMatch(relativePath, glob3)
-      );
+import fs5 from "fs-extra";
+import { dirname as dirname4, resolve as resolve8 } from "path";
+async function buildEntrypoints(groups, config) {
+  const steps = [];
+  for (const group of groups) {
+    const step = Array.isArray(group) ? await buildMultipleEntrypoints(group, config) : await buildSingleEntrypoint(group, config);
+    steps.push(step);
+  }
+  const publicAssets = await copyPublicDirectory(config);
+  await removeEmptyDirs(config.outDir);
+  return { publicAssets, steps };
+}
+async function buildSingleEntrypoint(entrypoint, config) {
+  const isVirtual = ["background", "content-script"].includes(entrypoint.type);
+  const entry = isVirtual ? `virtual:wxt-${entrypoint.type}?${entrypoint.inputPath}` : entrypoint.inputPath;
+  const libMode = {
+    build: {
+      lib: {
+        entry,
+        formats: ["iife"],
+        name: entrypoint.name,
+        fileName: entrypoint.name
+      },
+      rollupOptions: {
+        output: {
+          // There's only a single output for this build, so we use the desired bundle path for the
+          // entry output (like "content-scripts/overlay.js")
+          entryFileNames: getEntrypointBundlePath(
+            entrypoint,
+            config.outDir,
+            ".js"
+          ),
+          // Output content script CSS to assets/ with a hash to prevent conflicts. Defaults to
+          // "[name].[ext]" in lib mode, which usually results in "style.css". That means multiple
+          // content scripts with styles would overwrite each other if it weren't changed below.
+          assetFileNames: `assets/${entrypoint.name}.[ext]`
+        }
+      }
+    }
+  };
+  const entryConfig = vite3.mergeConfig(
+    libMode,
+    config.vite
+  );
+  const result = await vite3.build(entryConfig);
+  return {
+    entrypoints: entrypoint,
+    chunks: getBuildOutputChunks(result)
+  };
+}
+async function buildMultipleEntrypoints(entrypoints, config) {
+  const multiPage = {
+    plugins: [multipageMove(entrypoints, config)],
+    build: {
+      rollupOptions: {
+        input: entrypoints.reduce((input, entry) => {
+          input[entry.name] = entry.inputPath;
+          return input;
+        }, {}),
+        output: {
+          // Include a hash to prevent conflicts
+          chunkFileNames: "chunks/[name]-[hash].js",
+          // Include a hash to prevent conflicts
+          entryFileNames: "chunks/[name]-[hash].js",
+          // We can't control the "name", so we need a hash to prevent conflicts
+          assetFileNames: "assets/[name]-[hash].[ext]"
+        }
+      }
+    }
+  };
+  const entryConfig = vite3.mergeConfig(
+    multiPage,
+    config.vite
+  );
+  const result = await vite3.build(entryConfig);
+  return {
+    entrypoints,
+    chunks: getBuildOutputChunks(result)
+  };
+}
+function getBuildOutputChunks(result) {
+  if ("on" in result)
+    throw Error("wxt does not support vite watch mode.");
+  if (Array.isArray(result))
+    return result.flatMap(({ output }) => output);
+  return result.output;
+}
+async function copyPublicDirectory(config) {
+  const publicAssets = [];
+  if (!await fs5.exists(config.publicDir))
+    return publicAssets;
+  const files = await glob("**/*", { cwd: config.publicDir });
+  for (const file of files) {
+    const srcPath = resolve8(config.publicDir, file);
+    const outPath = resolve8(config.outDir, file);
+    await fs5.ensureDir(dirname4(outPath));
+    await fs5.copyFile(srcPath, outPath);
+    publicAssets.push({
+      type: "asset",
+      fileName: file,
+      name: file,
+      needsCodeReference: false,
+      source: await fs5.readFile(srcPath)
+    });
+  }
+  return publicAssets;
+}
+
+// src/core/build/findEntrypoints.ts
+import { relative as relative3, resolve as resolve9 } from "path";
+import fs6 from "fs-extra";
+import picomatch from "picomatch";
+import { parseHTML as parseHTML2 } from "linkedom";
+import JSON5 from "json5";
+import glob2 from "fast-glob";
+async function findEntrypoints(config) {
+  const relativePaths = await glob2("**/*", {
+    cwd: config.entrypointsDir
+  });
+  relativePaths.sort();
+  const pathGlobs = Object.keys(PATH_GLOB_TO_TYPE_MAP);
+  const existingNames = {};
+  const entrypoints = [];
+  await Promise.all(
+    relativePaths.map(async (relativePath) => {
+      const path5 = resolve9(config.entrypointsDir, relativePath);
+      const matchingGlob = pathGlobs.find(
+        (glob3) => picomatch.isMatch(relativePath, glob3)
+      );
       if (matchingGlob == null) {
         return config.logger.warn(
           `${relativePath} does not match any known entrypoint. Known entrypoints:
@@ -499,7 +778,7 @@ ${JSON.stringify(
 }
 async function getPopupEntrypoint(config, path5) {
   const options = {};
-  const content = await fs4.readFile(path5, "utf-8");
+  const content = await fs6.readFile(path5, "utf-8");
   const { document } = parseHTML2(content);
   const title = document.querySelector("title");
   if (title != null)
@@ -529,7 +808,7 @@ async function getPopupEntrypoint(config, path5) {
 }
 async function getOptionsEntrypoint(config, path5) {
   const options = {};
-  const content = await fs4.readFile(path5, "utf-8");
+  const content = await fs6.readFile(path5, "utf-8");
   const { document } = parseHTML2(content);
   const openInTabContent = document.querySelector("meta[name='manifest.open_in_tab']")?.getAttribute("content");
   if (openInTabContent) {
@@ -576,7 +855,7 @@ async function getContentScriptEntrypoint(config, name, path5) {
     type: "content-script",
     name: getEntrypointName(config.entrypointsDir, path5),
     inputPath: path5,
-    outputDir: resolve8(config.outDir, "content-scripts"),
+    outputDir: resolve9(config.outDir, "content-scripts"),
     options
   };
 }
@@ -611,160 +890,112 @@ var PATH_GLOB_TO_TYPE_MAP = {
   "*/*": "ignored"
 };
 
-// src/core/build/buildEntrypoints.ts
-import * as vite2 from "vite";
-
-// src/core/utils/groupEntrypoints.ts
-function groupEntrypoints(entrypoints) {
-  const groupIndexMap = {};
-  const groups = [];
-  for (const entry of entrypoints) {
-    const group = ENTRY_TYPE_TO_GROUP_MAP[entry.type];
-    if (group === "no-group") {
-      groups.push(entry);
-    } else {
-      let groupIndex = groupIndexMap[group];
-      if (groupIndex == null) {
-        groupIndex = groups.push([]) - 1;
-        groupIndexMap[group] = groupIndex;
-      }
-      groups[groupIndex].push(entry);
-    }
-  }
-  return groups;
-}
-var ENTRY_TYPE_TO_GROUP_MAP = {
-  sandbox: "sandbox-page",
-  popup: "extension-page",
-  newtab: "extension-page",
-  history: "extension-page",
-  options: "extension-page",
-  devtools: "extension-page",
-  bookmarks: "extension-page",
-  sidepanel: "extension-page",
-  "unlisted-page": "extension-page",
-  background: "no-group",
-  "content-script": "no-group",
-  "unlisted-script": "no-group"
-};
-
-// src/core/utils/removeEmptyDirs.ts
-import fs5 from "fs-extra";
-import path3 from "path";
-async function removeEmptyDirs(dir) {
-  const files = await fs5.readdir(dir);
-  for (const file of files) {
-    const filePath = path3.join(dir, file);
-    const stats = await fs5.stat(filePath);
-    if (stats.isDirectory()) {
-      await removeEmptyDirs(filePath);
-    }
-  }
-  try {
-    await fs5.rmdir(dir);
-  } catch {
-  }
+// src/core/build/generateTypesDir.ts
+import { createUnimport as createUnimport2 } from "unimport";
+import fs7 from "fs-extra";
+import { relative as relative4, resolve as resolve10 } from "path";
+async function generateTypesDir(entrypoints, config) {
+  await fs7.ensureDir(config.typesDir);
+  const references = [];
+  references.push(await writeImportsDeclarationFile(config));
+  references.push(await writePathsDeclarationFile(entrypoints, config));
+  references.push(await writeGlobalsDeclarationFile(config));
+  const mainReference = await writeMainDeclarationFile(references, config);
+  await writeTsConfigFile(mainReference, config);
 }
-
-// src/core/build/buildEntrypoints.ts
-import glob2 from "fast-glob";
-import fs6 from "fs-extra";
-import { dirname as dirname4, resolve as resolve9 } from "path";
-async function buildEntrypoints(entrypoints, config) {
-  const groups = groupEntrypoints(entrypoints);
-  const outputs = [];
-  for (const group of groups) {
-    const output = Array.isArray(group) ? await buildMultipleEntrypoints(group, config) : await buildSingleEntrypoint(group, config);
-    outputs.push(output);
-  }
-  const publicOutput = await copyPublicDirectory(config);
-  outputs.push(publicOutput);
-  await removeEmptyDirs(config.outDir);
-  return outputs.flat();
+async function writeImportsDeclarationFile(config) {
+  const filePath = resolve10(config.typesDir, "imports.d.ts");
+  const unimport2 = createUnimport2(getUnimportOptions(config));
+  await unimport2.scanImportsFromDir(void 0, { cwd: config.srcDir });
+  await fs7.writeFile(
+    filePath,
+    ["// Generated by wxt", await unimport2.generateTypeDeclarations()].join(
+      "\n"
+    ) + "\n"
+  );
+  return filePath;
 }
-async function buildSingleEntrypoint(entrypoint, config) {
-  const isVirtual = ["background", "content-script"].includes(entrypoint.type);
-  const entry = isVirtual ? `virtual:wxt-${entrypoint.type}?${entrypoint.inputPath}` : entrypoint.inputPath;
-  const libMode = {
-    build: {
-      lib: {
-        entry,
-        formats: ["iife"],
-        name: entrypoint.name,
-        fileName: entrypoint.name
-      },
-      rollupOptions: {
-        output: {
-          entryFileNames: getEntrypointBundlePath(
-            entrypoint,
-            config.outDir,
-            ".js"
-          ),
-          // Output content script CSS to assets/ with a hash to prevent conflicts. Defaults to
-          // "[name].[ext]" in lib mode, which usually results in "style.css". That means multiple
-          // content scripts with styles would overwrite each other if it weren't changed below.
-          assetFileNames: `assets/${entrypoint.name}-[hash].[ext]`
-        }
-      }
-    }
-  };
-  const entryConfig = vite2.mergeConfig(
-    libMode,
-    config.vite
+async function writePathsDeclarationFile(entrypoints, config) {
+  const filePath = resolve10(config.typesDir, "paths.d.ts");
+  await fs7.writeFile(
+    filePath,
+    [
+      "// Generated by wxt",
+      "type EntrypointPath =",
+      ...entrypoints.map((entry) => {
+        const path5 = getEntrypointBundlePath(
+          entry,
+          config.outDir,
+          entry.inputPath.endsWith(".html") ? ".html" : ".js"
+        );
+        return `  | "/${path5}"`;
+      }).sort()
+    ].join("\n") + "\n"
   );
-  const result = await vite2.build(entryConfig);
-  return getBuildOutput(result);
+  return filePath;
 }
-async function buildMultipleEntrypoints(entrypoints, config) {
-  const multiPage = {
-    plugins: [multipageMove(entrypoints, config)],
-    build: {
-      rollupOptions: {
-        input: entrypoints.reduce((input, entry) => {
-          input[entry.name] = entry.inputPath;
-          return input;
-        }, {})
-      }
-    }
-  };
-  const entryConfig = vite2.mergeConfig(
-    multiPage,
-    config.vite
+async function writeGlobalsDeclarationFile(config) {
+  const filePath = resolve10(config.typesDir, "globals.d.ts");
+  const globals = getGlobals(config);
+  await fs7.writeFile(
+    filePath,
+    [
+      "// Generated by wxt",
+      "export {}",
+      "declare global {",
+      ...globals.map((global) => `  const ${global.name}: ${global.type};`),
+      "}"
+    ].join("\n") + "\n",
+    "utf-8"
   );
-  const result = await vite2.build(entryConfig);
-  return getBuildOutput(result);
+  return filePath;
 }
-function getBuildOutput(result) {
-  if ("on" in result)
-    throw Error("wxt does not support vite watch mode.");
-  if (Array.isArray(result))
-    return result.flatMap(({ output }) => output);
-  return result.output;
+async function writeMainDeclarationFile(references, config) {
+  const dir = config.wxtDir;
+  const filePath = resolve10(dir, "wxt.d.ts");
+  await fs7.writeFile(
+    filePath,
+    [
+      "// Generated by wxt",
+      ...references.map(
+        (ref) => `/// <reference types="./${relative4(dir, ref)}" />`
+      )
+    ].join("\n") + "\n"
+  );
+  return filePath;
 }
-async function copyPublicDirectory(config) {
-  if (!await fs6.exists(config.publicDir))
-    return [];
-  const files = await glob2("**/*", { cwd: config.publicDir });
-  const outputs = [];
-  for (const file of files) {
-    const srcPath = resolve9(config.publicDir, file);
-    const outPath = resolve9(config.outDir, file);
-    await fs6.ensureDir(dirname4(outPath));
-    await fs6.copyFile(srcPath, outPath);
-    outputs.push({
-      type: "asset",
-      fileName: file,
-      name: file,
-      needsCodeReference: false,
-      source: await fs6.readFile(srcPath)
-    });
-  }
-  return outputs;
+async function writeTsConfigFile(mainReference, config) {
+  const dir = config.wxtDir;
+  await fs7.writeFile(
+    resolve10(dir, "tsconfig.json"),
+    `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+
+    /* Type Checking */
+    "strict": true,
+
+    /* Completeness */
+    "skipLibCheck": true
+  },
+  "include": [
+    "${relative4(dir, config.root)}/**/*",
+    "./${relative4(dir, mainReference)}"
+  ],
+  "exclude": ["${relative4(dir, config.outBaseDir)}"]
+}`
+  );
 }
 
 // src/core/utils/manifest.ts
-import fs7 from "fs-extra";
-import { resolve as resolve10 } from "path";
+import fs8 from "fs-extra";
+import { resolve as resolve11 } from "path";
 
 // src/core/utils/ContentSecurityPolicy.ts
 var ContentSecurityPolicy = class _ContentSecurityPolicy {
@@ -812,9 +1043,9 @@ var ContentSecurityPolicy = class _ContentSecurityPolicy {
 // src/core/utils/manifest.ts
 async function writeManifest(manifest, output, config) {
   const str = config.mode === "production" ? JSON.stringify(manifest) : JSON.stringify(manifest, null, 2);
-  await fs7.ensureDir(config.outDir);
-  await fs7.writeFile(resolve10(config.outDir, "manifest.json"), str, "utf-8");
-  output.unshift({
+  await fs8.ensureDir(config.outDir);
+  await fs8.writeFile(resolve11(config.outDir, "manifest.json"), str, "utf-8");
+  output.publicAssets.unshift({
     type: "asset",
     fileName: "manifest.json",
     name: "manifest",
@@ -841,10 +1072,12 @@ async function generateMainfest(entrypoints, buildOutput, config) {
   addEntrypoints(manifest, entrypoints, buildOutput, config);
   if (config.command === "serve")
     addDevModeCsp(manifest, config);
+  if (config.command === "serve")
+    addDevModePermissions(manifest, config);
   return manifest;
 }
 async function getPackageJson(config) {
-  return await fs7.readJson(resolve10(config.root, "package.json"));
+  return await fs8.readJson(resolve11(config.root, "package.json"));
 }
 function simplifyVersion(versionName) {
   const version3 = /^((0|[1-9][0-9]{0,8})([.](0|[1-9][0-9]{0,8})){0,3}).*$/.exec(
@@ -997,23 +1230,23 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
     }
   }
   if (contentScripts?.length) {
-    if (config.command === "serve") {
-      const permissionsKey = config.manifestVersion === 2 ? "permissions" : "host_permissions";
-      const hostPermissions = new Set(manifest[permissionsKey] ?? []);
+    if (config.command === "serve" && config.manifestVersion === 3) {
+      const hostPermissions = new Set(manifest.host_permissions ?? []);
       contentScripts.forEach((script) => {
         script.options.matches.forEach((matchPattern) => {
           hostPermissions.add(matchPattern);
         });
       });
-      manifest[permissionsKey] = Array.from(hostPermissions).sort();
+      hostPermissions.forEach(
+        (permission) => addHostPermission(manifest, permission)
+      );
     } else {
       const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
         const hash = JSON.stringify(script.options);
-        if (!map.has(hash)) {
-          map.set(hash, [script]);
-        } else {
+        if (map.has(hash))
           map.get(hash)?.push(script);
-        }
+        else
+          map.set(hash, [script]);
         return map;
       }, /* @__PURE__ */ new Map());
       manifest.content_scripts = Array.from(hashToEntrypointsMap.entries()).map(
@@ -1034,13 +1267,9 @@ function addDevModeCsp(manifest, config) {
   const permission = `http://${config.server?.hostname ?? ""}/*`;
   const allowedCsp = config.server?.origin ?? "http://localhost:*";
   if (manifest.manifest_version === 3) {
-    manifest.host_permissions ??= [];
-    if (!manifest.host_permissions.includes(permission))
-      manifest.host_permissions.push(permission);
+    addHostPermission(manifest, permission);
   } else {
-    manifest.permissions ??= [];
-    if (!manifest.permissions.includes(permission))
-      manifest.permissions.push(permission);
+    addPermission(manifest, permission);
   }
   const csp = new ContentSecurityPolicy(
     manifest.manifest_version === 3 ? (
@@ -1058,12 +1287,17 @@ function addDevModeCsp(manifest, config) {
     manifest.content_security_policy = csp.toString();
   }
 }
+function addDevModePermissions(manifest, config) {
+  addPermission(manifest, "tabs");
+  if (config.manifestVersion === 3)
+    addPermission(manifest, "scripting");
+}
 function getContentScriptCssFiles(contentScripts, buildOutput) {
   const css = [];
+  const allChunks = buildOutput.steps.flatMap((step) => step.chunks);
   contentScripts.forEach((script) => {
-    const cssRegex = new RegExp(`^assets/${script.name}-[a-f0-9]{8}.css$`);
-    const relatedCss = buildOutput.find(
-      (chunk) => chunk.fileName.match(cssRegex)
+    const relatedCss = allChunks.find(
+      (chunk) => chunk.fileName === `assets/${script.name}.css`
     );
     if (relatedCss)
       css.push(relatedCss.fileName);
@@ -1072,9 +1306,71 @@ function getContentScriptCssFiles(contentScripts, buildOutput) {
     return css;
   return void 0;
 }
+function addPermission(manifest, permission) {
+  manifest.permissions ??= [];
+  if (manifest.permissions.includes(permission))
+    return;
+  manifest.permissions.push(permission);
+}
+function addHostPermission(manifest, hostPermission) {
+  manifest.host_permissions ??= [];
+  if (manifest.host_permissions.includes(hostPermission))
+    return;
+  manifest.host_permissions.push(hostPermission);
+}
+
+// src/core/build.ts
+import pc2 from "picocolors";
+import * as vite4 from "vite";
+import fs10 from "fs-extra";
+
+// src/core/utils/groupEntrypoints.ts
+function groupEntrypoints(entrypoints) {
+  const groupIndexMap = {};
+  const groups = [];
+  for (const entry of entrypoints) {
+    const group = ENTRY_TYPE_TO_GROUP_MAP[entry.type];
+    if (group === "no-group") {
+      groups.push(entry);
+    } else {
+      let groupIndex = groupIndexMap[group];
+      if (groupIndex == null) {
+        groupIndex = groups.push([]) - 1;
+        groupIndexMap[group] = groupIndex;
+      }
+      groups[groupIndex].push(entry);
+    }
+  }
+  return groups;
+}
+var ENTRY_TYPE_TO_GROUP_MAP = {
+  sandbox: "sandbox-page",
+  popup: "extension-page",
+  newtab: "extension-page",
+  history: "extension-page",
+  options: "extension-page",
+  devtools: "extension-page",
+  bookmarks: "extension-page",
+  sidepanel: "extension-page",
+  "unlisted-page": "extension-page",
+  background: "no-group",
+  "content-script": "no-group",
+  "unlisted-script": "no-group"
+};
+
+// src/core/utils/formatDuration.ts
+function formatDuration(duration) {
+  if (duration < 1e3)
+    return `${duration} ms`;
+  if (duration < 1e4)
+    return `${(duration / 1e3).toFixed(3)} s`;
+  if (duration < 6e4)
+    return `${(duration / 1e3).toFixed(1)} s`;
+  return `${(duration / 1e3).toFixed(0)} s`;
+}
 
 // src/core/log/printBuildSummary.ts
-import path4, { extname as extname2, relative as relative4, resolve as resolve11 } from "path";
+import path4, { extname as extname2, relative as relative5, resolve as resolve12 } from "path";
 
 // src/core/log/printTable.ts
 function printTable(log, rows, gap = 2) {
@@ -1104,10 +1400,13 @@ function printTable(log, rows, gap = 2) {
 
 // src/core/log/printBuildSummary.ts
 import pc from "picocolors";
-import fs8 from "fs-extra";
+import fs9 from "fs-extra";
 import { filesize } from "filesize";
 async function printBuildSummary(output, config) {
-  const chunks = output.sort((l, r) => {
+  const chunks = [
+    ...output.steps.flatMap((step) => step.chunks),
+    ...output.publicAssets
+  ].sort((l, r) => {
     const lWeight = CHUNK_SORT_WEIGHTS[l.fileName] ?? CHUNK_SORT_WEIGHTS[extname2(l.fileName)] ?? DEFAULT_SORT_WEIGHT;
     const rWeight = CHUNK_SORT_WEIGHTS[r.fileName] ?? CHUNK_SORT_WEIGHTS[extname2(r.fileName)] ?? DEFAULT_SORT_WEIGHT;
     const diff = lWeight - rWeight;
@@ -1119,13 +1418,13 @@ async function printBuildSummary(output, config) {
   const chunkRows = await Promise.all(
     chunks.map(async (chunk, i) => {
       const file = [
-        relative4(process.cwd(), config.outDir) + path4.sep,
+        relative5(process.cwd(), config.outDir) + path4.sep,
         chunk.fileName
       ];
       const ext = extname2(chunk.fileName);
       const prefix = i === chunks.length - 1 ? "  \u2514\u2500" : "  \u251C\u2500";
       const color = CHUNK_COLORS[ext] ?? DEFAULT_COLOR;
-      const stats = await fs8.lstat(resolve11(config.outDir, chunk.fileName));
+      const stats = await fs9.lstat(resolve12(config.outDir, chunk.fileName));
       totalSize += stats.size;
       const size = String(filesize(stats.size));
       return [
@@ -1153,115 +1452,63 @@ var CHUNK_COLORS = {
   ".js": pc.cyan
 };
 
-// src/index.ts
-import fs10 from "fs-extra";
-
-// src/core/build/generateTypesDir.ts
-import { createUnimport as createUnimport2 } from "unimport";
-import fs9 from "fs-extra";
-import { relative as relative5, resolve as resolve12 } from "path";
-async function generateTypesDir(entrypoints, config) {
-  await fs9.ensureDir(config.typesDir);
-  const references = [];
-  references.push(await writeImportsDeclarationFile(config));
-  references.push(await writePathsDeclarationFile(entrypoints, config));
-  references.push(await writeGlobalsDeclarationFile(config));
-  const mainReference = await writeMainDeclarationFile(references, config);
-  await writeTsConfigFile(mainReference, config);
-}
-async function writeImportsDeclarationFile(config) {
-  const filePath = resolve12(config.typesDir, "imports.d.ts");
-  const unimport2 = createUnimport2(getUnimportOptions(config));
-  await unimport2.scanImportsFromDir(void 0, { cwd: config.srcDir });
-  await fs9.writeFile(
-    filePath,
-    ["// Generated by wxt", await unimport2.generateTypeDeclarations()].join(
-      "\n"
-    ) + "\n"
-  );
-  return filePath;
-}
-async function writePathsDeclarationFile(entrypoints, config) {
-  const filePath = resolve12(config.typesDir, "paths.d.ts");
-  await fs9.writeFile(
-    filePath,
-    [
-      "// Generated by wxt",
-      "type EntrypointPath =",
-      ...entrypoints.map((entry) => {
-        const path5 = getEntrypointBundlePath(
-          entry,
-          config.outDir,
-          entry.inputPath.endsWith(".html") ? ".html" : ".js"
-        );
-        return `  | "/${path5}"`;
-      }).sort()
-    ].join("\n") + "\n"
-  );
-  return filePath;
-}
-async function writeGlobalsDeclarationFile(config) {
-  const filePath = resolve12(config.typesDir, "globals.d.ts");
-  const globals = getGlobals(config);
-  await fs9.writeFile(
-    filePath,
-    [
-      "// Generated by wxt",
-      "export {}",
-      "declare global {",
-      ...globals.map((global) => `  const ${global.name}: ${global.type};`),
-      "}"
-    ].join("\n") + "\n",
-    "utf-8"
+// src/core/build.ts
+async function buildInternal(config) {
+  const verb = config.command === "serve" ? "Pre-rendering" : "Building";
+  const target = `${config.browser}-mv${config.manifestVersion}`;
+  config.logger.info(
+    `${verb} ${pc2.cyan(target)} for ${pc2.cyan(config.mode)} with ${pc2.green(
+      `Vite ${vite4.version}`
+    )}`
   );
-  return filePath;
-}
-async function writeMainDeclarationFile(references, config) {
-  const dir = config.wxtDir;
-  const filePath = resolve12(dir, "wxt.d.ts");
-  await fs9.writeFile(
-    filePath,
-    [
-      "// Generated by wxt",
-      ...references.map(
-        (ref) => `/// <reference types="./${relative5(dir, ref)}" />`
-      )
-    ].join("\n") + "\n"
+  const startTime = Date.now();
+  await fs10.rm(config.outDir, { recursive: true, force: true });
+  await fs10.ensureDir(config.outDir);
+  const entrypoints = await findEntrypoints(config);
+  const groups = groupEntrypoints(entrypoints);
+  const { output } = await rebuild(config, groups);
+  config.logger.success(
+    `Built extension in ${formatDuration(Date.now() - startTime)}`
   );
-  return filePath;
+  await printBuildSummary(output, config);
+  return output;
 }
-async function writeTsConfigFile(mainReference, config) {
-  const dir = config.wxtDir;
-  await fs9.writeFile(
-    resolve12(dir, "tsconfig.json"),
-    `{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "noEmit": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-
-    /* Type Checking */
-    "strict": true,
-
-    /* Completeness */
-    "skipLibCheck": true
-  },
-  "include": [
-    "${relative5(dir, config.root)}/**/*",
-    "./${relative5(dir, mainReference)}"
-  ],
-  "exclude": ["${relative5(dir, config.outBaseDir)}"]
-}`
+async function rebuild(config, entrypointGroups, existingOutput = {
+  steps: [],
+  publicAssets: []
+}) {
+  const allEntrypoints = await findEntrypoints(config);
+  await generateTypesDir(allEntrypoints, config);
+  const newOutput = await buildEntrypoints(entrypointGroups, config);
+  const mergedOutput = {
+    steps: [...existingOutput.steps, ...newOutput.steps],
+    publicAssets: [...existingOutput.publicAssets, ...newOutput.publicAssets]
+  };
+  const newManifest = await generateMainfest(
+    allEntrypoints,
+    mergedOutput,
+    config
   );
+  const finalOutput = {
+    manifest: newManifest,
+    ...newOutput
+  };
+  await writeManifest(newManifest, finalOutput, config);
+  return {
+    output: {
+      manifest: newManifest,
+      steps: [...existingOutput.steps, ...finalOutput.steps],
+      publicAssets: [
+        ...existingOutput.publicAssets,
+        ...finalOutput.publicAssets
+      ]
+    },
+    manifest: newManifest
+  };
 }
 
-// src/index.ts
-import pc2 from "picocolors";
-import * as vite3 from "vite";
+// src/core/server.ts
+import * as vite5 from "vite";
 
 // src/core/utils/findOpenPort.ts
 import net from "node:net";
@@ -1286,17 +1533,6 @@ function findOpenPortRecursive(port, startPort, endPort) {
   });
 }
 
-// src/core/utils/formatDuration.ts
-function formatDuration(duration) {
-  if (duration < 1e3)
-    return `${duration} ms`;
-  if (duration < 1e4)
-    return `${(duration / 1e3).toFixed(3)} s`;
-  if (duration < 6e4)
-    return `${(duration / 1e3).toFixed(1)} s`;
-  return `${(duration / 1e3).toFixed(0)} s`;
-}
-
 // src/core/runners/createWebExtRunner.ts
 function createWebExtRunner() {
   let runner;
@@ -1354,8 +1590,93 @@ function createWebExtRunner() {
 var WARN_LOG_LEVEL = 40;
 var ERROR_LOG_LEVEL = 50;
 
+// src/core/server.ts
+async function getServerInfo() {
+  const port = await findOpenPort(3e3, 3010);
+  const hostname = "localhost";
+  const origin = `http://${hostname}:${port}`;
+  const serverConfig = {
+    server: {
+      origin
+    }
+  };
+  return {
+    port,
+    hostname,
+    origin,
+    viteServerConfig: serverConfig
+  };
+}
+async function setupServer(serverInfo, config) {
+  const runner = createWebExtRunner();
+  const viteServer = await vite5.createServer(
+    vite5.mergeConfig(serverInfo, config.vite)
+  );
+  const start = async () => {
+    await viteServer.listen(server.port);
+    config.logger.success(`Started dev server @ ${serverInfo.origin}`);
+    server.currentOutput = await buildInternal(config);
+    config.logger.info("Opening browser...");
+    await runner.openBrowser(config);
+    config.logger.success("Opened!");
+  };
+  const reloadExtension = () => {
+    viteServer.ws.send("wxt:reload-extension");
+  };
+  const reloadPage = (path5) => {
+    viteServer.ws.send("wxt:reload-page", path5);
+  };
+  const reloadContentScript = (contentScript) => {
+    viteServer.ws.send("wxt:reload-content-script", contentScript);
+  };
+  const server = {
+    ...viteServer,
+    start,
+    currentOutput: {
+      manifest: {
+        manifest_version: 3,
+        name: "",
+        version: ""
+      },
+      publicAssets: [],
+      steps: []
+    },
+    port: serverInfo.port,
+    hostname: serverInfo.hostname,
+    origin: serverInfo.origin,
+    reloadExtension,
+    reloadPage,
+    reloadContentScript
+  };
+  return server;
+}
+function reloadContentScripts(steps, config, server) {
+  if (config.manifestVersion === 3) {
+    steps.forEach((step) => {
+      const entry = step.entrypoints;
+      if (Array.isArray(entry) || entry.type !== "content-script")
+        return;
+      const js = [getEntrypointBundlePath(entry, config.outDir, ".js")];
+      const css = getContentScriptCssFiles([entry], server.currentOutput);
+      server.reloadContentScript({
+        js,
+        css,
+        ...entry.options
+      });
+    });
+  } else {
+    server.reloadExtension();
+  }
+}
+function reloadHtmlPages(groups, server, config) {
+  groups.flat().forEach((entry) => {
+    const path5 = getEntrypointBundlePath(entry, config.outDir, ".html");
+    server.reloadPage(path5);
+  });
+}
+
 // package.json
-var version = "0.0.1";
+var version2 = "0.1.0";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {
@@ -1373,69 +1694,69 @@ async function build2(config) {
   return await buildInternal(internalConfig);
 }
 async function createServer2(config) {
-  const port = await findOpenPort(3e3, 3010);
-  const hostname = "localhost";
-  const origin = `http://${hostname}:${port}`;
-  const serverConfig = {
-    server: {
-      origin
-    }
-  };
-  const internalConfig = await getInternalConfig(
-    vite3.mergeConfig(serverConfig, config ?? {}),
-    "serve"
-  );
-  const runner = createWebExtRunner();
-  const viteServer = await vite3.createServer(internalConfig.vite);
-  const server = {
-    ...viteServer,
-    async listen(port2, isRestart) {
-      const res = await viteServer.listen(port2, isRestart);
-      if (!isRestart) {
-        internalConfig.logger.success(`Started dev server @ ${origin}`);
-        internalConfig.logger.info("Opening browser...");
-        await runner.openBrowser(internalConfig);
-        internalConfig.logger.success("Opened!");
-      }
-      return res;
-    },
-    logger: internalConfig.logger,
-    port,
-    hostname,
-    origin
+  const serverInfo = await getServerInfo();
+  const getLatestInternalConfig = () => {
+    const viteConfig = vite6.mergeConfig(
+      serverInfo.viteServerConfig,
+      config?.vite ?? {}
+    );
+    return getInternalConfig({ ...config, vite: viteConfig }, "serve");
   };
-  internalConfig.logger.info("Created dev server");
+  let internalConfig = await getLatestInternalConfig();
+  const server = await setupServer(serverInfo, internalConfig);
   internalConfig.server = server;
-  await buildInternal(internalConfig);
+  const fileChangedMutex = new Mutex();
+  const changeQueue = [];
+  server.ws.on("wxt:background-initialized", () => {
+    reloadContentScripts(server.currentOutput.steps, internalConfig, server);
+  });
+  server.watcher.on("all", async (event, path5, _stats) => {
+    if (path5.startsWith(internalConfig.outBaseDir))
+      return;
+    changeQueue.push([event, path5]);
+    await fileChangedMutex.runExclusive(async () => {
+      const fileChanges = changeQueue.splice(0, changeQueue.length);
+      const changes = detectDevChanges(fileChanges, server.currentOutput);
+      if (changes.type === "no-change")
+        return;
+      consola3.info(
+        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1]))).map((file) => pc3.dim(relative6(internalConfig.root, file))).join(", ")}`
+      );
+      const rebuiltNames = changes.rebuildGroups.flat().map((entry) => {
+        return pc3.cyan(
+          relative6(internalConfig.outDir, getEntrypointOutputFile(entry, ""))
+        );
+      }).join(pc3.dim(", "));
+      internalConfig = await getLatestInternalConfig();
+      internalConfig.server = server;
+      const { output: newOutput } = await rebuild(
+        internalConfig,
+        // TODO: this excludes new entrypoints, so they're not built until the dev command is restarted
+        changes.rebuildGroups,
+        changes.cachedOutput
+      );
+      server.currentOutput = newOutput;
+      switch (changes.type) {
+        case "extension-reload":
+          server.reloadExtension();
+          break;
+        case "html-reload":
+          reloadHtmlPages(changes.rebuildGroups, server, internalConfig);
+          break;
+        case "content-script-reload":
+          reloadContentScripts(changes.changedSteps, internalConfig, server);
+          break;
+      }
+      consola3.success(`Reloaded: ${rebuiltNames}`);
+    });
+  });
   return server;
 }
-async function buildInternal(config) {
-  const verb = config.command === "serve" ? "Pre-rendering" : "Building";
-  const target = `${config.browser}-mv${config.manifestVersion}`;
-  config.logger.info(
-    `${verb} ${pc2.cyan(target)} for ${pc2.cyan(config.mode)} with ${pc2.green(
-      `Vite ${vite3.version}`
-    )}`
-  );
-  const startTime = Date.now();
-  await fs10.rm(config.outDir, { recursive: true, force: true });
-  await fs10.ensureDir(config.outDir);
-  const entrypoints = await findEntrypoints(config);
-  await generateTypesDir(entrypoints, config);
-  const output = await buildEntrypoints(entrypoints, config);
-  const manifest = await generateMainfest(entrypoints, output, config);
-  await writeManifest(manifest, output, config);
-  config.logger.success(
-    `Built extension in ${formatDuration(Date.now() - startTime)}`
-  );
-  await printBuildSummary(output, config);
-  return output;
-}
 export {
   build2 as build,
   createServer2 as createServer,
   defineConfig,
   defineRunnerConfig,
-  version
+  version2 as version
 };
 //# sourceMappingURL=index.js.map