vite-plugin-html-pages 1.2.2 → 1.2.4

package/src/plugin.ts

@@ -1,19 +1,15 @@
 import pLimit from 'p-limit';
 import type { Plugin, ViteDevServer } from 'vite';
-
+import {
+  buildStaticAssetSource,
+  collectStaticAssets,
+} from './static-assets';
 import { discoverEntryPages } from './discover';
 import { installDevServer } from './dev-server';
 import { createPageModuleLoader, closePageModuleLoader } from './module-loader';
 import { buildPageIndex } from './page-index';
 import { renderPage } from './render-runtime';
-import {
-  buildHtmlAssetReplacementMap,
-  collectHtmlAssetRefs,
-  rewriteHtmlAssetUrls,
-} from './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 +47,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;
@@ -168,48 +166,23 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
         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,
         })),
       );
     },
@@ -247,48 +220,60 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
     async generateBundle(_, bundle) {
       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) => asset.outputFileName),
         );
-
+    
         const limit = pLimit(options.renderConcurrency ?? 8);
         const batchSize =
           options.renderBatchSize ??
           Math.max(options.renderConcurrency ?? 8, 32);
-
+    
         // ---------------------------
-        // 1. Render all pages
+        // 1. Emit static assets
+        // ---------------------------
+        for (const asset of staticAssets) {
+          const source = await buildStaticAssetSource(asset);
+    
+          this.emitFile({
+            type: 'asset',
+            fileName: asset.outputFileName,
+            source,
+          });
+        }
+    
+        // ---------------------------
+        // 2. Render all pages
         // ---------------------------
         for (const batch of chunkArray(pages, batchSize)) {
           await Promise.all(
             batch.map((page) =>
               limit(async () => {
                 const mod = modulesByEntry.get(page.entryPath);
-
+    
                 if (!mod) {
                   throw new Error(
                     `[${PLUGIN_NAME}] Missing module for page entry: ${page.entryPath}`,
                   );
                 }
-
-                let html = await renderPage(page, mod, false);
-                html = rewriteHtmlAssetUrls(html, assetReplacements);
-
+    
+                const html = await renderPage(page, mod, false);
+    
                 this.emitFile({
                   type: 'asset',
                   fileName: options.mapOutputPath?.(page) ?? page.fileName,
@@ -298,137 +283,136 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
             ),
           );
         }
-
+    
         // ---------------------------
-        // 2. 404.html
+        // 3. 404.html
         // ---------------------------
         const notFoundPage = pages.find((p) => p.routePath === '/404');
-
+    
         if (notFoundPage) {
           const mod = modulesByEntry.get(notFoundPage.entryPath);
-
+    
           if (!mod) {
             throw new Error(
               `[${PLUGIN_NAME}] Missing module for 404 page entry: ${notFoundPage.entryPath}`,
             );
           }
-
-          let html = await renderPage(notFoundPage, mod, false);
-          html = rewriteHtmlAssetUrls(html, assetReplacements);
-
+    
+          const html = await renderPage(notFoundPage, mod, false);
+    
           this.emitFile({
             type: 'asset',
             fileName: '404.html',
             source: html,
           });
-
+    
           logDebug(options.debug, 'generated 404.html from user page');
         } else {
           const default404 = `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>404 - Page Not Found</title>
-    <style>
-      :root {
-        color-scheme: light dark;
-      }
-      body {
-        margin: 0;
-        font-family: system-ui, sans-serif;
-        min-height: 100vh;
-        display: grid;
-        place-items: center;
-        padding: 2rem;
-      }
-      main {
-        max-width: 40rem;
-        text-align: center;
-      }
-      h1 {
-        font-size: 3rem;
-        margin: 0 0 1rem;
-      }
-      p {
-        margin: 0.5rem 0;
-        line-height: 1.5;
-      }
-      a {
-        color: inherit;
-      }
-    </style>
-  </head>
-  <body>
-    <main>
-      <h1>404</h1>
-      <p>Page not found.</p>
-      <p><a href="/">Go back home</a></p>
-    </main>
-  </body>
-</html>
-`;
-
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>404 - Page Not Found</title>
+        <style>
+          :root {
+            color-scheme: light dark;
+          }
+          body {
+            margin: 0;
+            font-family: system-ui, sans-serif;
+            min-height: 100vh;
+            display: grid;
+            place-items: center;
+            padding: 2rem;
+          }
+          main {
+            max-width: 40rem;
+            text-align: center;
+          }
+          h1 {
+            font-size: 3rem;
+            margin: 0 0 1rem;
+          }
+          p {
+            margin: 0.5rem 0;
+            line-height: 1.5;
+          }
+          a {
+            color: inherit;
+          }
+        </style>
+      </head>
+      <body>
+        <main>
+          <h1>404</h1>
+          <p>Page not found.</p>
+          <p><a href="/">Go back home</a></p>
+        </main>
+      </body>
+    </html>
+    `;
+    
           this.emitFile({
             type: 'asset',
             fileName: '404.html',
             source: default404,
           });
-
+    
           logDebug(options.debug, 'generated default 404.html');
         }
-
+    
         // ---------------------------
-        // 3. Sitemap
+        // 4. Sitemap
         // ---------------------------
         const sitemapBase = options.site ?? '';
-
+    
         const sitemapRoutes = [...new Set(pages.map((p) => p.routePath))].filter(
           (route) => !route.includes(':') && !route.includes('*'),
         );
-
+    
         if (sitemapBase && sitemapRoutes.length > 0) {
           const sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${sitemapRoutes
             .map((route) => `  <url><loc>${sitemapBase}${route}</loc></url>`)
             .join('\n')}\n</urlset>\n`;
-
+    
           this.emitFile({
             type: 'asset',
             fileName: 'sitemap.xml',
             source: sitemap,
           });
-
+    
           logDebug(options.debug, 'generated sitemap.xml');
         }
-
+    
         // ---------------------------
-        // 4. RSS
+        // 5. RSS
         // ---------------------------
         if (options.rss?.site) {
           const routePrefix = options.rss.routePrefix ?? '/blog';
-
+    
           const rssItems = pages
             .filter((page) => page.routePath.startsWith(routePrefix))
             .map((page) => {
               const url = `${options.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`;
-
+    
           this.emitFile({
             type: 'asset',
             fileName: 'rss.xml',
             source: rss,
           });
-
+    
           logDebug(options.debug, 'generated rss.xml');
         }
-
+    
         // ---------------------------
-        // 5. Remove virtual entry chunk
+        // 6. Remove virtual entry chunk
         // ---------------------------
         for (const [fileName, output] of Object.entries(bundle)) {
           if (
@@ -441,7 +425,7 @@ export function htPages(options: HtPagesPluginOptions = {}): Plugin {
       } finally {
         await closePageModuleLoader();
       }
-    },
+    }
   };
 }
 

package/src/static-assets.ts

@@ -0,0 +1,97 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import fg from 'fast-glob';
+import { transformWithEsbuild } from 'vite';
+
+export interface StaticAssetFile {
+  absolutePath: string;
+  relativePathFromSrc: string;
+  outputFileName: string;
+  kind: 'copy' | 'ts';
+}
+
+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 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 (hasAnySuffix(rel, pageExtensions)) {
+      continue;
+    }
+
+    const absolutePath = path.join(srcDir, rel);
+
+    if (rel.endsWith('.ts')) {
+      assets.push({
+        absolutePath,
+        relativePathFromSrc: rel,
+        outputFileName: normalizeSlashes(toOutputFileName(rel)),
+        kind: 'ts',
+      });
+      continue;
+    }
+
+    assets.push({
+      absolutePath,
+      relativePathFromSrc: rel,
+      outputFileName: normalizeSlashes(rel),
+      kind: 'copy',
+    });
+  }
+
+  return assets;
+}
+
+export async function buildStaticAssetSource(
+  asset: StaticAssetFile,
+): Promise<string | Uint8Array> {
+  if (asset.kind === 'copy') {
+    return fs.readFile(asset.absolutePath);
+  }
+
+  const source = await fs.readFile(asset.absolutePath, 'utf8');
+
+  const result = await transformWithEsbuild(source, asset.absolutePath, {
+    loader: 'ts',
+    format: 'esm',
+    target: 'es2020',
+    sourcemap: false,
+    minify: false,
+  });
+
+  return result.code;
+}