@rettangoli/vt 0.0.14 → 1.0.0-rc2

package/src/common.js

@@ -5,17 +5,16 @@ import {
   writeFileSync,
   mkdirSync,
   existsSync,
-  unlinkSync,
 } from "fs";
 import { join, dirname, resolve, extname } from "path";
 import http from "http";
 import { load as loadYaml } from "js-yaml";
 import { Liquid } from "liquidjs";
-import { chromium } from "playwright";
 import { codeToHtml } from "shiki";
-import sharp from "sharp";
 import path from "path";
-import { createSteps } from "./createSteps.js";
+import { validateFiniteNumber, validateFrontMatter } from "./validation.js";
+import { createCaptureTasks } from "./capture/spec-loader.js";
+import { runCaptureScheduler } from "./capture/capture-scheduler.js";
 
 const removeExtension = (filePath) => filePath.replace(/\.[^/.]+$/, "");
 
@@ -136,11 +135,15 @@ async function generateHtml(specsDir, templatePath, outputDir, templateConfig) {
       }
 
       const relativePath = path.relative(specsDir, filePath);
+      validateFrontMatter(frontMatterObj, relativePath);
 
       let templateToUse = defaultTemplateContent;
       const resolvedTemplatePath = frontMatterObj?.template ?
         join(templateConfig.vtPath, "templates", frontMatterObj.template) :
         templateConfig.defaultTemplate;
+      if (!existsSync(resolvedTemplatePath)) {
+        throw new Error(`Template not found for "${relativePath}": ${resolvedTemplatePath}`);
+      }
       templateToUse = readFileSync(resolvedTemplatePath, "utf8");
 
       // Render template
@@ -168,14 +171,14 @@ async function generateHtml(specsDir, templatePath, outputDir, templateConfig) {
     console.log(`Successfully generated ${processedFiles.length} files`);
     return processedFiles;
   } catch (error) {
-    throw new Error("Error generating HTML:", error);
+    throw new Error(`Error generating HTML: ${error.message}`, { cause: error });
   }
 }
 
 /**
  * Start a web server to serve static files
  */
