@svelte-vitals/core 0.20.0 → 0.22.0

package/dist/index.d.ts

@@ -717,6 +717,16 @@ declare function formatSarifReport(results: Result[], config: Config, meta: {
  */
 declare function formatGithubReport(results: Result[], config: Config): string;
 
+/**
+ * Render a compact Markdown summary — Health score, per-category table, severity counts, and
+ * a findings table — suitable for a GitHub Actions job summary or a sticky PR comment
+ * (`svelte-vitals ci install`). Delegates all aggregation to `buildJsonReport` so the numbers
+ * never drift from the JSON/console reporters.
+ */
+declare function formatMarkdownReport(results: Result[], config: Config, meta: {
+    version: string;
+}): string;
+
 type Band = 'good' | 'warn' | 'poor';
 declare const BAND_COLOR: Record<Band, string>;
 declare function scoreBand(score: number): Band;
@@ -733,9 +743,13 @@ declare function escapeHtml(s: string): string;
 declare function safeHref(url: string): string | null;
 declare function buildHtmlDocument(report: JsonReport, meta: {
     version: string;
+    coreVersion?: string;
+}, opts?: {
+    routeBadges?: Record<string, 'measured' | 'static'>;
 }): string;
 declare function formatHtmlReport(results: Result[], config: Config, meta: {
     version: string;
+    coreVersion?: string;
 }): string;
 
 /** Drop rules disabled via config (design §6). */
@@ -743,4 +757,4 @@ declare function selectRules(rules: Rule[], config: Config): Rule[];
 /** Apply per-rule severity overrides to results (design §6). */
 declare function applyRuleSeverities(results: Result[], config: Config): Result[];
 
-export { BAND_COLOR, CHILD_NODE_KEYS, type Category, type Classification, type ComponentFacts, type Config, type ConsoleReportOptions, type Detection, type EachBlockFact, type EffectFact, type Fix, type HeadProvider, type HeadTag, type HeadingInfo, type HealthResult, type ImageInfo, type JsonReport, type Palette, type Presence, type Project, ROBOTS_SOURCE_PATHS, type ResolvedHead, type ResolvedHeadings, type ResolvedImages, type Result, type Rule, type RuleContext, type RuleInfo, type RuleSetting, type Runtime, SITEMAP_SOURCE_PATHS, type Scope, type ScoreModel, type ScoreOptions, type ScoreResult, type Severity, type SourceSpan, type Summary, type SuppressionDirective, type TreatDynamicAs, type Value, allRules, applyRuleSeverities, arch001ComponentSize, arch002PropCount, attrText, attrTextOf, attrValue, attrValueOf, buildHtmlDocument, buildJsonReport, classify, collectComponentFacts, computeHealth, computeScore, correct001EachKey, correct002EffectDerived, correct003EffectAsOnMount, correct004UnmutatedState, correct005PropMutation, defaultConfig, defaultProject, defineConfig, docsUrlFor, effectiveSeverity, emptyComponentFacts, escapeHtml, explainRule, findAttr, formatAgentReport, formatConsoleReport, formatGithubReport, formatHtmlReport, formatJsonReport, formatSarifReport, hasFailureAtOrAbove, headTagRule, imageRule, isPenalized, lineOf, linkRule, noColorPalette, parseComponentFacts, perf001ImageDimensions, perf002ImageLoading, perf003PreloadAs, perf004FontPreloadCrossorigin, perf005LcpImage, perf006ResponsiveImage, perf007RenderBlockingScript, perf008Preconnect, perf009HeavyImport, perf010NamespaceImport, runRules, safeHref, scoreBand, scoreColor, scoresByCategory, sec001Html, sec002JavascriptUrl, selectRules, seo001Title, seo002Description, seo003Canonical, seo004OgImage, seo005OgTitle, seo006Robots, seo007Sitemap, seo008JsonLd, seo009HtmlLang, seo010Indexability, seo011TwitterCard, seo012OgDescription, seo013OgUrl, seo014Viewport, seo015SitemapInRobots, seo016JsonLdValidity, seo017DeprecatedType, seo018RelativeUrl, seo019DateFormat, seo020Placeholder, seo021RequiredProps, seo022TitleLength, seo023DescriptionLength, seo024Charset, seo025ImageAlt, seo026Hreflang, seo027Heading, seo028TitleUnique, seo029DescriptionUnique, seo030HeadingOrder, summarize, textFromNodes, valueFromNodes };
+export { BAND_COLOR, CHILD_NODE_KEYS, type Category, type Classification, type ComponentFacts, type Config, type ConsoleReportOptions, type Detection, type EachBlockFact, type EffectFact, type Fix, type HeadProvider, type HeadTag, type HeadingInfo, type HealthResult, type ImageInfo, type JsonReport, type Palette, type Presence, type Project, ROBOTS_SOURCE_PATHS, type ResolvedHead, type ResolvedHeadings, type ResolvedImages, type Result, type Rule, type RuleContext, type RuleInfo, type RuleSetting, type Runtime, SITEMAP_SOURCE_PATHS, type Scope, type ScoreModel, type ScoreOptions, type ScoreResult, type Severity, type SourceSpan, type Summary, type SuppressionDirective, type TreatDynamicAs, type Value, allRules, applyRuleSeverities, arch001ComponentSize, arch002PropCount, attrText, attrTextOf, attrValue, attrValueOf, buildHtmlDocument, buildJsonReport, classify, collectComponentFacts, computeHealth, computeScore, correct001EachKey, correct002EffectDerived, correct003EffectAsOnMount, correct004UnmutatedState, correct005PropMutation, defaultConfig, defaultProject, defineConfig, docsUrlFor, effectiveSeverity, emptyComponentFacts, escapeHtml, explainRule, findAttr, formatAgentReport, formatConsoleReport, formatGithubReport, formatHtmlReport, formatJsonReport, formatMarkdownReport, formatSarifReport, hasFailureAtOrAbove, headTagRule, imageRule, isPenalized, lineOf, linkRule, noColorPalette, parseComponentFacts, perf001ImageDimensions, perf002ImageLoading, perf003PreloadAs, perf004FontPreloadCrossorigin, perf005LcpImage, perf006ResponsiveImage, perf007RenderBlockingScript, perf008Preconnect, perf009HeavyImport, perf010NamespaceImport, runRules, safeHref, scoreBand, scoreColor, scoresByCategory, sec001Html, sec002JavascriptUrl, selectRules, seo001Title, seo002Description, seo003Canonical, seo004OgImage, seo005OgTitle, seo006Robots, seo007Sitemap, seo008JsonLd, seo009HtmlLang, seo010Indexability, seo011TwitterCard, seo012OgDescription, seo013OgUrl, seo014Viewport, seo015SitemapInRobots, seo016JsonLdValidity, seo017DeprecatedType, seo018RelativeUrl, seo019DateFormat, seo020Placeholder, seo021RequiredProps, seo022TitleLength, seo023DescriptionLength, seo024Charset, seo025ImageAlt, seo026Hreflang, seo027Heading, seo028TitleUnique, seo029DescriptionUnique, seo030HeadingOrder, summarize, textFromNodes, valueFromNodes };

package/dist/index.js

@@ -2654,6 +2654,82 @@ function formatGithubReport(results, config) {
   return lines.join("\n");
 }
 
+// src/reporter/markdown.ts
+var MAX_FINDINGS = 50;
+var SEVERITY_EMOJI = { critical: "\u{1F534}", warning: "\u{1F7E1}", info: "\u{1F535}" };
+var SEVERITY_RANK2 = { critical: 0, warning: 1, info: 2 };
+function escapeCell(s) {
+  return s.replace(/\|/g, "\\|").replace(/\r\n|\r|\n/g, " ");
+}
+function locationOf(issue, route) {
+  if (issue.location) return issue.line !== void 0 ? `${issue.location}:${issue.line}` : issue.location;
+  return route ?? "-";
+}
+function flattenFindings(report) {
+  const findings = [];
+  for (const r of report.routes) {
+    for (const issue of r.issues) {
+      findings.push({
+        severity: issue.severity,
+        id: issue.id,
+        location: locationOf(issue, r.route),
+        message: issue.title
+      });
+    }
+  }
+  for (const issue of report.siteIssues) {
+    findings.push({
+      severity: issue.severity,
+      id: issue.id,
+      location: locationOf(issue, void 0),
+      message: issue.title
+    });
+  }
+  return findings.map((f, index) => ({ f, index })).sort((a, b) => SEVERITY_RANK2[a.f.severity] - SEVERITY_RANK2[b.f.severity] || a.index - b.index).map(({ f }) => f);
+}
+function categoryRows(categories) {
+  const names = Object.keys(categories).sort();
+  return names.map((cat) => `| ${cat} | ${categories[cat].score} |`);
+}
+function formatMarkdownReport(results, config, meta) {
+  const report = buildJsonReport(results, config, meta);
+  const lines = [];
+  lines.push(`<!-- svelte-vitals v${meta.version} -->`);
+  lines.push(`## svelte-vitals \u2014 Health ${report.score}/100`);
+  lines.push("");
+  const catRows = categoryRows(report.categories);
+  if (catRows.length > 0) {
+    lines.push("| Category | Score |");
+    lines.push("| --- | --- |");
+    lines.push(...catRows);
+    lines.push("");
+  }
+  const { critical, warning, info, passed } = report.summary;
+  lines.push(`**${critical} critical \xB7 ${warning} warning \xB7 ${info} info** (${passed} checks passed)`);
+  lines.push("");
+  const findings = flattenFindings(report);
+  if (findings.length === 0) {
+    lines.push("\u2705 No issues found.");
+  } else {
+    lines.push("### Findings");
+    lines.push("");
+    lines.push("| Severity | Rule | Location | Message |");
+    lines.push("| --- | --- | --- | --- |");
+    const shown = findings.slice(0, MAX_FINDINGS);
+    for (const f of shown) {
+      const rule = `[${f.id}](${docsUrlFor(f.id)})`;
+      lines.push(
+        `| ${SEVERITY_EMOJI[f.severity]} ${f.severity} | ${rule} | ${escapeCell(f.location)} | ${escapeCell(f.message)} |`
+      );
+    }
+    if (findings.length > MAX_FINDINGS) {
+      lines.push("");
+      lines.push(`\u2026and ${findings.length - MAX_FINDINGS} more (run \`npx svelte-vitals\` locally for the full report)`);
+    }
+  }
+  return lines.join("\n");
+}
+
 // src/reporter/html.ts
 var BAND_COLOR = {
   good: "#2FA968",
@@ -2687,7 +2763,8 @@ function renderFinding(issue) {
 }
 function renderTopbar(report, meta) {
   const findings = report.routes.reduce((n, r) => n + r.issues.length, 0) + report.siteIssues.length;
-  return `<header class="topbar"><div class="brand"><span class="bolt">\u21AF</span>svelte-<span class="v">vitals</span></div><div class="meta"><span>v${escapeHtml(meta.version)}</span><span>${report.routes.length} routes</span><span>${findings} findings</span></div></header>`;
+  const core = meta.coreVersion ? `<span title="@svelte-vitals/core version">core v${escapeHtml(meta.coreVersion)}</span>` : "";
+  return `<header class="topbar"><div class="brand"><span class="bolt">\u21AF</span>svelte-<span class="v">vitals</span></div><div class="meta"><span>v${escapeHtml(meta.version)}</span>` + core + `<span>${report.routes.length} routes</span><span>${findings} findings</span></div></header>`;
 }
 function renderHero(report) {
   const C = 2 * Math.PI * 58;
@@ -2704,7 +2781,8 @@ function renderHero(report) {
   }).join("");
   return `<section class="hero"><div class="gauge"><svg width="132" height="132" viewBox="0 0 132 132" aria-hidden="true"><circle cx="66" cy="66" r="58" fill="none" stroke="#e4e7ec" stroke-width="11"></circle><circle id="arc" cx="66" cy="66" r="58" fill="none" stroke="${BAND_COLOR[hb]}" stroke-width="11" stroke-linecap="round" stroke-dasharray="${C.toFixed(1)}" stroke-dashoffset="${offset}"></circle></svg><div class="num"><strong id="hnum">${report.score}</strong><span>Health</span></div></div><div class="readout"><div class="eyebrow">SvelteKit \xB7 SEO &amp; Performance</div><div class="tallies"><span class="tally"><span class="dot crit"></span>Critical <span class="n">${s.critical}</span></span><span class="tally"><span class="dot warn"></span>Warning <span class="n">${s.warning}</span></span><span class="tally"><span class="dot info"></span>Info <span class="n">${s.info}</span></span><span class="tally"><span class="dot pass"></span>Passed <span class="n">${s.passed}</span></span>` + dynNote + `</div><div class="cats">${cats}</div></div></section>`;
 }
-function renderRoutes(report) {
+var ROUTE_BADGES = ["measured", "static"];
+function renderRoutes(report, routeBadges) {
   if (report.routes.length === 0) return "";
   const rows = report.routes.map((r) => {
     const b = scoreBand(r.score);
@@ -2717,7 +2795,10 @@ function renderRoutes(report) {
     if (info) parts.push(`${info} info`);
     const sum = parts.length ? parts.join(" \xB7 ") : '<span class="none">no issues</span>';
     const body = r.issues.length ? r.issues.map(renderFinding).join("") : '<p class="empty">No issues found on this route.</p>';
-    return `<details class="route" id="${slug(r.route)}" data-score="${r.score}"${r.issues.length ? " open" : ""}><summary><span class="route-name"><span class="path">${escapeHtml(r.route)}</span></span><span class="issue-sum">${sum}</span><span class="score-chip"><span class="ring" style="background:${BAND_COLOR[b]}"></span>${r.score}</span><span class="chev">\u203A</span></summary><div class="route-body">${body}</div></details>`;
+    const rawBadge = routeBadges?.[r.route];
+    const badge = rawBadge && ROUTE_BADGES.includes(rawBadge) ? rawBadge : void 0;
+    const badgeHtml = badge ? ` <span class="badge badge-${badge}">${escapeHtml(badge)}</span>` : "";
+    return `<details class="route" id="${slug(r.route)}" data-score="${r.score}"${r.issues.length ? " open" : ""}><summary><span class="route-name"><span class="path">${escapeHtml(r.route)}</span>${badgeHtml}</span><span class="issue-sum">${sum}</span><span class="score-chip"><span class="ring" style="background:${BAND_COLOR[b]}"></span>${r.score}</span><span class="chev">\u203A</span></summary><div class="route-body">${body}</div></details>`;
   }).join("");
   return `<section class="section"><h2>Routes</h2><div class="routes">${rows}</div></section>`;
 }
@@ -2770,8 +2851,11 @@ body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
 .route>summary{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;padding:13px 16px;cursor:pointer;list-style:none}
 .route>summary::-webkit-details-marker{display:none}
 .route>summary:hover{background:#fbfcfd}
-.route-name{font-family:var(--mono);font-size:13.5px;min-width:0}
+.route-name{font-family:var(--mono);font-size:13.5px;min-width:0;display:flex;align-items:center;gap:8px}
 .route-name .path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.badge{font-family:var(--sans);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;flex-shrink:0}
+.badge-measured{background:rgba(47,169,104,.14);color:var(--good)}
+.badge-static{background:rgba(140,149,163,.18);color:var(--muted)}
 .issue-sum{font-size:12.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap}.issue-sum .none{color:var(--good)}
 .score-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;font-size:14px}
 .score-chip .ring{width:10px;height:10px;border-radius:50%}
@@ -2833,8 +2917,8 @@ var SCRIPT = `
   });
 })();
 `;
-function buildHtmlDocument(report, meta) {
-  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>svelte-vitals report</title><style>${STYLE}</style></head><body><div class="wrap">` + renderTopbar(report, meta) + renderHero(report) + renderFilters(report) + renderRoutes(report) + renderSiteChecks(report) + `<footer class="foot"><span>Generated by svelte-vitals \xB7 static analysis, no browser</span><span>oekazuma.github.io/svelte-vitals</span></footer></div><script>${SCRIPT}</script></body></html>`;
+function buildHtmlDocument(report, meta, opts) {
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>svelte-vitals report</title><style>${STYLE}</style></head><body><div class="wrap">` + renderTopbar(report, meta) + renderHero(report) + renderFilters(report) + renderRoutes(report, opts?.routeBadges) + renderSiteChecks(report) + `<footer class="foot"><span>Generated by svelte-vitals \xB7 static analysis, no browser</span><span>oekazuma.github.io/svelte-vitals</span></footer></div><script>${SCRIPT}</script></body></html>`;
 }
 function formatHtmlReport(results, config, meta) {
   return buildHtmlDocument(buildJsonReport(results, config, meta), meta);
@@ -2888,6 +2972,7 @@ export {
   formatGithubReport,
   formatHtmlReport,
   formatJsonReport,
+  formatMarkdownReport,
   formatSarifReport,
   hasFailureAtOrAbove,
   headTagRule,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-vitals/core",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Shared, runtime-agnostic core for svelte-vitals (types, rule engine, scorer, reporter).",
   "type": "module",
   "license": "MIT",