feat: Log prerendered routes upon build completion (#11)

rschristian · web-flow · commit 3bb4cce426be · 2025-03-14T20:50:34.000-05:00
* feat: Add logs to build completion, showing which routes have been prerendered

* fix: Take logLevel into account

* test: Add a test for new output
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "format": "prettier --write --ignore-path .gitignore ."
   },
   "dependencies": {
+    "kolorist": "^1.8.0",
     "magic-string": "^0.30.6",
     "node-html-parser": "^6.1.12",
     "simple-code-frame": "^1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/plugins/prerender-plugin.js b/src/plugins/prerender-plugin.js
@@ -1,17 +1,30 @@
 import path from 'node:path';
 import { promises as fs } from 'node:fs';
 
+import { createLogger } from 'vite';
 import MagicString from 'magic-string';
 import { parse as htmlParse } from 'node-html-parser';
 import { SourceMapConsumer } from 'source-map';
 import { parse as StackTraceParse } from 'stack-trace';
 import { createCodeFrame } from 'simple-code-frame';
+import * as kl from 'kolorist';
 
 /**
  * @typedef {import('vite').Rollup.OutputChunk} OutputChunk
  * @typedef {import('vite').Rollup.OutputAsset} OutputAsset
  */
 
+/**
+ * @param {import('./types.d.ts').PrerenderedRoute[]} routes
+ */
+export function prerenderedRoutes(routes) {
+    return routes.reduce((s, r) => {
+        s += `\n  ${r.url}`;
+        if (r._discoveredBy) s += kl.dim(` [from ${r._discoveredBy.url}]`);
+        return s;
+    }, '');
+}
+
 /**
  * @param {string} str
  */
@@ -62,6 +75,9 @@ export function prerenderPlugin({ prerenderScript, renderTarget, additionalPrere
     let viteConfig = {};
     let userEnabledSourceMaps;
 
+    /** @type {import('./types.d.ts').PrerenderedRoute[]} */
+    let routes = [];
+
     renderTarget ||= 'body';
     additionalPrerenderRoutes ||= [];
 
@@ -113,6 +129,28 @@ export function prerenderPlugin({ prerenderScript, renderTarget, additionalPrere
         config(config) {
             userEnabledSourceMaps = !!config.build?.sourcemap;
 
+            if (!config.customLogger) {
+                const logger = createLogger(config.logLevel || 'info');
+                const loggerInfo = logger.info;
+
+                config.customLogger = {
+                    ...logger,
+                    info: (msg, options) => {
+                        loggerInfo(msg, options);
+                        if (msg.includes('built in')) {
+                            loggerInfo(
+                                kl.bold(
+                                    `Prerendered ${routes.length} ${
+                                        routes.length > 1 ? 'pages' : 'page'
+                                    }:`,
+                                ) + prerenderedRoutes(routes),
+                                options,
+                            );
+                        }
+                    },
+                };
+            }
+
             // Enable sourcemaps for generating more actionable error messages
             config.build ??= {};
             config.build.sourcemap = true;
@@ -345,8 +383,7 @@ export function prerenderPlugin({ prerenderScript, renderTarget, additionalPrere
             // Links discovered during pre-rendering get pushed into the list of routes.
             const seen = new Set(['/', ...additionalPrerenderRoutes]);
 
-            /** @type {import('./types.d.ts').PrerenderedRoute[]} */
-            let routes = [...seen].map((link) => ({ url: link }));
+            routes = [...seen].map((link) => ({ url: link }));
 
             for (const route of routes) {
                 if (!route.url) continue;
diff --git a/tests/fixtures/logs/prerendered-routes/index.html b/tests/fixtures/logs/prerendered-routes/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <script prerender type="module" src="/src/index.js"></script>
+    </body>
+</html>
diff --git a/tests/fixtures/logs/prerendered-routes/src/index.js b/tests/fixtures/logs/prerendered-routes/src/index.js
@@ -0,0 +1,13 @@
+export async function prerender({ url }) {
+    let links;
+    if (url == '/') {
+        links = new Set(['/foo']);
+    } else if (url == '/foo') {
+        links = new Set(['/bar']);
+    }
+
+    return {
+        html: `<h1>Simple Test Result</h1>`,
+        links,
+    };
+}
diff --git a/tests/fixtures/logs/prerendered-routes/vite.config.js b/tests/fixtures/logs/prerendered-routes/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import { vitePrerenderPlugin } from 'vite-prerender-plugin';
+
+export default defineConfig({
+    plugins: [vitePrerenderPlugin()],
+});
diff --git a/tests/lib/lifecycle.js b/tests/lib/lifecycle.js
@@ -1,10 +1,11 @@
 import path from 'node:path';
 import url from 'node:url';
+import childProcess from 'node:child_process';
 import { promises as fs } from 'node:fs';
 import tmp from 'tmp-promise';
 import { build } from 'vite';
 
-import { copyDependencies } from './utils.js';
+import { copyDependencies, stripColors } from './utils.js';
 
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
@@ -36,10 +37,45 @@ export async function loadFixture(name, env) {
     await copyDependencies(env.tmp.path);
 }
 
+/**
+ * @param {string} cwd
+ */
 export async function viteBuild(cwd) {
     await build({
         logLevel: 'silent',
         root: cwd,
         configFile: path.join(cwd, 'vite.config.js'),
     });
 }
+
+/**
+ * @param {string} cwd
+ */
+export async function viteBuildCli(cwd) {
+    const child = childProcess.spawn('node', ['node_modules/vite/bin/vite.js', 'build'], {
+        cwd,
+    });
+
+    const out = {
+        stdout: [],
+        stderr: [],
+        code: 0,
+    };
+
+    child.stdout.on('data', (buffer) => {
+        const lines = stripColors(buffer.toString());
+        out.stdout.push(lines);
+    });
+    child.stderr.on('data', (buffer) => {
+        const lines = stripColors(buffer.toString());
+        out.stderr.push(lines);
+    });
+
+    out.done = new Promise((resolve) => {
+        child.on('close', (code) => {
+            resolve((out.code = code));
+        });
+    });
+
+    return out;
+}
diff --git a/tests/lib/utils.js b/tests/lib/utils.js
@@ -34,6 +34,7 @@ export async function copyDependencies(cwd) {
     await copyNodeModule('simple-code-frame');
     await copyNodeModule('source-map');
     await copyNodeModule('stack-trace');
+    await copyNodeModule('kolorist');
 }
 
 /**
@@ -71,3 +72,5 @@ export async function outputFileExists(dir, file) {
 export async function writeFixtureFile(dir, filePath, content) {
     await fs.writeFile(path.join(dir, filePath), content);
 }
+
+export const stripColors = (str) => str.replace(/\x1b\[(?:[0-9]{1,3}(?:;[0-9]{1,3})*)?[m|K]/g, '');
diff --git a/tests/logs.test.js b/tests/logs.test.js
@@ -0,0 +1,30 @@
+import { test } from 'uvu';
+import * as assert from 'uvu/assert';
+
+import { setupTest, teardownTest, loadFixture, viteBuildCli } from './lib/lifecycle.js';
+
+let env;
+test.before.each(async () => {
+    env = await setupTest();
+});
+
+test.after.each(async () => {
+    await teardownTest(env);
+});
+
+test('Should support the `prerenderScript` plugin option', async () => {
+    await loadFixture('logs/prerendered-routes', env);
+    const output = await viteBuildCli(env.tmp.path);
+    await output.done;
+
+    const idx = output.stdout.findIndex((line) => line.includes('Prerendered'));
+    // The prerender info is pushed as a single log line
+    const stdout = output.stdout.slice(idx)[0];
+
+    assert.match(stdout, 'Prerendered 3 pages:\n');
+    assert.match(stdout, '/\n');
+    assert.match(stdout, '/foo [from /]\n');
+    assert.match(stdout, '/bar [from /foo]\n');
+});
+
+test.run();

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@ export async function copyDependencies(cwd) {`
`34`	`34`	`await copyNodeModule('simple-code-frame');`
`35`	`35`	`await copyNodeModule('source-map');`
`36`	`36`	`await copyNodeModule('stack-trace');`
	`37`	`+ await copyNodeModule('kolorist');`
`37`	`38`	`}`
`38`	`39`
`39`	`40`	`/**`
`@@ -71,3 +72,5 @@ export async function outputFileExists(dir, file) {`
`71`	`72`	`export async function writeFixtureFile(dir, filePath, content) {`
`72`	`73`	`await fs.writeFile(path.join(dir, filePath), content);`
`73`	`74`	`}`
	`75`	`+`
	`76`	`+export const stripColors = (str) => str.replace(/\x1b\[(?:[0-9]{1,3}(?:;[0-9]{1,3})*)?[m\|K]/g, '');`