feat: use transformIndexHtml instead

workspaces/example/vite.config.ts

@@ -115,6 +115,18 @@ export default defineConfig({
           // ctx.reloadPages();
         },
       },
+      transformHtml(html, ctx) {
+        return {
+          html,
+          tags: [
+            {
+              tag: 'div',
+              injectTo: 'body-prepend',
+              children: `[Auto Injected] Page name: ${ctx.page.name}`,
+            },
+          ],
+        };
+      },
     }),
   ],
   build: { sourcemap: true },

workspaces/plugin/CHANGELOG.md

@@ -1,3 +1,11 @@
+# vite-plugin-virtual-mpa
+
+## 1.10.0
+
+### Minor Changes
+
+- feat: add transformHtml hook, merged [#56](https://github.com/emosheeep/vite-plugin-virtual-mpa/pull/56)
+
 # 1.9.3
 
 fix: Built-in matching rules preferentially match longer paths. Closed [#52](https://github.com/emosheeep/vite-plugin-virtual-mpa/issues/52).
@@ -48,9 +56,11 @@ feat: Support disable default rewrite rules by passing `false`. Closed [#44](htt
 - feat: Integration of `html-minifier-terser`. Merged [#21](https://github.com/emosheeep/vite-plugin-virtual-mpa/pull/21).
 
 # 1.5.0
+
 - feat: Allow vite handling unmatched paths. Closed [#15](https://github.com/emosheeep/vite-plugin-virtual-mpa/issues/15).
 
 # 1.4.1
+
 - fix: Cypress testing process of cross-entry-page jumping hanging, which causing a timeout error. Closed [#12](https://github.com/emosheeep/vite-plugin-virtual-mpa/issues/12).
 
 # 1.4.0

workspaces/plugin/README.md

@@ -100,9 +100,13 @@ interface MpaOptions {
    */
   previewRewrites?: RewriteRule,
   /**
-   * Dedicated hook for transforming template HTML.
+   * Dedicated hook for transforming template HTML, inherit from `transformIndexHtml`.
+   * @see https://vitejs.dev/guide/api-plugin#transformindexhtml
    */
-  transformHtml?: (html: string, page: Page) => string;
+  transformHtml?: (
+    html: string,
+    ctx: IndexHtmlTransformContext & { page: Page },
+  ) => IndexHtmlTransformResult;
   /**
    * Use to scan directories that have similar structure to generate pages.
    * Detected pages will be appended to `pages` option, page with name existed will be ignored.
@@ -256,7 +260,20 @@ export default defineConfig({
       previewRewrites: [
         // If there's no index.html, you need to manually set rules for history fallback like:
         { from: /.*/, to: '/home.html' },
-      ]
+      ],
+      /** Customize HTML */
+      transformHtml(html, ctx) {
+        return {
+          html,
+          tags: [
+            {
+              tag: 'div',
+              injectTo: 'body-prepend',
+              children: `[Auto Injected] Page name: ${ctx.page.name}`,
+            },
+          ],
+        };
+      },
     }),
   ],
 })

workspaces/plugin/README.zh_CN.md

@@ -96,9 +96,13 @@ interface MpaOptions {
    */
   previewRewrites?: RewriteRule,
   /**
-   * 处理模版 HTML 文件。
+   * 处理模版 HTML 文件，继承自 `transformIndexHtml`。
+   * @see https://vitejs.dev/guide/api-plugin#transformindexhtml
    */
-  transformHtml?: (html: string, page: Page) => string;
+  transformHtml?: (
+    html: string,
+    ctx: IndexHtmlTransformContext & { page: Page },
+  ) => IndexHtmlTransformResult;
   /**
    * 用于扫描相似的目录结构，自动生成 pages 配置。
    * 扫描到的配置会追加到 `pages` 中，具有相同 name 的 page 将被忽略
@@ -247,7 +251,20 @@ export default defineConfig({
       previewRewrites: [
         // 如果产物目录没有 index.html，你需要手动配置规则，以便服务器能正确找到入口文件。
         { from: /.*/, to: '/home.html' },
