wxt 0.7.3 → 0.7.4

package/dist/index.d.cts

@@ -565,7 +565,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.3";
+var version = "0.7.4";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.d.ts

@@ -565,7 +565,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.3";
+var version = "0.7.4";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.js

@@ -949,62 +949,119 @@ function resolvePerBrowserOption(option, browser) {
 // src/core/vite-plugins/devHtmlPrerender.ts
 import { parseHTML } from "linkedom";
 import { dirname as dirname2, isAbsolute, relative as relative2, resolve as resolve3 } from "path";
+var reactRefreshPreamble = "";
 function devHtmlPrerender(config) {
-  return {
-    apply: "build",
-    name: "wxt:dev-html-prerender",
-    config() {
-      return {
-        resolve: {
-          alias: {
-            "@wxt/reload-html": resolve3(
-              config.root,
-              "node_modules/wxt/dist/virtual-modules/reload-html.js"
-            )
+  const htmlReloadId = "@wxt/reload-html";
+  const resolvedHtmlReloadId = resolve3(
+    config.root,
+    "node_modules/wxt/dist/virtual-modules/reload-html.js"
+  );
+  const virtualReactRefreshId = "@wxt/virtual-react-refresh";
+  const resolvedVirtualReactRefreshId = "\0" + virtualReactRefreshId;
+  return [
+    {
+      apply: "build",
+      name: "wxt:dev-html-prerender",
+      config() {
+        return {
+          resolve: {
+            alias: {
+              [htmlReloadId]: resolvedHtmlReloadId
+            }
           }
+        };
+      },
+      // 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 || !id.endsWith(".html"))
+          return;
+        const { document } = parseHTML(code);
+        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(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 reloader = document.createElement("script");
+        reloader.src = htmlReloadId;
+        reloader.type = "module";
+        document.head.appendChild(reloader);
+        const newHtml = document.toString();
+        config.logger.debug("transform " + id);
+        config.logger.debug("Old HTML:\n" + code);
+        config.logger.debug("New HTML:\n" + newHtml);
+        return newHtml;
+      },
+      // 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}`;
+        const name = getEntrypointName(config.entrypointsDir, ctx.filename);
+        const url2 = `${server.origin}/${name}.html`;
+        const serverHtml = await server.transformIndexHtml(
+          url2,
+          html,
+          originalUrl
+        );
+        const { document } = parseHTML(serverHtml);
+        const reactRefreshScript = Array.from(
+          document.querySelectorAll("script[type=module]")
+        ).find((script) => script.innerHTML.includes("@react-refresh"));
+        if (reactRefreshScript) {
+          reactRefreshPreamble = reactRefreshScript.innerHTML;
+          const virtualScript = document.createElement("script");
+          virtualScript.type = "module";
+          virtualScript.src = `${server.origin}/${virtualReactRefreshId}`;
+          reactRefreshScript.replaceWith(virtualScript);
         }
-      };
+        const viteClientScript = document.querySelector(
+          "script[src='/@vite/client']"
+        );
+        if (viteClientScript) {
+          viteClientScript.src = `${server.origin}${viteClientScript.src}`;
+        }
+        const newHtml = document.toString();
+        config.logger.debug("transformIndexHtml " + ctx.filename);
+        config.logger.debug("Old HTML:\n" + html);
+        config.logger.debug("New HTML:\n" + newHtml);
+        return newHtml;
+      }
     },
-    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 url2 = `${server.origin}/${name}.html`;
-      const serverHtml = await server.transformIndexHtml(
-        url2,
-        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(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 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;
+    {
+      name: "wxt:virtualize-react-refresh",
+      apply: "serve",
+      resolveId(id) {
+        if (id === `/${virtualReactRefreshId}`) {
+          return resolvedVirtualReactRefreshId;
+        }
+        if (id.startsWith("/chunks/")) {
+          return "\0noop";
+        }
+      },
+      load(id) {
+        if (id === resolvedVirtualReactRefreshId) {
+          return reactRefreshPreamble;
+        }
+        if (id === "\0noop") {
+          return "";
+        }
+      }
     }
-  };
+  ];
 }
 
 // src/core/vite-plugins/devServerGlobals.ts
@@ -4496,7 +4553,7 @@ async function clean(root = process.cwd()) {
 }
 
 // package.json
-var version2 = "0.7.3";
+var version2 = "0.7.4";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {