chore(release): v0.16.8

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.16.8
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.7...v0.16.8)
+
+### 🩹 Fixes
+
+- Watch files outside project root during development ([#454](https://github.com/wxt-dev/wxt/pull/454))
+
+### 📖 Documentation
+
+- Add loading and error states for "Who's using WXT" section ([447a48f](https://github.com/wxt-dev/wxt/commit/447a48f))
+
 ## v0.16.7
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.6...v0.16.7)

docs/.vitepress/components/UsingWxtSection.vue

@@ -20,11 +20,12 @@ const chromeExtensionIds = [
   'agjnjboanicjcpenljmaaigopkgdnihi', // PreMiD
 ];
 
-const { data } = useListExtensionDetails(chromeExtensionIds);
+const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);
 const sortedExtensions = computed(() => {
   if (!data.value?.length) return [];
 
   return [...data.value]
+    .filter((item) => item != null)
     .map((item) => ({
       ...item,
       // Sort based on the user count weighted by the rating
@@ -49,7 +50,16 @@ function getStoreUrl(extension: ChromeExtension) {
         Battle tested and ready for production. Explore chrome extensions made
         with WXT.
       </p>
-      <ul>
+      <p v-if="isLoading" style="text-align: center; opacity: 50%">
+        Loading...
+      </p>
+      <p
+        v-else-if="err || sortedExtensions.length === 0"
+        style="text-align: center; opacity: 50%"
+      >
+        Failed to load extension details.
+      </p>
+      <ul v-else>
         <li
           v-for="extension of sortedExtensions"
           :key="extension.id"

docs/.vitepress/composables/useListExtensionDetails.ts

@@ -26,6 +26,7 @@ const query = `query ${operationName}($ids:[String!]!) {
 export default function (ids: string[]) {
   const data = ref<ChromeExtension[]>();
   const err = ref<unknown>();
+  const isLoading = ref(true);
 
   fetch('https://queue.wxt.dev/api', {
     method: 'POST',
@@ -36,6 +37,7 @@ export default function (ids: string[]) {
     }),
   })
     .then(async (res) => {
+      isLoading.value = false;
       const {
         data: { chromeExtensions },
       } = await res.json();
@@ -43,6 +45,7 @@ export default function (ids: string[]) {
       err.value = undefined;
     })
     .catch((error) => {
+      isLoading.value = false;
       console.error(error);
       data.value = undefined;
       err.value = error;
@@ -51,5 +54,6 @@ export default function (ids: string[]) {
   return {
     data,
     err,
+    isLoading,
   };
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.16.7",
+  "version": "0.16.8",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",

src/core/create-server.ts

@@ -25,6 +25,7 @@ import { Mutex } from 'async-mutex';
 import pc from 'picocolors';
 import { relative } from 'node:path';
 import { registerWxt, wxt } from './wxt';
+import { unnormalizePath } from './utils/paths';
 
 /**
  * Creates a dev server and pre-builds all the files that need to exist before loading the extension.
@@ -51,6 +52,14 @@ export async function createServer(
     // Build after starting the dev server so it can be used to transform HTML files
     server.currentOutput = await internalBuild();
 
+    // Add file watchers for files not loaded by the dev server. See
+    // https://github.com/wxt-dev/wxt/issues/428#issuecomment-1944731870
+    try {
+      server.watcher.add(getExternalOutputDependencies(server));
+    } catch (err) {
+      wxt.config.logger.warn('Failed to register additional file paths:', err);
+    }
+
     // Open browser after everything is ready to go.
     await runner.openBrowser();
   };
@@ -278,3 +287,30 @@ function getFilenameList(names: string[]): string {
     })
     .join(pc.dim(', '));
 }
+
+/**
+ * Based on the current build output, return a list of files that are:
+ * 1. Not in node_modules
+ * 2. Not inside project root
+ */
+function getExternalOutputDependencies(server: WxtDevServer) {
+  return (
+    server.currentOutput?.steps
+      .flatMap((step, i) => {
+        if (Array.isArray(step.entrypoints) && i === 0) {
+          // Dev server is already watching all HTML/esm files
+          return [];
+        }
+
+        return step.chunks.flatMap((chunk) => {
+          if (chunk.type === 'asset') return [];
+          return chunk.moduleIds;
+        });
+      })
+      .filter(
+        (file) => !file.includes('node_modules') && !file.startsWith('\x00'),
+      )
+      .map(unnormalizePath)
+      .filter((file) => !file.startsWith(wxt.config.root)) ?? []
+  );
+}