feat(dev): reprocess manifest HTML files on change (#7)

samrum · Feb 15, 2022 · d643e5e · d643e5e
1 parent 985ed89
commit d643e5e
Showing 1 changed file with 37 additions and 22 deletions.
diff --git a/src/devBuilder/devBuilder.ts b/src/devBuilder/devBuilder.ts
@@ -82,36 +82,51 @@ export default abstract class DevBuilder<
     for (const fileName of htmlFileNames) {
       const absoluteFileName = getInputFileName(fileName, this.viteConfig.root);
 
-      let content =
-        getVirtualModule(absoluteFileName) ??
-        (await readFile(absoluteFileName, {
-          encoding: "utf-8",
-        }));
+      await this.writeManifestHtmlFile(fileName, absoluteFileName);
 
-      // apply plugin transforms
-      content = await this.viteDevServer!.transformIndexHtml(fileName, content);
+      this.viteDevServer!.watcher.on("change", async (path) => {
+        if (path !== absoluteFileName) {
+          return;
+        }
 
-      // update root paths
-      content = content.replace(/src="\//g, `src="${this.hmrServerOrigin}/`);
-      content = content.replace(/from "\//g, `from "${this.hmrServerOrigin}/`);
+        await this.writeManifestHtmlFile(fileName, absoluteFileName);
+      });
+    }
+  }
 
-      // update relative paths
-      const inputFileDir = path.dirname(fileName);
-      content = content.replace(
-        /src="\.\//g,
-        `src="${this.hmrServerOrigin}/${inputFileDir ? `${inputFileDir}/` : ""}`
-      );
+  private async writeManifestHtmlFile(
+    fileName: string,
+    absoluteFileName: string
+  ): Promise<void> {
+    let content =
+      getVirtualModule(absoluteFileName) ??
+      (await readFile(absoluteFileName, {
+        encoding: "utf-8",
+      }));
+
+    // apply plugin transforms
+    content = await this.viteDevServer!.transformIndexHtml(fileName, content);
+
+    // update root paths
+    content = content.replace(/src="\//g, `src="${this.hmrServerOrigin}/`);
+    content = content.replace(/from "\//g, `from "${this.hmrServerOrigin}/`);
+
+    // update relative paths
+    const inputFileDir = path.dirname(fileName);
+    content = content.replace(
+      /src="\.\//g,
+      `src="${this.hmrServerOrigin}/${inputFileDir ? `${inputFileDir}/` : ""}`
+    );
 
-      this.parseInlineScriptHashes(content);
+    this.parseInlineScriptHashes(content);
 
-      const outFile = `${this.outDir}/${fileName}`;
+    const outFile = `${this.outDir}/${fileName}`;
 
-      const outFileDir = path.dirname(outFile);
+    const outFileDir = path.dirname(outFile);
 
-      await ensureDir(outFileDir);
+    await ensureDir(outFileDir);
 
-      await writeFile(outFile, content);
-    }
+    await writeFile(outFile, content);
   }
 
   protected parseInlineScriptHashes(_content: string): void {}