@svelte-vitals/vite 0.13.1 → 0.14.0

package/dist/hooks/index.d.ts

@@ -10,8 +10,10 @@ interface SvelteVitalsHookOptions {
 }
 
 /**
- * SvelteKit `handle` that prints SEO warnings for each visited page's rendered `<head>`,
- * in dev only. Add it to `src/hooks.server.ts`, e.g. `sequence(svelteVitalsHandle())`.
+ * SvelteKit `handle` that analyzes each visited page's rendered `<head>`, in dev only,
+ * and (when the live dashboard is enabled) feeds the results in — upgrading that
+ * route's dashboard findings from static (source-only) to `measured` (real rendered
+ * HTML). Add it to `src/hooks.server.ts`, e.g. `sequence(svelteVitalsHandle())`.
  */
 declare function svelteVitalsHandle(options?: SvelteVitalsHookOptions): Handle;
 

package/dist/hooks/index.js

@@ -15,22 +15,9 @@ import {
 
 // src/hooks/format.ts
 import { isPenalized, effectiveSeverity } from "@svelte-vitals/core";
-var GLYPH = { critical: "\u2717", warning: "\u26A0", info: "\xB7" };
-var RANK = { critical: 0, warning: 1, info: 2 };
 function penalized(results, config) {
   return results.filter((r) => isPenalized(r.detection, config.treatDynamicAs));
 }
-function formatDevReport(route, results, config) {
-  const failing = penalized(results, config).sort(
-    (a, b) => RANK[effectiveSeverity(a, config)] - RANK[effectiveSeverity(b, config)] || a.id.localeCompare(b.id)
-  );
-  if (failing.length === 0) return "";
-  const lines = [`[svelte-vitals] ${route}`];
-  for (const r of failing) {
-    lines.push(`  ${GLYPH[effectiveSeverity(r, config)]} ${r.id}  ${r.message}`);
-  }
-  return lines.join("\n");
-}
 function findingSignature(results, config) {
   return penalized(results, config).map((r) => `${r.id}:${effectiveSeverity(r, config)}:${r.detection.presence}:${r.detection.value}`).sort().join("|");
 }
@@ -54,7 +41,7 @@ async function postIngest(origin, route, results) {
   } catch {
   }
 }
