vite-plugin-html-pages 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-html-pages",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "author": "Paul Browne",
   "type": "module",
   "license": "MIT",

package/src/plugin.ts

@@ -7,13 +7,12 @@ import { createPageModuleLoader, closePageModuleLoader } from './module-loader';
 import { buildPageIndex } from './page-index';
 import { renderPage } from './render-runtime';
 import {
-  buildHtmlAssetReplacementMap,
-  collectHtmlAssetRefs,
-  rewriteHtmlAssetUrls,
-} from './assets';
+  buildProcessedStaticAssets,
+  collectStaticAssets,
+  copyStaticAssetSource,
+} from './static-assets';
 
 import type { HtPageInfo, HtPageModule, HtPagesPluginOptions } from './types';
-import type { HtmlAssetRef } from './assets';
 import { PLUGIN_NAME, VIRTUAL_BUILD_ENTRY_ID } from './constants';
 
 import fs from 'node:fs';
@@ -51,10 +50,12 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
   let root = process.cwd();
   let server: ViteDevServer | null = null;
   let devPages: HtPageInfo[] = [];
-  let htmlAssetRefs = new Map<string, HtmlAssetRef>();
 
   const cleanUrls = options.cleanUrls ?? true;
   const pagesDir = options.pagesDir ?? 'src';
