@svelte-vitals/core 0.21.0 → 0.22.1

package/dist/index.d.ts

@@ -743,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). */

package/dist/index.js

@@ -2665,6 +2665,9 @@ function locationOf(issue, route) {
   if (issue.location) return issue.line !== void 0 ? `${issue.location}:${issue.line}` : issue.location;
   return route ?? "-";
 }
+function messageWithRecommendation(issue) {
+  return issue.recommendation ? `${issue.title} ${issue.recommendation}` : issue.title;
+}
 function flattenFindings(report) {
   const findings = [];
   for (const r of report.routes) {
@@ -2673,7 +2676,7 @@ function flattenFindings(report) {
         severity: issue.severity,
         id: issue.id,
         location: locationOf(issue, r.route),
-        message: issue.title
+        message: messageWithRecommendation(issue)
       });
     }
   }
@@ -2682,7 +2685,7 @@ function flattenFindings(report) {
       severity: issue.severity,
       id: issue.id,
       location: locationOf(issue, void 0),
-      message: issue.title
+      message: messageWithRecommendation(issue)
     });
   }
   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);
@@ -2763,7 +2766,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;
@@ -2780,7 +2784,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);
@@ -2793,7 +2798,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>`;
 }
@@ -2846,8 +2854,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%}
@@ -2909,8 +2920,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);

package/package.json

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