-function startWebServer(artifactsDir, staticDir, port) {
+async function startWebServer(artifactsDir, staticDir, port) {
   const server = http.createServer((req, res) => {
     const url = new URL(req.url, `http://localhost:${port}`);
     let path = url.pathname;
@@ -212,10 +215,15 @@ function startWebServer(artifactsDir, staticDir, port) {
     res.end("Not Found");
   });
 
-  server.listen(port, () => {
-    console.log(`Server started at http://localhost:${port}`);
+  await new Promise((resolveServer, rejectServer) => {
+    server.once("error", rejectServer);
+    server.listen(port, () => {
+      server.off("error", rejectServer);
+      resolveServer();
+    });
   });
 
+  console.log(`Server started at http://localhost:${port}`);
   return server;
 }
 
@@ -239,188 +247,118 @@ function getContentType(filePath) {
   return contentTypes[ext] || "application/octet-stream";
 }
 
+function toSectionPageKey(sectionLike) {
+  return sectionLike.title;
+}
+
 /**
  * Take screenshots of all generated HTML files
  */
-async function takeScreenshots(
-  generatedFiles,
-  serverUrl,
-  screenshotsDir,
-  concurrency = 8,
-  waitTime = 10,
-  configUrl = undefined,
-  waitEvent = undefined,
-) {
-  // Ensure screenshots directory exists
-  ensureDirectoryExists(screenshotsDir);
-
-  // Launch browser
-  console.log("Launching browser to take screenshots...");
-  const browser = await chromium.launch();
-
-  const takeAndSaveScreenshot = async (page, basePath, suffix = "") => {
-    const finalPath = suffix ? `${basePath}-${suffix}` : basePath;
-    const tempPngPath = join(screenshotsDir, `${finalPath}.png`);
-    const screenshotPath = join(screenshotsDir, `${finalPath}.webp`);
-    ensureDirectoryExists(dirname(screenshotPath));
-
-    // Check if custom screenshot function is available
-    const hasCustomScreenshot = await page.evaluate(() => typeof window.takeVtScreenshotBase64 === 'function');
-
-    if (hasCustomScreenshot) {
-      // Use custom screenshot function (useful for canvas-based apps)
-      let base64Data = await page.evaluate(() => window.takeVtScreenshotBase64());
-      // Strip data URL prefix if present (e.g., "data:image/png;base64,")
-      if (base64Data.includes(',')) {
-        base64Data = base64Data.split(',')[1];
-      }
-      const pngBuffer = Buffer.from(base64Data, 'base64');
-      await sharp(pngBuffer).webp({ quality: 85 }).toFile(screenshotPath);
-    } else {
-      // Use Playwright's built-in screenshot
-      await page.screenshot({ path: tempPngPath, fullPage: true });
-      await sharp(tempPngPath).webp({ quality: 85 }).toFile(screenshotPath);
+async function takeScreenshots(options) {
+  const {
+    generatedFiles,
+    serverUrl,
+    screenshotsDir,
+    workerCount,
+    screenshotWaitTime = 10,
+    configUrl = undefined,
+    waitEvent = undefined,
+    waitSelector = undefined,
+    waitStrategy = undefined,
+    navigationTimeout = 30000,
+    readyTimeout = 30000,
+    screenshotTimeout = 30000,
+    maxRetries = 2,
+    recycleEvery = 0,
+    isolationMode = "fast",
+    metricsPath = join(".rettangoli", "vt", "metrics.json"),
+    headless = true,
+    viewport = undefined,
+  } = options;
+
+  if (!Array.isArray(generatedFiles)) {
+    throw new Error("takeScreenshots: generatedFiles must be an array.");
+  }
+  if (typeof serverUrl !== "string" || serverUrl.trim().length === 0) {
+    throw new Error("takeScreenshots: serverUrl must be a non-empty string.");
+  }
+  if (typeof screenshotsDir !== "string" || screenshotsDir.trim().length === 0) {
+    throw new Error("takeScreenshots: screenshotsDir must be a non-empty string.");
+  }
 
-      if (existsSync(tempPngPath)) {
-        unlinkSync(tempPngPath);
-      }
+  validateFiniteNumber(workerCount, "workerCount", { integer: true, min: 1 });
+  validateFiniteNumber(screenshotWaitTime, "screenshotWaitTime", { integer: true, min: 0 });
+  validateFiniteNumber(navigationTimeout, "navigationTimeout", { integer: true, min: 1 });
+  validateFiniteNumber(readyTimeout, "readyTimeout", { integer: true, min: 1 });
+  validateFiniteNumber(screenshotTimeout, "screenshotTimeout", { integer: true, min: 1 });
+  validateFiniteNumber(maxRetries, "maxRetries", { integer: true, min: 0 });
+  validateFiniteNumber(recycleEvery, "recycleEvery", { integer: true, min: 0 });
+
+  if (!["strict", "fast"].includes(isolationMode)) {
+    throw new Error(
+      `Invalid isolationMode "${isolationMode}". Expected "strict" or "fast".`,
+    );
+  }
+  if (waitStrategy !== undefined && waitStrategy !== null) {
+    if (!["networkidle", "load", "event", "selector"].includes(waitStrategy)) {
+      throw new Error(
+        `Invalid waitStrategy "${waitStrategy}". Expected "networkidle", "load", "event", or "selector".`,
+      );
     }
-    return screenshotPath;
-  };
-
-  const processFile = async (file, browser, serverUrl, screenshotsDir, waitTime, configUrl, waitEvent, takeAndSaveScreenshot) => {
-    const context = await browser.newContext();
-    const page = await context.newPage();
-
-    try {
-      const envVars = {};
-      for (const [key, value] of Object.entries(process.env)) {
-        if (key.startsWith('RTGL_VT_')) {
-          envVars[key] = value;
-        }
-      }
-
-      if (Object.keys(envVars).length > 0) {
-        await page.addInitScript((vars) => {
-          Object.assign(window, vars);
-        }, envVars);
-      }
-
-      // If using custom wait event, set up listener before navigation
-      if (waitEvent) {
-        await page.addInitScript((eventName) => {
-          window.__vtReadyFired = false;
-          window.addEventListener(eventName, () => {
-            window.__vtReadyFired = true;
-          }, { once: true });
-        }, waitEvent);
-      }
-
-      const frontMatterUrl = file.frontMatter?.url;
-      const constructedUrl = convertToHtmlExtension(`${serverUrl}/candidate/${file.path.replace(/\\/g, "/")}`);
-      const url = frontMatterUrl ?? configUrl ?? constructedUrl;
-      const fileUrl = url.startsWith("http") ? url : new URL(url, serverUrl).href;
-
-      console.log(`Navigating to ${fileUrl}`);
-
-      if (waitEvent) {
-        // Navigate and wait for custom event
-        await page.goto(fileUrl, { waitUntil: "load" });
-        console.log(`Waiting for custom event: ${waitEvent}`);
-        await page.waitForFunction(() => window.__vtReadyFired === true, { timeout: 30000 });
-      } else {
-        // Default: wait for network idle
-        await page.goto(fileUrl, { waitUntil: "networkidle" });
-      }
-
-      // Normalize font rendering for consistent screenshots
-      await page.addStyleTag({
-        content: `
-          * {
-            -webkit-font-smoothing: antialiased !important;
-            -moz-osx-font-smoothing: grayscale !important;
-            text-rendering: geometricPrecision !important;
-          }
-        `
-      });
-
-      if (waitTime > 0) {
-        await page.waitForTimeout(waitTime);
-      }
-      const baseName = removeExtension(file.path);
-
-      const initialScreenshotPath = await takeAndSaveScreenshot(page, baseName);
-      console.log(`Screenshot saved: ${initialScreenshotPath}`);
-
-      const stepContext = {
-        baseName,
-        takeAndSaveScreenshot,
-      };
-      const stepsExecutor = createSteps(page, stepContext);
-
-      for (const step of file.frontMatter?.steps || []) {
-        await stepsExecutor.executeStep(step);
-      }
-      return { success: true, file };
-    } finally {
-      await context.close();
+  }
+  if (waitEvent !== undefined && waitEvent !== null) {
+    if (typeof waitEvent !== "string" || waitEvent.trim().length === 0) {
+      throw new Error("waitEvent must be a non-empty string when provided.");
     }
-  };
+  }
+  if (waitSelector !== undefined && waitSelector !== null) {
+    if (typeof waitSelector !== "string" || waitSelector.trim().length === 0) {
+      throw new Error("waitSelector must be a non-empty string when provided.");
+    }
+  }
 
-  try {
-    const total = generatedFiles.length;
-    let completed = 0;
-    let filesToProcess = [...generatedFiles];
-    const maxRetries = 3;
-
-    for (let attempt = 1; attempt <= maxRetries && filesToProcess.length > 0; attempt++) {
-      if (attempt > 1) {
-        console.log(`\nRetry attempt ${attempt}/${maxRetries} for ${filesToProcess.length} failed files...`);
-      }
+  ensureDirectoryExists(screenshotsDir);
 
-      const failedFiles = [];
-
-      // Process files in batches based on concurrency
-      while (filesToProcess.length > 0) {
-        const batch = filesToProcess.splice(0, concurrency);
-        const batchPromises = batch.map((file) =>
-          processFile(file, browser, serverUrl, screenshotsDir, waitTime, configUrl, waitEvent, takeAndSaveScreenshot)
-            .then(() => {
-              completed++;
-              console.log(`Finished processing ${file.path} (${completed}/${total})`);
-              return { success: true, file };
-            })
-            .catch((error) => {
-              console.error(`Error processing ${file.path}:`, error.message);
-              return { success: false, file };
-            })
-        );
-
-        const results = await Promise.allSettled(batchPromises);
-        for (const result of results) {
-          if (result.status === 'fulfilled' && !result.value.success) {
-            failedFiles.push(result.value.file);
-          } else if (result.status === 'rejected') {
-            // This shouldn't happen since we catch errors above, but just in case
-            console.error('Unexpected rejection:', result.reason);
-          }
-        }
-      }
+  const tasks = createCaptureTasks(generatedFiles, {
+    serverUrl,
+    configUrl,
+    waitEvent,
+    waitSelector,
+    waitStrategy,
+    viewport,
+  });
 
-      filesToProcess = failedFiles;
-    }
+  const { summary, failures } = await runCaptureScheduler({
+    tasks,
+    screenshotsDir,
+    workerCount,
+    isolationMode,
+    screenshotWaitTime,
+    waitEvent,
+    waitSelector,
+    waitStrategy,
+    navigationTimeout,
+    readyTimeout,
+    screenshotTimeout,
+    maxRetries,
+    recycleEvery,
+    metricsPath,
+    headless,
+  });
 
-    if (filesToProcess.length > 0) {
-      console.error(`\nFailed to process ${filesToProcess.length} files after ${maxRetries} attempts:`);
-      filesToProcess.forEach((file) => console.error(`  - ${file.path}`));
-    }
-  } catch (error) {
-    console.error("Error taking screenshots:", error);
-  } finally {
-    // Close browser
-    await browser.close();
-    console.log("Browser closed");
+  if (failures.length > 0) {
+    const failedDetails = failures
+      .map((failure) => `- ${failure.path}: ${failure.error}`)
+      .join("\n");
+    throw new Error(
+      `Failed to process ${failures.length} screenshot file(s):\n${failedDetails}`,
+    );
   }
+
+  console.log(
+    `Capture completed: ${summary.successful}/${summary.totalTasks} succeeded in ${summary.durationMs}ms`,
+  );
+  return summary;
 }
 
 /**
@@ -455,17 +393,17 @@ function generateOverview(data, templatePath, outputPath, configData) {
           title: section.title,
           type: "groupLabel",
           items: section.items.map((item) => ({
-            id: item.title.toLowerCase().replace(/\s+/g, "-"),
+            id: toSectionPageKey(item),
             title: item.title,
-            href: `/${item.title.toLowerCase().replace(/\s+/g, "-")}.html`,
+            href: `/${toSectionPageKey(item)}.html`,
           })),
         };
       } else {
-        // Flat item (backwards compatibility)
+        // Flat item
         return {
-          id: section.title.toLowerCase().replace(/\s+/g, "-"),
+          id: toSectionPageKey(section),
           title: section.title,
-          href: `/${section.title.toLowerCase().replace(/\s+/g, "-")}.html`,
+          href: `/${toSectionPageKey(section)}.html`,
         };
       }
     });
@@ -494,7 +432,7 @@ function generateOverview(data, templatePath, outputPath, configData) {
 
       const finalOutputPath = outputPath.replace(
         "index.html",
-        `${section.title.toLowerCase().replace(/\s+/g, "-")}.html`
+        `${toSectionPageKey(section)}.html`
       );
       // Save file
       writeFileSync(finalOutputPath, renderedContent, "utf8");