diff --git a/workspaces/example/vite.config.ts b/workspaces/example/vite.config.ts index d945435..7664919 100644 --- a/workspaces/example/vite.config.ts +++ b/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 }, diff --git a/workspaces/plugin/CHANGELOG.md b/workspaces/plugin/CHANGELOG.md index ac11d68..2ea11bd 100644 --- a/workspaces/plugin/CHANGELOG.md +++ b/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 diff --git a/workspaces/plugin/README.md b/workspaces/plugin/README.md index cdecb08..9988c1a 100644 --- a/workspaces/plugin/README.md +++ b/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}`, + }, + ], + }; + }, }), ], }) diff --git a/workspaces/plugin/README.zh_CN.md b/workspaces/plugin/README.zh_CN.md index 493b6ca..7322c47 100644 --- a/workspaces/plugin/README.zh_CN.md +++ b/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}`, + }, + ], + }; + }, }), ], }) diff --git a/workspaces/plugin/package.json b/workspaces/plugin/package.json index 3247742..2f54707 100644 --- a/workspaces/plugin/package.json +++ b/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", diff --git a/workspaces/plugin/src/api-types.ts b/workspaces/plugin/src/api-types.ts index 8cfa2d6..0624ccc 100644 --- a/workspaces/plugin/src/api-types.ts +++ b/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 diff --git a/workspaces/plugin/src/plugin.ts b/workspaces/plugin/src/plugin.ts index cd193dd..930a466 100644 --- a/workspaces/plugin/src/plugin.ts +++ b/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: '*', }); diff --git a/workspaces/plugin/src/utils.ts b/workspaces/plugin/src/utils.ts index 03ca14b..f0f5e09 100644 --- a/workspaces/plugin/src/utils.ts +++ b/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, +): Page | undefined { + return pageMap[replaceSlash(path.relative(root, id))]; +}