apex-auditor 0.2.2 → 0.2.4

package/dist/cli.js

@@ -6,6 +6,16 @@ const ANSI_RESET = "\u001B[0m";
 const ANSI_RED = "\u001B[31m";
 const ANSI_YELLOW = "\u001B[33m";
 const ANSI_GREEN = "\u001B[32m";
+const ANSI_CYAN = "\u001B[36m";
+const ANSI_BLUE = "\u001B[34m";
+const LCP_GOOD_MS = 2500;
+const LCP_WARN_MS = 4000;
+const FCP_GOOD_MS = 1800;
+const FCP_WARN_MS = 3000;
+const TBT_GOOD_MS = 200;
+const TBT_WARN_MS = 600;
+const CLS_GOOD = 0.1;
+const CLS_WARN = 0.25;
 function parseArgs(argv) {
     let configPath;
     let ci = false;
@@ -70,11 +80,12 @@ export async function runAuditCli(argv) {
     printLowestPerformancePages(summary.results, useColor);
     const elapsedMs = Date.now() - startTimeMs;
     const elapsedText = formatElapsedTime(elapsedMs);
+    const elapsedDisplay = useColor ? `${ANSI_CYAN}${elapsedText}${ANSI_RESET}` : elapsedText;
     const runsPerTarget = effectiveConfig.runs ?? 1;
     const comboCount = summary.results.length;
     const totalRuns = comboCount * runsPerTarget;
     // eslint-disable-next-line no-console
-    console.log(`\nCompleted in ${elapsedText} (${comboCount} page/device combinations x ${runsPerTarget} runs = ${totalRuns} Lighthouse runs).`);
+    console.log(`\nCompleted in ${elapsedDisplay} (${comboCount} page/device combinations x ${runsPerTarget} runs = ${totalRuns} Lighthouse runs).`);
 }
 function buildMarkdown(results) {
     const header = [
@@ -89,7 +100,16 @@ function buildConsoleTable(results, useColor) {
         "| Label | Path | Device | P | A | BP | SEO | LCP (s) | FCP (s) | TBT (ms) | CLS |",
         "|-------|------|--------|---|---|----|-----|---------|---------|----------|-----|",
     ].join("\n");
-    const rows = results.map((result) => buildConsoleRow(result, useColor));
+    const rows = [];
+    let previousKey;
+    for (const result of results) {
+        const key = `${result.label}:::${result.path}`;
+        if (previousKey !== undefined && key !== previousKey) {
+            rows.push("");
+        }
+        rows.push(buildConsoleRow(result, useColor));
+        previousKey = key;
+    }
     return `${header}\n${rows.join("\n")}`;
 }
 function buildRow(result) {
@@ -104,32 +124,37 @@ function buildRow(result) {
     return `| ${result.label} | ${result.path} | ${result.device} | ${scores.performance ?? "-"} | ${scores.accessibility ?? "-"} | ${scores.bestPractices ?? "-"} | ${scores.seo ?? "-"} | ${lcpSeconds} | ${fcpSeconds} | ${tbtMs} | ${cls} | ${error} | ${issues} |`;
 }
 function buildConsoleRow(result, useColor) {
-    const line1 = buildConsoleRowLine1(result, useColor);
-    const line2 = buildConsoleRowLine2(result, useColor);
-    const line3 = buildConsoleRowLine3(result);
-    const lines = [line1];
-    if (line2.length > 0) {
-        lines.push(line2);
+    const scoreLine = buildConsoleScoreLine(result, useColor);
+    const metricsLine = buildConsoleMetricsLine(result, useColor);
+    const errorLine = buildConsoleErrorLine(result, useColor);
+    const issuesLine = buildConsoleIssuesLine(result);
+    const lines = [scoreLine, metricsLine];
+    if (errorLine.length > 0) {
+        lines.push(errorLine);
     }
-    if (line3.length > 0) {
-        lines.push(line3);
+    if (issuesLine.length > 0) {
+        lines.push(issuesLine);
     }
     return lines.join("\n");
 }
-function buildConsoleRowLine1(result, useColor) {
+function buildConsoleScoreLine(result, useColor) {
     const scores = result.scores;
-    const metrics = result.metrics;
-    const lcpSeconds = metrics.lcpMs !== undefined ? (metrics.lcpMs / 1000).toFixed(1) : "-";
-    const fcpSeconds = metrics.fcpMs !== undefined ? (metrics.fcpMs / 1000).toFixed(1) : "-";
-    const tbtMs = metrics.tbtMs !== undefined ? Math.round(metrics.tbtMs).toString() : "-";
-    const cls = metrics.cls !== undefined ? metrics.cls.toFixed(3) : "-";
     const performanceText = colourScore(scores.performance, useColor);
     const accessibilityText = colourScore(scores.accessibility, useColor);
     const bestPracticesText = colourScore(scores.bestPractices, useColor);
     const seoText = colourScore(scores.seo, useColor);
-    return `| ${result.label} | ${result.path} | ${result.device} | ${performanceText} | ${accessibilityText} | ${bestPracticesText} | ${seoText} | ${lcpSeconds} | ${fcpSeconds} | ${tbtMs} | ${cls} |`;
+    const deviceText = formatDeviceLabel(result.device, useColor);
+    return `| ${result.label} | ${result.path} | ${deviceText} | ${performanceText} | ${accessibilityText} | ${bestPracticesText} | ${seoText} |  |  |  |  |`;
 }
-function buildConsoleRowLine2(result, useColor) {
+function buildConsoleMetricsLine(result, useColor) {
+    const metrics = result.metrics;
+    const lcpText = formatMetricSeconds(metrics.lcpMs, LCP_GOOD_MS, LCP_WARN_MS, useColor);
+    const fcpText = formatMetricSeconds(metrics.fcpMs, FCP_GOOD_MS, FCP_WARN_MS, useColor);
+    const tbtText = formatMetricMilliseconds(metrics.tbtMs, TBT_GOOD_MS, TBT_WARN_MS, useColor);
+    const clsText = formatMetricRatio(metrics.cls, CLS_GOOD, CLS_WARN, useColor);
+    return `|  |  |  |  |  |  |  | ${lcpText} | ${fcpText} | ${tbtText} | ${clsText} |`;
+}
+function buildConsoleErrorLine(result, useColor) {
     const errorCode = result.runtimeErrorCode;
     const errorMessage = result.runtimeErrorMessage;
     if (!errorCode && !errorMessage) {
@@ -139,7 +164,7 @@ function buildConsoleRowLine2(result, useColor) {
     const prefix = useColor ? `${ANSI_RED}↳ Error:${ANSI_RESET}` : "↳ Error:";
     return `  ${prefix} ${errorText}`;
 }
-function buildConsoleRowLine3(result) {
+function buildConsoleIssuesLine(result) {
     const issues = formatTopIssues(result.opportunities);
     if (issues.length === 0) {
         return "";
@@ -150,15 +175,89 @@ function formatTopIssues(opportunities) {
     if (opportunities.length === 0) {
         return "";
     }
-    const items = opportunities.map((opp) => {
-        const savingsMs = opp.estimatedSavingsMs !== undefined ? `${Math.round(opp.estimatedSavingsMs)}ms` : "";
-        const savingsBytes = opp.estimatedSavingsBytes !== undefined ? `${Math.round(opp.estimatedSavingsBytes / 1024)}KB` : "";
-        const parts = [savingsMs, savingsBytes].filter((p) => p.length > 0);
-        const suffix = parts.length > 0 ? ` (${parts.join(", ")})` : "";
-        return `${opp.id}${suffix}`;
-    });
+    const meaningful = opportunities.filter((opp) => hasMeaningfulSavings(opp));
+    const source = meaningful.length > 0 ? meaningful : opportunities;
+    const sorted = [...source].sort(compareOpportunitiesByImpact);
+    const limit = 2;
+    const top = sorted.slice(0, limit);
+    const items = top.map((opp) => formatOpportunityLabel(opp));
     return items.join("; ");
 }
+function hasMeaningfulSavings(opportunity) {
+    const savingsMs = opportunity.estimatedSavingsMs ?? 0;
+    const savingsBytes = opportunity.estimatedSavingsBytes ?? 0;
+    return savingsMs > 0 || savingsBytes > 0;
+}
+function compareOpportunitiesByImpact(a, b) {
+    const aMs = a.estimatedSavingsMs ?? 0;
+    const bMs = b.estimatedSavingsMs ?? 0;
+    if (aMs !== bMs) {
+        return bMs - aMs;
+    }
+    const aBytes = a.estimatedSavingsBytes ?? 0;
+    const bBytes = b.estimatedSavingsBytes ?? 0;
+    return bBytes - aBytes;
+}
+function formatOpportunityLabel(opportunity) {
+    const savingsMs = opportunity.estimatedSavingsMs !== undefined ? `${Math.round(opportunity.estimatedSavingsMs)}ms` : "";
+    const savingsBytes = opportunity.estimatedSavingsBytes !== undefined
+        ? `${Math.round(opportunity.estimatedSavingsBytes / 1024)}KB`
+        : "";
+    const parts = [savingsMs, savingsBytes].filter((part) => part.length > 0);
+    const suffix = parts.length > 0 ? ` (${parts.join(", ")})` : "";
+    return `${opportunity.id}${suffix}`;
+}
+function formatMetricSeconds(valueMs, goodThresholdMs, warnThresholdMs, useColor) {
+    if (valueMs === undefined) {
+        return "-";
+    }
+    const seconds = valueMs / 1000;
+    const text = `${seconds.toFixed(1)}s`;
+    if (!useColor) {
+        return text;
+    }
+    const colour = selectColourForThreshold(valueMs, goodThresholdMs, warnThresholdMs);
+    return `${colour}${text}${ANSI_RESET}`;
+}
+function formatMetricMilliseconds(valueMs, goodThresholdMs, warnThresholdMs, useColor) {
+    if (valueMs === undefined) {
+        return "-";
+    }
+    const rounded = Math.round(valueMs);
+    const text = `${rounded}ms`;
+    if (!useColor) {
+        return text;
+    }
+    const colour = selectColourForThreshold(valueMs, goodThresholdMs, warnThresholdMs);
+    return `${colour}${text}${ANSI_RESET}`;
+}
+function formatMetricRatio(value, goodThreshold, warnThreshold, useColor) {
+    if (value === undefined) {
+        return "-";
+    }
+    const text = value.toFixed(3);
+    if (!useColor) {
+        return text;
+    }
+    const colour = selectColourForThreshold(value, goodThreshold, warnThreshold);
+    return `${colour}${text}${ANSI_RESET}`;
+}
+function selectColourForThreshold(value, goodThreshold, warnThreshold) {
+    if (value <= goodThreshold) {
+        return ANSI_GREEN;
+    }
+    if (value <= warnThreshold) {
+        return ANSI_YELLOW;
+    }
+    return ANSI_RED;
+}
+function formatDeviceLabel(device, useColor) {
+    if (!useColor) {
+        return device;
+    }
+    const colour = device === "mobile" ? ANSI_CYAN : ANSI_BLUE;
+    return `${colour}${device}${ANSI_RESET}`;
+}
 function colourScore(score, useColor) {
     if (score === undefined) {
         return "-";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-auditor",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "private": false,
   "description": "CLI to run structured Lighthouse audits (Performance, Accessibility, Best Practices, SEO) across routes.",
   "type": "module",