+  const pageExtensions = options.pageExtensions?.length
+    ? options.pageExtensions
+    : ['.ht.js', '.html.js', '.ht.ts', '.html.ts'];
 
   function logDebug(enabled: boolean | undefined, ...args: unknown[]) {
     if (!enabled) return;
@@ -163,53 +164,28 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
 
     async buildStart() {
       const entries = await discoverEntryPages(root, options);
-    
+
       for (const entry of entries) {
         this.addWatchFile(entry.entryPath);
       }
-    
-      // emitFile() is build-only
-      if (server) {
-        return;
-      }
-    
-      htmlAssetRefs.clear();
-    
-      const { modulesByEntry, pages } = await buildPagesPipeline();
-    
-      const htmlByPageKey = new Map<string, { html: string; pageDir?: string }>();
-    
-      for (const page of pages) {
-        const mod = modulesByEntry.get(page.entryPath);
-    
-        if (!mod) {
-          throw new Error(
-            `[${PLUGIN_NAME}] Missing module for page entry: ${page.entryPath}`,
-          );
-        }
-    
-        const html = await renderPage(page, mod, false);
-    
-        htmlByPageKey.set(page.entryPath, {
-          html,
-          pageDir: path.dirname(page.absolutePath),
-        });
-      }
-    
-      htmlAssetRefs = await collectHtmlAssetRefs({
-        ctx: this,
+
+      const staticAssets = await collectStaticAssets({
         root,
         pagesDir,
-        htmlByPageKey,
+        pageExtensions,
       });
-    
+
+      for (const asset of staticAssets) {
+        this.addWatchFile(asset.absolutePath);
+      }
+
       logDebug(
         options.debug,
-        'collected html assets',
-        [...htmlAssetRefs.values()].map((ref) => ({
-          kind: ref.kind,
-          originalUrl: ref.originalUrl,
-          absolutePath: ref.absolutePath,
+        'static assets',
+        staticAssets.map((asset) => ({
+          kind: asset.kind,
+          input: asset.relativePathFromSrc,
+          output: asset.outputFileName,
         })),
       );
     },
@@ -248,22 +224,26 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
       try {
         const { modulesByEntry, pages } = await buildPagesPipeline();
 
-        const assetReplacements = buildHtmlAssetReplacementMap({
-          ctx: this,
-          refs: htmlAssetRefs,
-          bundle,
+        const staticAssets = await collectStaticAssets({
+          root,
+          pagesDir,
+          pageExtensions,
         });
 
         logDebug(
           options.debug,
-          'asset replacements',
-          [...assetReplacements.entries()],
+          'emitting pages',
+          pages.map((p) => p.fileName),
         );
 
         logDebug(
           options.debug,
-          'emitting pages',
-          pages.map((p) => p.fileName),
+          'emitting static assets',
+          staticAssets.map((asset) => ({
+            kind: asset.kind,
+            input: asset.relativePathFromSrc,
+            output: asset.outputFileName,
+          })),
         );
 
         const limit = pLimit(options.renderConcurrency ?? 8);
@@ -271,9 +251,34 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
           options.renderBatchSize ??
           Math.max(options.renderConcurrency ?? 8, 32);
 
-        // ---------------------------
-        // 1. Render all pages
-        // ---------------------------
+        const processedOutputs = await buildProcessedStaticAssets({
+          root,
+          pagesDir,
+          assets: staticAssets,
+          minify: true,
+          sourcemap: false,
+        });
+
+        for (const [fileName, source] of processedOutputs) {
+          this.emitFile({
+            type: 'asset',
+            fileName,
+            source,
+          });
+        }
+
+        for (const asset of staticAssets) {
+          if (asset.kind !== 'copy') continue;
+
+          const source = await copyStaticAssetSource(asset);
+
+          this.emitFile({
+            type: 'asset',
+            fileName: asset.outputFileName,
+            source,
+          });
+        }
+
         for (const batch of chunkArray(pages, batchSize)) {
           await Promise.all(
             batch.map((page) =>
@@ -286,8 +291,7 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
                   );
                 }
 
-                let html = await renderPage(page, mod, false);
-                html = rewriteHtmlAssetUrls(html, assetReplacements);
+                const html = await renderPage(page, mod, false);
 
                 this.emitFile({
                   type: 'asset',
@@ -299,9 +303,6 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
           );
         }
 
-        // ---------------------------
-        // 2. 404.html
-        // ---------------------------
         const notFoundPage = pages.find((p) => p.routePath === '/404');
 
         if (notFoundPage) {
@@ -313,8 +314,7 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
             );
           }
 
-          let html = await renderPage(notFoundPage, mod, false);
-          html = rewriteHtmlAssetUrls(html, assetReplacements);
+          const html = await renderPage(notFoundPage, mod, false);
 
           this.emitFile({
             type: 'asset',
@@ -378,9 +378,6 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
           logDebug(options.debug, 'generated default 404.html');
         }
 
-        // ---------------------------
-        // 3. Sitemap
-        // ---------------------------
         const sitemapBase = options.site ?? '';
 
         const sitemapRoutes = [...new Set(pages.map((p) => p.routePath))].filter(
@@ -401,35 +398,31 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
           logDebug(options.debug, 'generated sitemap.xml');
         }
 
-        // ---------------------------
-        // 4. RSS
-        // ---------------------------
-        if (options.rss?.site) {
-          const routePrefix = options.rss.routePrefix ?? '/blog';
+        const rss = options.rss;
 
+        if (rss?.site) {
+          const routePrefix = rss.routePrefix ?? '/blog';
+        
           const rssItems = pages
             .filter((page) => page.routePath.startsWith(routePrefix))
             .map((page) => {
-              const url = `${options.rss!.site}${page.routePath}`;
-
+              const url = `${rss.site}${page.routePath}`;
+        
               return `  <item>\n    <title>${page.routePath}</title>\n    <link>${url}</link>\n    <guid>${url}</guid>\n  </item>`;
             })
             .join('\n');
-
-          const rss = `<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0">\n<channel>\n  <title>${options.rss.title ?? PLUGIN_NAME}</title>\n  <link>${options.rss.site}</link>\n  <description>${options.rss.description ?? 'RSS feed'}</description>\n${rssItems}\n</channel>\n</rss>\n`;
-
+        
+          const rssXml = `<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0">\n<channel>\n  <title>${rss.title ?? PLUGIN_NAME}</title>\n  <link>${rss.site}</link>\n  <description>${rss.description ?? 'RSS feed'}</description>\n${rssItems}\n</channel>\n</rss>\n`;
+        
           this.emitFile({
             type: 'asset',
             fileName: 'rss.xml',
-            source: rss,
+            source: rssXml,
           });
-
+        
           logDebug(options.debug, 'generated rss.xml');
         }
 
-        // ---------------------------
-        // 5. Remove virtual entry chunk
-        // ---------------------------
         for (const [fileName, output] of Object.entries(bundle)) {
           if (
             output.type === 'chunk' &&
@@ -441,8 +434,8 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
       } finally {
         await closePageModuleLoader();
       }
-    },
+    }
   };
 }
 
-export default htPages;
+export default htPages;

package/src/static-assets.ts

@@ -0,0 +1,149 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import fg from 'fast-glob';
+import * as esbuild from 'esbuild';
+
+export interface StaticAssetFile {
+  absolutePath: string;
+  relativePathFromSrc: string;
+  outputFileName: string;
+  kind: 'copy' | 'process';
+}
+
+export interface CollectStaticAssetsArgs {
+  root: string;
+  pagesDir: string;
+  pageExtensions: string[];
+}
+
+function normalizeSlashes(value: string): string {
+  return value.replace(/\\/g, '/');
+}
+
+function hasAnySuffix(value: string, suffixes: string[]): boolean {
+  return suffixes.some((suffix) => value.endsWith(suffix));
+}
+
+function shouldIgnoreFile(rel: string): boolean {
+  return (
+    rel.endsWith('.d.ts') ||
+    rel.endsWith('.map') ||
+    rel.endsWith('.tsbuildinfo') ||
+    rel.startsWith('.') ||
+    rel.includes('/.')
+  );
+}
+
+function isProcessableAsset(rel: string): boolean {
+  return (
+    rel.endsWith('.js') ||
+    rel.endsWith('.mjs') ||
+    rel.endsWith('.ts') ||
+    rel.endsWith('.css')
+  );
+}
+
+function toOutputFileName(relativePathFromSrc: string): string {
+  if (relativePathFromSrc.endsWith('.ts')) {
+    return relativePathFromSrc.slice(0, -3) + '.js';
+  }
+  return relativePathFromSrc;
+}
+
+export async function collectStaticAssets(
+  args: CollectStaticAssetsArgs,
+): Promise<StaticAssetFile[]> {
+  const { root, pagesDir, pageExtensions } = args;
+  const srcDir = path.join(root, pagesDir);
+
+  const entries = await fg('**/*', {
+    cwd: srcDir,
+    onlyFiles: true,
+    dot: false,
+    absolute: false,
+  });
+
+  const assets: StaticAssetFile[] = [];
+
+  for (const entry of entries) {
+    const rel = normalizeSlashes(entry);
+
+    if (shouldIgnoreFile(rel)) continue;
+    if (hasAnySuffix(rel, pageExtensions)) continue;
+
+    const absolutePath = path.join(srcDir, rel);
+
+    assets.push({
+      absolutePath,
+      relativePathFromSrc: rel,
+      outputFileName: normalizeSlashes(toOutputFileName(rel)),
+      kind: isProcessableAsset(rel) ? 'process' : 'copy',
+    });
+  }
+
+  return assets;
+}
+
+export async function copyStaticAssetSource(
+  asset: StaticAssetFile,
+): Promise<Uint8Array> {
+  return fs.readFile(asset.absolutePath);
+}
+
+export async function buildProcessedStaticAssets(args: {
+  root: string;
+  pagesDir: string;
+  assets: StaticAssetFile[];
+  minify?: boolean;
+  sourcemap?: boolean;
+}): Promise<Map<string, string | Uint8Array>> {
+  const { root, pagesDir, assets, minify = true, sourcemap = false } = args;
+
+  const processable = assets.filter((a) => a.kind === 'process');
+  const out = new Map<string, string | Uint8Array>();
+
+  if (processable.length === 0) {
+    return out;
+  }
+
+  const srcDir = path.join(root, pagesDir);
+  const distDir = path.join(root, 'dist');
+
+  const result = await esbuild.build({
+    entryPoints: processable.map((a) => a.absolutePath),
+    absWorkingDir: root,
+    outbase: srcDir,
+    outdir: distDir,
+    bundle: true,
+    splitting: true,
+    treeShaking: true,
+    minify,
+    sourcemap,
+    format: 'esm',
+    target: 'es2020',
+    platform: 'browser',
+    write: false,
+    entryNames: '[dir]/[name]',
+    assetNames: '[dir]/[name]',
+    loader: {
+      '.css': 'css',
+      '.png': 'file',
+      '.jpg': 'file',
+      '.jpeg': 'file',
+      '.gif': 'file',
+      '.svg': 'file',
+      '.webp': 'file',
+      '.woff': 'file',
+      '.woff2': 'file',
+      '.ttf': 'file',
+      '.otf': 'file',
+    },
+  });
+
+  for (const file of result.outputFiles) {
+    const rel = normalizeSlashes(path.relative(distDir, file.path));
+    out.set(rel, file.text ?? file.contents);
+  }
+
+  return out;
+}

package/src/assets.ts

@@ -1,236 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import type {
-  OutputBundle,
-  PluginContext,
-} from 'rollup';
-
-export type HtmlAssetKind = 'css' | 'js';
-
-export interface HtmlAssetRef {
-  kind: HtmlAssetKind;
-  originalUrl: string;
-  absolutePath: string;
-  refId: string;
-}
-
-export interface ExtractedHtmlAsset {
-  kind: HtmlAssetKind;
-  url: string;
-}
-
-const EXTERNAL_URL_RE = /^(?:[a-z]+:)?\/\//i;
-
-export function isLocalAssetUrl(url: string): boolean {
-  return (
-    !!url &&
-    !url.startsWith('data:') &&
-    !url.startsWith('mailto:') &&
-    !url.startsWith('tel:') &&
-    !url.startsWith('#') &&
-    !EXTERNAL_URL_RE.test(url)
-  );
-}
-
-export function stripQueryAndHash(url: string): string {
-  return url.split('#')[0].split('?')[0];
-}
-
-export function extractHtmlAssets(html: string): ExtractedHtmlAsset[] {
-  const assets: ExtractedHtmlAsset[] = [];
-
-  for (const match of html.matchAll(
-    /<link\b[^>]*\brel=["']stylesheet["'][^>]*\bhref=["']([^"']+)["'][^>]*>/gi,
-  )) {
-    assets.push({ kind: 'css', url: match[1] });
-  }
-
-  for (const match of html.matchAll(
-    /<script\b[^>]*\bsrc=["']([^"']+)["'][^>]*>/gi,
-  )) {
-    assets.push({ kind: 'js', url: match[1] });
-  }
-
-  return dedupeExtractedAssets(assets);
-}
-
-function dedupeExtractedAssets(
-  assets: ExtractedHtmlAsset[],
-): ExtractedHtmlAsset[] {
-  const seen = new Set<string>();
-  const out: ExtractedHtmlAsset[] = [];
-
-  for (const asset of assets) {
-    const key = `${asset.kind}:${asset.url}`;
-    if (seen.has(key)) continue;
-    seen.add(key);
-    out.push(asset);
-  }
-
-  return out;
-}
-
-export function resolveLocalAssetPath(args: {
-  root: string;
-  pagesDir: string;
-  pageDir?: string;
-  url: string;
-}): string | null {
-  const { root, pagesDir, pageDir, url } = args;
-
-  if (!isLocalAssetUrl(url)) return null;
-
-  const cleanUrl = stripQueryAndHash(url);
-
-  let abs: string;
-
-  if (cleanUrl.startsWith('/')) {
-    abs = path.join(root, pagesDir, cleanUrl.slice(1));
-  } else if (cleanUrl.startsWith(`${pagesDir}/`)) {
-    abs = path.join(root, cleanUrl);
-  } else {
-    const baseDir = pageDir ?? path.join(root, pagesDir);
-    abs = path.resolve(baseDir, cleanUrl);
-  }
-
-  return fs.existsSync(abs) ? abs : null;
-}
-
-export function emitHtmlAsset(args: {
-  ctx: PluginContext;
-  kind: HtmlAssetKind;
-  absolutePath: string;
-}): string {
-  const { ctx, kind, absolutePath } = args;
-
-  if (kind === 'css' || kind === 'js') {
-    return ctx.emitFile({
-      type: 'chunk',
-      id: absolutePath,
-      name: path.basename(absolutePath, path.extname(absolutePath)),
-    });
-  }
-
-  throw new Error(`[vite-plugin-html-pages] Unsupported asset kind: ${kind}`);
-}
-
-function replaceAllLiteral(
-  input: string,
-  search: string,
-  replacement: string,
-): string {
-  return input.split(search).join(replacement);
-}
-
-export function rewriteHtmlAssetUrls(
-  html: string,
-  replacements: Map<string, string>,
-): string {
-  let out = html;
-
-  for (const [originalUrl, builtUrl] of replacements) {
-    out = replaceAllLiteral(
-      out,
-      `href="${originalUrl}"`,
-      `href="${builtUrl}"`,
-    );
-    out = replaceAllLiteral(
-      out,
-      `href='${originalUrl}'`,
-      `href='${builtUrl}'`,
-    );
-    out = replaceAllLiteral(
-      out,
-      `src="${originalUrl}"`,
-      `src="${builtUrl}"`,
-    );
-    out = replaceAllLiteral(
-      out,
-      `src='${originalUrl}'`,
-      `src='${builtUrl}'`,
-    );
-  }
-
-  return out;
-}
-
-export async function collectHtmlAssetRefs(args: {
-  ctx: PluginContext;
-  root: string;
-  pagesDir: string;
-  htmlByPageKey: Map<string, { html: string; pageDir?: string }>;
-}): Promise<Map<string, HtmlAssetRef>> {
-  const { ctx, root, pagesDir, htmlByPageKey } = args;
-  const refs = new Map<string, HtmlAssetRef>();
-
-  for (const { html, pageDir } of htmlByPageKey.values()) {
-    const assets = extractHtmlAssets(html);
-
-    for (const asset of assets) {
-      const abs = resolveLocalAssetPath({
-        root,
-        pagesDir,
-        pageDir,
-        url: asset.url,
-      });
-
-      if (!abs) continue;
-
-      const key = `${asset.kind}:${asset.url}`;
-      if (refs.has(key)) continue;
-
-      const refId = emitHtmlAsset({
-        ctx,
-        kind: asset.kind,
-        absolutePath: abs,
-      });
-
-      refs.set(key, {
-        kind: asset.kind,
-        originalUrl: asset.url,
-        absolutePath: abs,
-        refId,
-      });
-    }
-  }
-
-  return refs;
-}
-
-export function buildHtmlAssetReplacementMap(args: {
-  ctx: PluginContext;
-  refs: Map<string, HtmlAssetRef>;
-  bundle: OutputBundle;
-}): Map<string, string> {
-  const { ctx, refs, bundle } = args;
-  const replacements = new Map<string, string>();
-
-  for (const ref of refs.values()) {
-    if (ref.kind === 'js') {
-      const fileName = ctx.getFileName(ref.refId);
-      replacements.set(ref.originalUrl, `/${fileName}`);
-      continue;
-    }
-
-    if (ref.kind === 'css') {
-      const jsEntryFile = ctx.getFileName(ref.refId);
-      const jsChunk = bundle[jsEntryFile];
-
-      if (
-        jsChunk &&
-        jsChunk.type === 'chunk' &&
-        'viteMetadata' in jsChunk &&
-        jsChunk.viteMetadata?.importedCss &&
-        jsChunk.viteMetadata.importedCss.size > 0
-      ) {
-        const cssFile = [...jsChunk.viteMetadata.importedCss][0];
-        replacements.set(ref.originalUrl, `/${cssFile}`);
-        continue;
-      }
-
-      replacements.set(ref.originalUrl, `/${jsEntryFile}`);
-    }
-  }
-
-  return replacements;
-}