-async function analyzeAndWarn(html, route, origin, rules, config, lastSignature) {
+async function analyzeAndIngest(html, route, origin, rules, config, lastSignature) {
   try {
     const { tags, htmlLang, headings: levels, images: imgs } = parseHtmlHead(html);
     const head = { route, source: "rendered", tags, file: route };
@@ -70,8 +57,6 @@ async function analyzeAndWarn(html, route, origin, rules, config, lastSignature)
     const signature = findingSignature(results, config);
     if (lastSignature.get(route) === signature) return;
     lastSignature.set(route, signature);
-    const report = formatDevReport(route, results, config);
-    if (report) console.warn(report);
     if (globalThis.process?.env?.SVELTE_VITALS_UI) void postIngest(origin, route, results);
   } catch (err) {
     if (globalThis.process?.env?.SVELTE_VITALS_DEBUG) {
@@ -93,7 +78,7 @@ function svelteVitalsHandle(options = {}) {
       transformPageChunk: ({ html, done }) => {
         buffer += html;
         if (done)
-          void analyzeAndWarn(
+          void analyzeAndIngest(
             buffer,
             event.route.id ?? event.url.pathname,
             event.url.origin,

package/dist/index.d.ts

@@ -15,7 +15,12 @@ interface SvelteVitalsOptions {
     outFile?: string;
     /** Override the prerendered-pages directory (default: .svelte-kit/output/prerendered/pages). */
     prerenderDir?: string;
-    /** Serve a live dashboard at /__svelte-vitals/ during `vite dev` (requires svelteVitalsHandle in hooks.server.ts). */
+    /**
+     * Serve a live dashboard at /__svelte-vitals/ during `vite dev` (add
+     * svelteVitalsHandle to hooks.server.ts for accurate, per-route `measured` results
+     * as you browse — the dashboard still works without it, from whole-project static
+     * analysis alone). Default: `true`. Pass `false` to keep only the build-time gate.
+     */
     ui?: boolean;
 }
 /** svelte-vitals Vite/SvelteKit plugin. */

package/dist/index.js

@@ -210,8 +210,9 @@ body{background:var(--ground);color:var(--ink);font-family:var(--sans);line-heig
 .dv-app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:280px 1fr;grid-template-areas:"top top" "side main";height:100vh}
 .dv-topbar{grid-area:top;border-bottom:1px solid var(--line);background:var(--panel)}
 .dv-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 20px}
-.dv-brand{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:16px}
-.dv-brand .bolt{color:var(--accent)}
+.dv-brand{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;border-radius:6px}
+.dv-brand svg{height:28px;width:auto;display:block}
+.dv-brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
 .dv-meta{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
 .dv-status{display:flex;align-items:center;gap:10px}
 .dv-analyzing{font-size:12px;color:var(--accent);font-weight:600}
@@ -268,6 +269,9 @@ body{background:var(--ground);color:var(--ink);font-family:var(--sans);line-heig
 .dv-sev-critical{color:var(--poor)}
 .dv-sev-warning{color:var(--warn)}
 .dv-sev-info{color:var(--faint)}
+.dv-f-route{display:block;font:inherit;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:none;padding:0;margin:8px 0 0;cursor:pointer;text-align:left}
+.dv-f-route:hover{text-decoration:underline}
+.dv-f-route:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .dv-f-loc{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:8px 0 0}
 .dv-f-rec{font-size:14px;margin:10px 0 0}
 .dv-fix{margin:12px 0 0;background:var(--code-bg);border-radius:8px;overflow:hidden}
@@ -293,6 +297,12 @@ var DASHBOARD_SCRIPT = `
   var BAND_COLOR = { good: '#2fa968', warn: '#e8a317', poor: '#e5484d' };
   function scoreBand(score) { return score >= 90 ? 'good' : score >= 50 ? 'warn' : 'poor'; }
 
+  // Same mark as the docs site's hero wordmark (docs/public/wordmark.svg) \u2014 an inline
+  // copy, not an <img src>, since the dashboard is a single self-contained HTML response
+  // with no other static assets to serve alongside it. Fixed brand colors (not CSS custom
+  // properties), matching the docs usage: the wordmark reads the same in both themes.
+  var WORDMARK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 56" role="img" aria-labelledby="dv-wordmark-title"><title id="dv-wordmark-title">svelte-vitals</title><defs><clipPath id="dv-wordmark-clip"><rect x="2" y="2" width="52" height="52" rx="14"/></clipPath></defs><rect x="2" y="2" width="52" height="52" rx="14" fill="#FF3E00"/><polyline clip-path="url(#dv-wordmark-clip)" points="4,28 15,28 17.5,23.5 20,28 23,28 26,7 29,49 32,28 35,28 37,24.5 39.5,28 52,28" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><text x="70" y="38" font-family="ui-sans-serif, system-ui, -apple-system, \\'Segoe UI\\', Roboto, sans-serif" font-size="30" font-weight="700" fill="#FF3E00">svelte-vitals</text></svg>';
+
   function h(tag, attrs, kids) {
     var n = document.createElement(tag);
     if (attrs) {
@@ -418,12 +428,18 @@ var DASHBOARD_SCRIPT = `
     if (sb) sb.classList.toggle('open');
   }
 
+  function brandEl() {
+    var el = h('button', { type: 'button', class: 'dv-brand', 'aria-label': 'Go to Overview', onclick: function () { selectItem('overview'); } }, []);
+    el.innerHTML = WORDMARK_SVG;
+    return el;
+  }
+
   function renderTopbar() {
     var s = state.snapshot;
     var findings = s.report.routes.reduce(function (n, r) { return n + r.issues.length; }, 0) + s.report.siteIssues.length;
     var kids = [
       h('button', { type: 'button', class: 'dv-menu-toggle', 'aria-label': 'Toggle route list', onclick: toggleSidebar, text: '\u2261' }, []),
-      h('div', { class: 'dv-brand' }, [h('span', { class: 'bolt', text: '\u21AF' }, []), document.createTextNode('svelte-vitals')]),
+      brandEl(),
       h('div', { class: 'dv-meta' }, [
         h('span', { text: 'v' + s.meta.version }, []),
         s.meta.coreVersion ? h('span', { title: '@svelte-vitals/core version', text: 'core v' + s.meta.coreVersion }, []) : null,
@@ -567,7 +583,9 @@ var DASHBOARD_SCRIPT = `
     return f === 'all' || issue.severity === f || issue.category === f;
   }
 
-  function renderFinding(issue) {
+  var SEVERITY_ORDER = { critical: 0, warning: 1, info: 2 };
+
+  function renderFinding(issue, route) {
     var kids = [
       h('div', { class: 'dv-f-head' }, [
         h('span', { class: 'dv-ruleid', text: issue.id }, []),
@@ -575,6 +593,9 @@ var DASHBOARD_SCRIPT = `
         h('span', { class: 'dv-sev-tag dv-sev-' + issue.severity, text: issue.severity }, [])
       ])
     ];
+    if (route) {
+      kids.push(h('button', { type: 'button', class: 'dv-f-route', onclick: function () { selectItem(route); }, text: route }, []));
+    }
     if (issue.location) {
       kids.push(h('p', { class: 'dv-f-loc', text: issue.location + (issue.line !== undefined ? ':' + issue.line : '') }, []));
     }
@@ -631,11 +652,23 @@ var DASHBOARD_SCRIPT = `
       ]);
     });
     var chips = renderFilterChips(s.report.categories);
-    var siteFindings = s.report.siteIssues.filter(passesFilter);
-    var siteChecks = s.report.siteIssues.length
-      ? h('section', { class: 'dv-section' }, [h('h2', { text: 'Site checks' }, [])].concat(siteFindings.map(renderFinding)))
-      : null;
-    return h('div', { class: 'dv-overview' }, [gauge, h('div', { class: 'dv-cats' }, cats), chips, siteChecks].filter(Boolean));
+    var totalCount = s.report.routes.reduce(function (n, r) { return n + r.issues.length; }, 0) + s.report.siteIssues.length;
+    var entries = [];
+    s.report.routes.forEach(function (r) {
+      r.issues.forEach(function (issue) { entries.push({ issue: issue, route: r.route }); });
+    });
+    s.report.siteIssues.forEach(function (issue) { entries.push({ issue: issue, route: null }); });
+    entries = entries.filter(function (e) { return passesFilter(e.issue); });
+    entries.sort(function (a, b) {
+      var sd = SEVERITY_ORDER[a.issue.severity] - SEVERITY_ORDER[b.issue.severity];
+      if (sd !== 0) return sd;
+      return (a.route || '').localeCompare(b.route || '');
+    });
+    var body = entries.length
+      ? entries.map(function (e) { return renderFinding(e.issue, e.route); })
+      : [h('p', { class: 'dv-empty', text: totalCount ? 'No issues match the current filter.' : 'No issues found \u2014 nice work!' }, [])];
+    var findings = h('section', { class: 'dv-section' }, [h('h2', { text: 'Findings' }, [])].concat(body));
+    return h('div', { class: 'dv-overview' }, [gauge, h('div', { class: 'dv-cats' }, cats), chips, findings].filter(Boolean));
   }
 
   function renderRouteDetail(route) {
@@ -648,7 +681,9 @@ var DASHBOARD_SCRIPT = `
     ].filter(Boolean));
     var chips = renderFilterChips(state.snapshot.report.categories);
     var findings = route.issues.filter(passesFilter);
-    var body = findings.length ? findings.map(renderFinding) : [h('p', { class: 'dv-empty', text: 'No issues match the current filter.' }, [])];
+    var body = findings.length
+      ? findings.map(function (issue) { return renderFinding(issue); })
+      : [h('p', { class: 'dv-empty', text: 'No issues match the current filter.' }, [])];
     return h('div', { class: 'dv-route-detail' }, [header, chips].concat(body));
   }
 
@@ -1004,7 +1039,7 @@ function svelteVitals(options = {}) {
       }
     }
   };
-  if (!options.ui) return buildPlugin;
+  if (options.ui === false) return buildPlugin;
   const uiPlugin = {
     name: "svelte-vitals:ui",
     apply: "serve",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-vitals/vite",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Vite/SvelteKit plugin for svelte-vitals — analyzes prerendered HTML during vite build.",
   "type": "module",
   "license": "MIT",
@@ -43,11 +43,11 @@
     "node-html-parser": "^9.0.0",
     "tinyglobby": "^0.2.17",
     "@svelte-vitals/core": "0.23.0",
-    "svelte-vitals": "0.23.0"
+    "svelte-vitals": "0.24.0"
   },
   "peerDependencies": {
-    "@sveltejs/kit": "^2.69.1",
-    "vite": "^8.1.3"
+    "@sveltejs/kit": "^2.69.2",
+    "vite": "^8.1.4"
   },
   "peerDependenciesMeta": {
     "@sveltejs/kit": {
@@ -55,10 +55,10 @@
     }
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.69.1",
-    "@types/node": "^24.13.2",
+    "@sveltejs/kit": "^2.69.2",
+    "@types/node": "^24.13.3",
     "svelte": "^5.56.4",
-    "vite": "^8.1.3"
+    "vite": "^8.1.4"
   },
   "scripts": {
     "build": "tsup",