-      ]
+      ],
+      /** 自定义处理模板内容 */
+      transformHtml(html, ctx) {
+        return {
+          html,
+          tags: [
+            {
+              tag: 'div',
+              injectTo: 'body-prepend',
+              children: `[Auto Injected] Page name: ${ctx.page.name}`,
+            },
+          ],
+        };
+      },
     }),
   ],
 })

workspaces/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-virtual-mpa",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "license": "MIT",
   "author": "秦旭洋",
   "main": "dist/index.js",

workspaces/plugin/src/api-types.ts

@@ -1,6 +1,11 @@
-import type { FilterPattern, ViteDevServer } from 'vite';
 import type { Rewrite } from 'connect-history-api-fallback';
 import type { Options } from 'html-minifier-terser';
+import type {
+  FilterPattern,
+  ViteDevServer,
+  IndexHtmlTransformContext,
+  IndexHtmlTransformResult,
+} from 'vite';
 
 export type AllowedEvent = 'add' | 'unlink' | 'change' | 'unlinkDir' | 'addDir';
 
@@ -141,9 +146,13 @@ export interface MpaOptions<
    */
   scanOptions?: ScanOptions;
   /**
-   * Dedicated hook for transforming template HTML.
+   * Dedicated hook for transforming template HTML, inherit from `transformIndexHtml`.
+   * @see https://vitejs.dev/guide/api-plugin#transformindexhtml
    */
-  transformHtml?: (html: string, page: Page) => string;
+  transformHtml?: (
+    html: string,
+    ctx: IndexHtmlTransformContext & { page: Page },
+  ) => IndexHtmlTransformResult;
   /**
    * Whether to minify html file. Powered by [html-minify-terser](https://github.com/terser/html-minifier-terser).
    * @default false

workspaces/plugin/src/plugin.ts

@@ -11,7 +11,7 @@ import type {
   WatchOptions,
   RewriteRule,
 } from './api-types';
-import { scanPages, replaceSlash } from './utils';
+import { scanPages, replaceSlash, resolvePageById } from './utils';
 import {
   type ResolvedConfig,
   type Plugin,
@@ -208,17 +208,12 @@ export function createMpaPlugin<
      * Get html according to page configurations.
      */
     load(id) {
-      id = replaceSlash(path.relative(resolvedConfig.root, id));
-      const page = virtualPageMap[id];
+      const page = resolvePageById(id, resolvedConfig.root, virtualPageMap);
       if (!page) return null;
-      let templateContent = fs.readFileSync(page.template || template, 'utf-8');
-      /**
-       * Transform before building.
-       * @see https://github.com/emosheeep/vite-plugin-virtual-mpa/pull/56
-       */
-      if (typeof transformHtml === 'function') {
-        templateContent = transformHtml(templateContent, page);
-      }
+      const templateContent = fs.readFileSync(
+        page.template || template,
+        'utf-8',
+      );
       return ejs.render(
         !page.entry
           ? templateContent
@@ -234,6 +229,20 @@ export function createMpaPlugin<
         { filename: id, root: resolvedConfig.root },
       );
     },
+    transformIndexHtml(html, ctx) {
+      const page = resolvePageById(
+        ctx.filename,
+        resolvedConfig.root,
+        virtualPageMap,
+      );
+      return (
+        page &&
+        transformHtml?.(html, {
+          ...ctx,
+          page,
+        })
+      );
+    },
     configureServer(server) {
       const {
         config,
@@ -279,7 +288,8 @@ export function createMpaPlugin<
           file.endsWith('.html') &&
           tplSet.has(replaceSlash(path.relative(config.root, file)))
         ) {
-          server.ws.send({
+          // `server.hot` is available in v5.1+
+          (server.ws || server.hot).send({
             type: 'full-reload',
             path: '*',
           });

workspaces/plugin/src/utils.ts

@@ -58,3 +58,11 @@ export function scanPages(scanOptions?: ScanOptions) {
 
   return pages;
 }
+
+export function resolvePageById(
+  id: string,
+  root: string,
+  pageMap: Record<string, Page>,
+): Page | undefined {
+  return pageMap[replaceSlash(path.relative(root, id))];
+}