|
| 1 | +#!/usr/bin/env node |
| 2 | +import { parseArgs } from "node:util"; |
| 3 | +import { loadSnippet } from "./load-snippet.js"; |
| 4 | +import { runSnippets } from "./runner.js"; |
| 5 | +import { cwvWorkflow } from "./workflows/cwv.js"; |
| 6 | +import { nextSteps } from "./decision-tree.js"; |
| 7 | +import { reportHuman } from "./reporters/human.js"; |
| 8 | +import { reportJson } from "./reporters/json.js"; |
| 9 | + |
| 10 | +const WORKFLOWS = { |
| 11 | + "core-web-vitals": cwvWorkflow, |
| 12 | +}; |
| 13 | + |
| 14 | +const SNIPPET_ALIASES = { |
| 15 | + LCP: "CoreWebVitals/LCP", |
| 16 | + CLS: "CoreWebVitals/CLS", |
| 17 | + "LCP-Sub-Parts": "CoreWebVitals/LCP-Sub-Parts", |
| 18 | +}; |
| 19 | + |
| 20 | +const USAGE = `webperf-snippets <url> [options] |
| 21 | +
|
| 22 | +Run curated WebPerf Snippets headlessly via Playwright. |
| 23 | +
|
| 24 | +Options: |
| 25 | + --workflow <name> Workflow to run (default: core-web-vitals) |
| 26 | + --snippet <name> Run a single snippet (e.g. LCP, CLS, or Category/Name) |
| 27 | + --json Output JSON instead of formatted text |
| 28 | + --wait <ms> Post-load wait before evaluating (default: 3000) |
| 29 | + --budget-lcp <ms> Exit 1 if LCP exceeds this value |
| 30 | + --budget-cls <score> Exit 1 if CLS exceeds this value |
| 31 | + --headed Show the browser window (debug) |
| 32 | + -h, --help Show this help |
| 33 | +
|
| 34 | +Examples: |
| 35 | + npx webperf-snippets https://web.dev |
| 36 | + npx webperf-snippets https://example.com --json |
| 37 | + npx webperf-snippets https://example.com --snippet LCP-Sub-Parts |
| 38 | + npx webperf-snippets https://example.com --budget-lcp 2500 |
| 39 | +`; |
| 40 | + |
| 41 | +function fail(message, code = 2) { |
| 42 | + process.stderr.write(`${message}\n`); |
| 43 | + process.exit(code); |
| 44 | +} |
| 45 | + |
| 46 | +function resolveSnippetPath(name) { |
| 47 | + return SNIPPET_ALIASES[name] ?? name; |
| 48 | +} |
| 49 | + |
| 50 | +function buildItems(values) { |
| 51 | + if (values.snippet) { |
| 52 | + const path = resolveSnippetPath(values.snippet); |
| 53 | + return [{ id: values.snippet, path, source: loadSnippet(path) }]; |
| 54 | + } |
| 55 | + const workflowName = values.workflow ?? "core-web-vitals"; |
| 56 | + const workflow = WORKFLOWS[workflowName]; |
| 57 | + if (!workflow) fail(`Unknown workflow: ${workflowName}`); |
| 58 | + return workflow.steps.map((step) => ({ |
| 59 | + id: step.id, |
| 60 | + path: step.path, |
| 61 | + source: loadSnippet(step.path), |
| 62 | + })); |
| 63 | +} |
| 64 | + |
| 65 | +function checkBudgets(results, values) { |
| 66 | + const violations = []; |
| 67 | + const lcpBudget = values["budget-lcp"] ? Number(values["budget-lcp"]) : null; |
| 68 | + const clsBudget = values["budget-cls"] ? Number(values["budget-cls"]) : null; |
| 69 | + |
| 70 | + for (const r of results) { |
| 71 | + if (r.status !== "ok") continue; |
| 72 | + if (r.metric === "LCP" && lcpBudget != null && r.value > lcpBudget) { |
| 73 | + violations.push(`LCP ${r.value}ms exceeds budget ${lcpBudget}ms`); |
| 74 | + } |
| 75 | + if (r.metric === "CLS" && clsBudget != null && r.value > clsBudget) { |
| 76 | + violations.push(`CLS ${r.value} exceeds budget ${clsBudget}`); |
| 77 | + } |
| 78 | + } |
| 79 | + return violations; |
| 80 | +} |
| 81 | + |
| 82 | +async function main() { |
| 83 | + let parsed; |
| 84 | + try { |
| 85 | + parsed = parseArgs({ |
| 86 | + options: { |
| 87 | + workflow: { type: "string" }, |
| 88 | + snippet: { type: "string" }, |
| 89 | + json: { type: "boolean" }, |
| 90 | + wait: { type: "string" }, |
| 91 | + "budget-lcp": { type: "string" }, |
| 92 | + "budget-cls": { type: "string" }, |
| 93 | + headed: { type: "boolean" }, |
| 94 | + help: { type: "boolean", short: "h" }, |
| 95 | + }, |
| 96 | + allowPositionals: true, |
| 97 | + }); |
| 98 | + } catch (err) { |
| 99 | + fail(err.message); |
| 100 | + } |
| 101 | + |
| 102 | + const { values, positionals } = parsed; |
| 103 | + |
| 104 | + if (values.help) { |
| 105 | + process.stdout.write(USAGE); |
| 106 | + return; |
| 107 | + } |
| 108 | + |
| 109 | + const url = positionals[0]; |
| 110 | + if (!url) { |
| 111 | + process.stdout.write(USAGE); |
| 112 | + process.exit(2); |
| 113 | + } |
| 114 | + |
| 115 | + const items = buildItems(values); |
| 116 | + const waitMs = values.wait ? Number(values.wait) : 3000; |
| 117 | + |
| 118 | + const initial = await runSnippets({ |
| 119 | + url, |
| 120 | + items, |
| 121 | + waitMs, |
| 122 | + headless: !values.headed, |
| 123 | + }); |
| 124 | + |
| 125 | + // Apply decision tree to spawn follow-up steps. |
| 126 | + const followUps = nextSteps(initial.results); |
| 127 | + let followUpRun = { results: [], pageErrors: [] }; |
| 128 | + if (followUps.length > 0) { |
| 129 | + const followItems = followUps.map((f) => ({ |
| 130 | + id: f.id, |
| 131 | + path: f.path, |
| 132 | + source: loadSnippet(f.path), |
| 133 | + reason: f.reason, |
| 134 | + })); |
| 135 | + // v0.1 limitation: follow-ups re-navigate. Acceptable for now; consolidate |
| 136 | + // into a single page session in v0.2 if perf becomes a problem. |
| 137 | + followUpRun = await runSnippets({ |
| 138 | + url, |
| 139 | + items: followItems, |
| 140 | + waitMs, |
| 141 | + headless: !values.headed, |
| 142 | + }); |
| 143 | + // Carry forward the human-readable reason so reporters can show it. |
| 144 | + followUpRun.results = followUpRun.results.map((r) => { |
| 145 | + const f = followUps.find((x) => x.id === r.id); |
| 146 | + return f ? { ...r, reason: f.reason } : r; |
| 147 | + }); |
| 148 | + } |
| 149 | + |
| 150 | + const payload = { |
| 151 | + url, |
| 152 | + navMs: initial.navMs, |
| 153 | + results: [...initial.results, ...followUpRun.results], |
| 154 | + pageErrors: [...initial.pageErrors, ...(followUpRun.pageErrors ?? [])], |
| 155 | + }; |
| 156 | + |
| 157 | + const output = values.json ? reportJson(payload) : reportHuman(payload); |
| 158 | + process.stdout.write(output + "\n"); |
| 159 | + |
| 160 | + // Exit codes. |
| 161 | + const violations = checkBudgets(payload.results, values); |
| 162 | + if (violations.length > 0) { |
| 163 | + if (!values.json) { |
| 164 | + for (const v of violations) process.stderr.write(`Budget violation: ${v}\n`); |
| 165 | + } |
| 166 | + process.exit(1); |
| 167 | + } |
| 168 | + |
| 169 | + const anyError = payload.results.some((r) => r.status === "error"); |
| 170 | + process.exit(anyError ? 1 : 0); |
| 171 | +} |
| 172 | + |
| 173 | +main().catch((err) => { |
| 174 | + process.stderr.write(`Error: ${err.stack ?? err.message}\n`); |
| 175 | + process.exit(1); |
| 176 | +}); |
0 commit comments