@svelte-vitals/vite 0.13.1 → 0.15.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

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { TreatDynamicAs, RuleSetting, Severity } from '@svelte-vitals/core';
+import { TreatDynamicAs, RuleSetting, Severity, Category } from '@svelte-vitals/core';
 
 interface SvelteVitalsOptions {
     /** Project root (defaults to the Vite config root / cwd). */
@@ -9,13 +9,20 @@ interface SvelteVitalsOptions {
     rules?: Record<string, RuleSetting>;
     /** Minimum severity that fails the build (default: 'critical'). */
     failOn?: Severity;
+    /** Per-category weights for the combined Health score shown in the JSON/console report (flag > config file > default 1 each). */
+    weights?: Partial<Record<Category, number>>;
     /** Report output (default: 'console'). */
     report?: 'console' | 'json' | false;
     /** Write the JSON report to this path. */
     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

@@ -7,8 +7,9 @@ import {
 // src/plugin.ts
 import { existsSync } from "fs";
 import { writeFile, mkdir } from "fs/promises";
-import { join as join4, isAbsolute, dirname, relative, basename, sep } from "path";
+import { join as join4, isAbsolute, dirname, relative as relative2, basename, sep as sep2 } from "path";
 import { defineConfig as defineConfig2 } from "@svelte-vitals/core";
+import { loadConfigFile as loadConfigFile2 } from "svelte-vitals";
 
 // src/analyze.ts
 import {
@@ -23,6 +24,7 @@ import {
   formatJsonReport,
   defineConfig
 } from "@svelte-vitals/core";
+import { loadConfigFile } from "svelte-vitals";
 
 // src/providers/rendered/collect.ts
 import { readFile } from "fs/promises";
@@ -143,11 +145,16 @@ function readCoreVersion() {
 
 // src/analyze.ts
 async function analyze(prerenderPagesDir, cwd, options) {
+  const loaded = await loadConfigFile(cwd);
+  const fileConfig = loaded?.config;
+  const warnings = loaded?.warnings ?? [];
+  const weights = options.weights ?? fileConfig?.weights;
   const config = defineConfig({
-    treatDynamicAs: options.treatDynamicAs ?? "pass",
-    metaComponents: options.metaComponents ?? [],
-    rules: options.rules ?? {},
-    failOn: options.failOn ?? "critical"
+    treatDynamicAs: options.treatDynamicAs ?? fileConfig?.treatDynamicAs ?? "pass",
+    metaComponents: options.metaComponents ?? fileConfig?.metaComponents ?? [],
+    rules: options.rules ?? fileConfig?.rules ?? {},
+    failOn: options.failOn ?? fileConfig?.failOn ?? "critical",
+    ...weights !== void 0 ? { weights } : {}
   });
   const { heads, headings, images, htmlLang } = await collectRenderedHeads(prerenderPagesDir);
   const project = await collectRenderedProject(cwd, htmlLang);
@@ -171,7 +178,8 @@ Scanned ${components.length} component(s) under src/ for Correctness/Security/Ar
     jsonReport,
     routeCount: heads.length,
     failed,
-    failOn: config.failOn
+    failOn: config.failOn,
+    warnings
   };
 }
 
@@ -210,8 +218,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 +277,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 +305,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 +436,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 +591,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 +601,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 +660,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 +689,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));
   }
 
@@ -886,9 +929,11 @@ function createStore() {
 }
 
 // src/ui/analysis.ts
+import { relative, sep } from "path";
 function createAnalysisRunner(opts) {
   const debounceMs = opts.debounceMs ?? 500;
   let cachedAnalyze = opts.analyze;
+  const parseCache = /* @__PURE__ */ new Map();
   let stopped = false;
   let running = false;
   let pending = false;
@@ -911,7 +956,8 @@ function createAnalysisRunner(opts) {
         treatDynamicAs: opts.treatDynamicAs,
         metaComponents: opts.metaComponents,
         rules: opts.rules,
-        failOn: opts.failOn
+        failOn: opts.failOn,
+        parseCache
       });
       if (!stopped) opts.onResults(results);
     } catch (err) {
@@ -930,8 +976,10 @@ function createAnalysisRunner(opts) {
       if (stopped) return;
       void runOnce();
     },
-    notifyChange() {
+    notifyChange(file) {
       if (stopped) return;
+      const rel = relative(opts.root, file).split(sep).join("/");
+      parseCache.delete(rel);
       if (timer !== void 0) clearTimeout(timer);
       timer = setTimeout(() => {
         timer = void 0;
@@ -961,9 +1009,9 @@ var CONFIG_BASENAMES = /* @__PURE__ */ new Set([
 ]);
 var IGNORED_SEGMENTS = /* @__PURE__ */ new Set(["node_modules", ".svelte-kit", "build", "dist"]);
 function isRelevant(file, root) {
-  const rel = relative(root, file);
+  const rel = relative2(root, file);
   if (rel === "" || rel.startsWith("..")) return false;
-  const segments = rel.split(sep);
+  const segments = rel.split(sep2);
   if (segments.some((s) => IGNORED_SEGMENTS.has(s))) return false;
   if (CONFIG_BASENAMES.has(basename(file))) return true;
   return segments[0] === "src" || segments[0] === "static";
@@ -989,6 +1037,7 @@ function svelteVitals(options = {}) {
         console.warn(`svelte-vitals: skipped \u2014 analysis failed: ${err instanceof Error ? err.message : String(err)}`);
         return;
       }
+      for (const w of result.warnings) console.warn(`svelte-vitals: ${w}`);
       if (result.routeCount === 0) return;
       if (options.report !== false) {
         const out = options.report === "json" ? result.jsonReport : result.consoleReport;
@@ -1004,20 +1053,25 @@ function svelteVitals(options = {}) {
       }
     }
   };
-  if (!options.ui) return buildPlugin;
+  if (options.ui === false) return buildPlugin;
   const uiPlugin = {
     name: "svelte-vitals:ui",
     apply: "serve",
-    configureServer(server) {
+    async configureServer(server) {
       process.env.SVELTE_VITALS_UI = "1";
+      const uiRoot = options.cwd ?? server.config.root;
+      const loaded = await loadConfigFile2(uiRoot);
+      const fileConfig = loaded?.config;
+      for (const w of loaded?.warnings ?? []) console.warn(`svelte-vitals: ${w}`);
+      const weights = options.weights ?? fileConfig?.weights;
       const config = defineConfig2({
-        treatDynamicAs: options.treatDynamicAs ?? "pass",
-        metaComponents: options.metaComponents ?? [],
-        rules: options.rules ?? {},
-        failOn: options.failOn ?? "critical"
+        treatDynamicAs: options.treatDynamicAs ?? fileConfig?.treatDynamicAs ?? "pass",
+        metaComponents: options.metaComponents ?? fileConfig?.metaComponents ?? [],
+        rules: options.rules ?? fileConfig?.rules ?? {},
+        failOn: options.failOn ?? fileConfig?.failOn ?? "critical",
+        ...weights !== void 0 ? { weights } : {}
       });
       const store = createStore();
-      const uiRoot = options.cwd ?? server.config.root;
       const runner = createAnalysisRunner({
         root: uiRoot,
         treatDynamicAs: options.treatDynamicAs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-vitals/vite",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Vite/SvelteKit plugin for svelte-vitals — analyzes prerendered HTML during vite build.",
   "type": "module",
   "license": "MIT",
@@ -42,12 +42,12 @@
     "esm-env": "^1.2.2",
     "node-html-parser": "^9.0.0",
     "tinyglobby": "^0.2.17",
-    "@svelte-vitals/core": "0.23.0",
-    "svelte-vitals": "0.23.0"
+    "@svelte-vitals/core": "0.24.0",
+    "svelte-vitals": "0.25.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,11 @@
     }
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.69.1",
-    "@types/node": "^24.13.2",
+    "@sveltejs/kit": "^2.69.2",
+    "@types/node": "^24.13.3",
+    "jsdom": "^29.1.1",
     "svelte": "^5.56.4",
-    "vite": "^8.1.3"
+    "vite": "^8.1.4"
   },
   "scripts": {
     "build": "tsup",