refactor(devBuilder)!: always use transformIndexHtml for HTML process…

…ing (#115) The `devHtmlTransform` plugin option has been removed. Vite's dev HTML transform functionality is now required to support HTML files in dev (HMR) mode. In dev mode, a <base> element with the dev server url for the HTML file is injected into the page. This replaces incomplete custom logic for handling resources in HTML files.
samrum · Jun 1, 2023 · 3e7da0c · 3e7da0c
1 parent 09b5998
commit 3e7da0c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 39 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,9 +1,14 @@
 # Migration
 
+- [Version 4.x.x to 5.0.0](#version-4xx-to-500)
 - [Version 3.x.x to 4.0.0](#version-3xx-to-400)
 - [Version 2.x.x to 3.0.0](#version-2xx-to-300)
 - [Version 0.x.x to 1.0.0](#version-0xx-to-100)
 
+## Version 4.x.x to 5.0.0
+
+- The `devHtmlTransform` plugin option has been removed. Vite's dev HTML transform functionality is now required to support HTML files in dev (HMR) mode. In dev mode, a <base> element with the dev server url for the HTML file is injected into the page. This replaces incomplete custom logic for handling resources in HTML files.
+
 ## Version 3.x.x to 4.0.0
 
 - Dev mode HTML transforms are no longer applied by default. Enable via the new devHtmlTransform option if still needed.

diff --git a/README.md b/README.md
@@ -174,12 +174,6 @@ optimizeWebAccessibleResources (optional)
 - Default: `true`
 - On build, in Manifest V3, merge web accessible resource definitions that have matching non-`resource` properties and dedupe and sort `resources`. In Manifest V2, sort web accessible resources.
 
-devHtmlTransform (optional)
-
-- Type: `boolean`
-- Default: `false`
-- In dev mode, apply Vite plugins to manifest HTML files by calling transformIndexHtml on them
-
 additionalInputs (optional)
 
 - Type:

diff --git a/src/devBuilder/devBuilder.ts b/src/devBuilder/devBuilder.ts
@@ -120,35 +120,24 @@ export default abstract class DevBuilder<
         encoding: "utf-8",
       }));
 
-    if (this.pluginOptions.devHtmlTransform) {
-      // apply plugin transforms
-      content = await this.viteDevServer!.transformIndexHtml(fileName, content);
-    } else {
-      // add vite client
-      const viteClientScript = `<script type="module" src="${this.hmrViteClientUrl}"></script>`;
-
-      if (content.includes("<head")) {
-        content = content.replace(/<head(.*)>/, `<head$1>${viteClientScript}`);
-      } else {
-        content = content.replace(
-          /<html(.*)>/,
-          `<html$1><head>${viteClientScript}</head>`
-        );
-      }
-    }
+    content = await this.viteDevServer!.transformIndexHtml(fileName, content);
 
-    // update root paths
-    content = content.replaceAll(
-      /(src=['"]\/)/g,
-      `src="${this.hmrServerOrigin}/`
-    );
+    const devServerFileName = `${this.hmrServerOrigin}${path
+      .resolve(this.viteConfig.root, fileName)
+      .slice(this.viteConfig.root.length)}`;
 
-    // update relative paths
-    const inputFileDir = path.dirname(fileName);
-    content = content.replaceAll(
-      /(src=['"]\.\/)/g,
-      `src="${this.hmrServerOrigin}/${inputFileDir ? `${inputFileDir}/` : ""}`
-    );
+    const baseElement = `<base href="${devServerFileName}">`;
+
+    const headRE = /<head.*?>/ims;
+
+    if (content.match(headRE)) {
+      content = content.replace(headRE, `$&${baseElement}`);
+    } else {
+      content = content.replace(
+        /<html.*?>/ims,
+        `$&<head>${baseElement}</head>`
+      );
+    }
 
     this.parseInlineScriptHashes(content);
 

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -42,12 +42,6 @@ interface ViteWebExtensionOptions {
    */
   optimizeWebAccessibleResources?: boolean;
 
-  /**
-   * In dev mode, apply Vite plugins to manifest HTML files by calling transformIndexHtml on them
-   * Default: false
-   */
-  devHtmlTransform?: boolean;
-
   /**
    * Additional input files that should be processed and treated as web extension inputs.
    * Useful for dynamically injected scripts and dynamically opened HTML pages.