@svelte-vitals/vite 0.11.0 → 0.12.0

package/dist/index.js

@@ -7,7 +7,7 @@ import {
 // src/plugin.ts
 import { existsSync } from "fs";
 import { writeFile, mkdir } from "fs/promises";
-import { join as join4, isAbsolute, dirname } from "path";
+import { join as join4, isAbsolute, dirname, relative, basename, sep } from "path";
 import { defineConfig as defineConfig2 } from "@svelte-vitals/core";
 
 // src/analyze.ts
@@ -131,6 +131,15 @@ function readPackageVersion() {
     return "0.0.0";
   }
 }
+function readCoreVersion() {
+  try {
+    const entry = import.meta.resolve("@svelte-vitals/core");
+    const pkg = JSON.parse(readFileSync(new URL("../package.json", entry), "utf8"));
+    return pkg.version ?? "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
 
 // src/analyze.ts
 async function analyze(prerenderPagesDir, cwd, options) {
@@ -166,28 +175,6 @@ Scanned ${components.length} component(s) under src/ for Correctness/Security/Ar
   };
 }
 
-// src/ui/store.ts
-function createStore() {
-  const byRoute = /* @__PURE__ */ new Map();
-  const subs = /* @__PURE__ */ new Set();
-  return {
-    set(route, results) {
-      byRoute.set(
-        route,
-        results.map((r) => r.route ? r : { ...r, route })
-      );
-      for (const fn of subs) fn();
-    },
-    snapshot() {
-      return [...byRoute.values()].flat();
-    },
-    subscribe(fn) {
-      subs.add(fn);
-      return () => subs.delete(fn);
-    }
-  };
-}
-
 // src/ui/serve.ts
 import { buildHtmlDocument, buildJsonReport } from "@svelte-vitals/core";
 var LIVE_SCRIPT = `<script data-live>
@@ -205,8 +192,12 @@ var LIVE_SCRIPT = `<script data-live>
   });
 })();
 </script>`;
-function renderDashboard(results, config, meta) {
-  const html = buildHtmlDocument(buildJsonReport(results, config, meta), meta);
+function renderDashboard(results, config, meta, badges) {
+  const html = buildHtmlDocument(
+    buildJsonReport(results, config, meta),
+    meta,
+    badges ? { routeBadges: badges } : void 0
+  );
   return html.replace("</body>", LIVE_SCRIPT + "</body>");
 }
 
@@ -223,8 +214,7 @@ function isResultLike(x) {
   const f = r.fix;
   return typeof r.id === "string" && typeof r.message === "string" && typeof r.severity === "string" && SEVERITIES.has(r.severity) && typeof d === "object" && d !== null && typeof d.presence === "string" && typeof d.value === "string" && (r.category === void 0 || typeof r.category === "string" && CATEGORIES.has(r.category)) && isOptionalString(r.location) && isOptionalString(r.recommendation) && isOptionalString(r.docsUrl) && (f === void 0 || typeof f === "object" && f !== null && typeof f.description === "string" && isOptionalString(f.snippet) && isOptionalString(f.lang)) && (r.line === void 0 || typeof r.line === "number") && isOptionalString(r.route);
 }
-function installUiMiddleware(server, config, version) {
-  const store = createStore();
+function installUiMiddleware(server, config, version, store, coreVersion) {
   const clients = /* @__PURE__ */ new Set();
   store.subscribe(() => {
     for (const res of clients) {
@@ -277,7 +267,7 @@ function installUiMiddleware(server, config, version) {
       return;
     }
     try {
-      const html = renderDashboard(store.snapshot(), config, { version });
+      const html = renderDashboard(store.snapshot(), config, { version, coreVersion }, store.badges());
       res.setHeader("Content-Type", "text/html");
       res.end(html);
     } catch {
@@ -287,7 +277,150 @@ function installUiMiddleware(server, config, version) {
   });
 }
 
+// src/ui/store.ts
+function composeSnapshot(staticResults, liveByRoute) {
+  const staticByRoute = /* @__PURE__ */ new Map();
+  const routeless = [];
+  for (const r of staticResults) {
+    if (r.route) {
+      const bucket = staticByRoute.get(r.route);
+      if (bucket) bucket.push(r);
+      else staticByRoute.set(r.route, [r]);
+    } else {
+      routeless.push(r);
+    }
+  }
+  const out = [...routeless];
+  for (const [route, live] of liveByRoute) {
+    const liveIds = new Set(live.map((r) => r.id));
+    const staticForRoute = staticByRoute.get(route) ?? [];
+    out.push(...staticForRoute.filter((r) => !liveIds.has(r.id)), ...live);
+    staticByRoute.delete(route);
+  }
+  for (const remaining of staticByRoute.values()) out.push(...remaining);
+  return out;
+}
+function composeBadges(staticResults, liveByRoute) {
+  const badges = {};
+  for (const r of staticResults) {
+    if (r.route) badges[r.route] = "static";
+  }
+  for (const route of liveByRoute.keys()) badges[route] = "measured";
+  return badges;
+}
+function createStore() {
+  let staticResults = [];
+  const liveByRoute = /* @__PURE__ */ new Map();
+  const subs = /* @__PURE__ */ new Set();
+  function notify() {
+    for (const fn of subs) fn();
+  }
+  return {
+    set(route, results) {
+      liveByRoute.set(
+        route,
+        results.map((r) => r.route ? r : { ...r, route })
+      );
+      notify();
+    },
+    setStatic(results) {
+      staticResults = results;
+      notify();
+    },
+    snapshot() {
+      return composeSnapshot(staticResults, liveByRoute);
+    },
+    badges() {
+      return composeBadges(staticResults, liveByRoute);
+    },
+    subscribe(fn) {
+      subs.add(fn);
+      return () => subs.delete(fn);
+    }
+  };
+}
+
+// src/ui/analysis.ts
+function createAnalysisRunner(opts) {
+  const debounceMs = opts.debounceMs ?? 500;
+  let cachedAnalyze = opts.analyze;
+  let stopped = false;
+  let running = false;
+  let pending = false;
+  let timer;
+  async function getAnalyze() {
+    if (cachedAnalyze) return cachedAnalyze;
+    const mod = await import("svelte-vitals");
+    const fn = (o) => mod.analyzeProject(o);
+    cachedAnalyze = fn;
+    return fn;
+  }
+  async function runOnce() {
+    if (stopped) return;
+    running = true;
+    try {
+      const analyze2 = await getAnalyze();
+      const { results } = await analyze2({
+        cwd: opts.root,
+        treatDynamicAs: opts.treatDynamicAs,
+        metaComponents: opts.metaComponents,
+        rules: opts.rules,
+        failOn: opts.failOn
+      });
+      if (!stopped) opts.onResults(results);
+    } catch (err) {
+      if (!stopped) opts.onError(err);
+    } finally {
+      running = false;
+      if (!stopped && pending) {
+        pending = false;
+        void runOnce();
+      }
+    }
+  }
+  return {
+    start() {
+      if (stopped) return;
+      void runOnce();
+    },
+    notifyChange() {
+      if (stopped) return;
+      if (timer !== void 0) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = void 0;
+        if (stopped) return;
+        if (running) pending = true;
+        else void runOnce();
+      }, debounceMs);
+    },
+    stop() {
+      stopped = true;
+      if (timer !== void 0) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+      pending = false;
+    }
+  };
+}
+
 // src/plugin.ts
+var CONFIG_BASENAMES = /* @__PURE__ */ new Set([
+  "svelte.config.js",
+  "svelte.config.ts",
+  "svelte-vitals.config.mjs",
+  "svelte-vitals.config.js",
+  "svelte-vitals.config.ts"
+]);
+var IGNORED_SEGMENTS = /* @__PURE__ */ new Set(["node_modules", ".svelte-kit", "build", "dist"]);
+function isRelevant(file, root) {
+  const rel = relative(root, file);
+  if (rel === "" || rel.startsWith("..")) return false;
+  const segments = rel.split(sep);
+  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";
+}
 var DEFAULT_PRERENDER_DIR = ".svelte-kit/output/prerendered/pages";
 function svelteVitals(options = {}) {
   let root = options.cwd ?? process.cwd();
@@ -330,16 +463,32 @@ function svelteVitals(options = {}) {
     apply: "serve",
     configureServer(server) {
       process.env.SVELTE_VITALS_UI = "1";
-      server.httpServer?.once("close", () => {
-        delete process.env.SVELTE_VITALS_UI;
-      });
       const config = defineConfig2({
         treatDynamicAs: options.treatDynamicAs ?? "pass",
         metaComponents: options.metaComponents ?? [],
         rules: options.rules ?? {},
         failOn: options.failOn ?? "critical"
       });
-      installUiMiddleware(server, config, readPackageVersion());
+      const store = createStore();
+      const uiRoot = options.cwd ?? server.config.root;
+      const runner = createAnalysisRunner({
+        root: uiRoot,
+        treatDynamicAs: options.treatDynamicAs,
+        metaComponents: options.metaComponents,
+        rules: options.rules,
+        failOn: options.failOn,
+        onResults: (results) => store.setStatic(results),
+        onError: (err) => console.warn("[svelte-vitals] dev analysis failed:", err)
+      });
+      runner.start();
+      server.watcher?.on("all", (_event, file) => {
+        if (isRelevant(file, uiRoot)) runner.notifyChange(file);
+      });
+      server.httpServer?.once("close", () => {
+        delete process.env.SVELTE_VITALS_UI;
+        runner.stop();
+      });
+      installUiMiddleware(server, config, readPackageVersion(), store, readCoreVersion());
     }
   };
   return [buildPlugin, uiPlugin];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-vitals/vite",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Vite/SvelteKit plugin for svelte-vitals — analyzes prerendered HTML during vite build.",
   "type": "module",
   "license": "MIT",
@@ -42,7 +42,8 @@
     "esm-env": "^1.2.2",
     "node-html-parser": "^8.0.4",
     "tinyglobby": "^0.2.17",
-    "@svelte-vitals/core": "0.20.0"
+    "@svelte-vitals/core": "0.22.0",
+    "svelte-vitals": "0.21.0"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.69.1",