@svelte-vitals/vite 0.3.4 → 0.4.0

package/dist/hooks/index.js

@@ -35,7 +35,33 @@ function findingSignature(results, config) {
 }
 
 // src/hooks/handle.ts
-async function analyzeAndWarn(html, route, rules, config, lastSignature) {
+function isLoopbackOrigin(origin) {
+  try {
+    const host = new URL(origin).hostname;
+    return host === "localhost" || host === "127.0.0.1" || host === "[::1]" || host === "::1";
+  } catch {
+    return false;
+  }
+}
+async function postIngest(origin, route, results) {
+  if (!isLoopbackOrigin(origin)) {
+    if (globalThis.process?.env?.SVELTE_VITALS_DEBUG) {
+      console.warn(
+        `[svelte-vitals] live UI ingest skipped for non-loopback origin ${origin} \u2014 open the dashboard via localhost`
+      );
+    }
+    return;
+  }
+  try {
+    await fetch(`${origin}/__svelte-vitals/ingest`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ route, results })
+    });
+  } catch {
+  }
+}
+async function analyzeAndWarn(html, route, origin, rules, config, lastSignature) {
   try {
     const { tags, htmlLang } = parseHtmlHead(html);
     const head = { route, source: "rendered", tags, file: route };
@@ -46,6 +72,7 @@ async function analyzeAndWarn(html, route, rules, config, lastSignature) {
     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) {
       console.warn("[svelte-vitals] dev analysis failed:", err);
@@ -65,7 +92,15 @@ function svelteVitalsHandle(options = {}) {
     return resolve(event, {
       transformPageChunk: ({ html, done }) => {
         buffer += html;
-        if (done) void analyzeAndWarn(buffer, event.route.id ?? event.url.pathname, rules, config, lastSignature);
+        if (done)
+          void analyzeAndWarn(
+            buffer,
+            event.route.id ?? event.url.pathname,
+            event.url.origin,
+            rules,
+            config,
+            lastSignature
+          );
         return html;
       }
     });

package/dist/index.d.ts

@@ -15,8 +15,10 @@ 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). */
+    ui?: boolean;
 }
 /** svelte-vitals Vite/SvelteKit plugin. */
-declare function svelteVitals(options?: SvelteVitalsOptions): Plugin;
+declare function svelteVitals(options?: SvelteVitalsOptions): Plugin | Plugin[];
 
 export { type SvelteVitalsOptions, svelteVitals };

package/dist/index.js

@@ -6,6 +6,7 @@ import {
 import { existsSync } from "fs";
 import { writeFile, mkdir } from "fs/promises";
 import { join as join3, isAbsolute, dirname } from "path";
+import { defineConfig as defineConfig2 } from "@svelte-vitals/core";
 
 // src/analyze.ts
 import {
@@ -117,11 +118,113 @@ async function analyze(prerenderPagesDir, cwd, options) {
   };
 }
 
+// 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>
+(function(){
+  var es=new EventSource('/__svelte-vitals/events');
+  es.addEventListener('update',function(){
+    fetch('/__svelte-vitals/').then(function(r){return r.text();}).then(function(html){
+      var doc=new DOMParser().parseFromString(html,'text/html');
+      var next=doc.querySelector('.wrap'),cur=document.querySelector('.wrap');
+      if(next&&cur)cur.replaceWith(next);
+      var scripts=doc.querySelectorAll('body > script:not([data-live])');
+      var core=scripts[scripts.length-1];
+      if(core){var s=document.createElement('script');s.textContent=core.textContent;document.body.appendChild(s);s.remove();}
+    }).catch(function(){});
+  });
+})();
+</script>`;
+function renderDashboard(results, config, meta) {
+  const html = buildHtmlDocument(buildJsonReport(results, config, meta), meta);
+  return html.replace("</body>", LIVE_SCRIPT + "</body>");
+}
+
+// src/ui/middleware.ts
+var SEVERITIES = /* @__PURE__ */ new Set(["critical", "warning", "info"]);
+function isResultLike(x) {
+  if (typeof x !== "object" || x === null) return false;
+  const r = x;
+  const d = r.detection;
+  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";
+}
+function installUiMiddleware(server, config, version) {
+  const store = createStore();
+  const clients = /* @__PURE__ */ new Set();
+  store.subscribe(() => {
+    for (const res of clients) {
+      try {
+        res.write("event: update\ndata: {}\n\n");
+      } catch {
+        clients.delete(res);
+      }
+    }
+  });
+  server.httpServer?.once("close", () => {
+    for (const res of clients) res.end();
+    clients.clear();
+  });
+  server.middlewares.use("/__svelte-vitals", (req, res) => {
+    const url = req.url ?? "/";
+    if (req.method === "POST" && url.startsWith("/ingest")) {
+      const chunks = [];
+      req.on("data", (c) => chunks.push(c));
+      req.on("end", () => {
+        try {
+          const { route, results } = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+          if (typeof route === "string" && Array.isArray(results)) {
+            store.set(route, results.filter(isResultLike));
+          }
+        } catch {
+        }
+        res.statusCode = 204;
+        res.end();
+      });
+      return;
+    }
+    if (url.startsWith("/events")) {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive"
+      });
+      res.write("\n");
+      clients.add(res);
+      req.on("close", () => clients.delete(res));
+      return;
+    }
+    res.setHeader("Content-Type", "text/html");
+    res.end(renderDashboard(store.snapshot(), config, { version }));
+  });
+}
+
 // src/plugin.ts
 var DEFAULT_PRERENDER_DIR = ".svelte-kit/output/prerendered/pages";
 function svelteVitals(options = {}) {
   let root = options.cwd ?? process.cwd();
-  return {
+  const buildPlugin = {
     name: "svelte-vitals",
     apply: "build",
     enforce: "post",
@@ -154,6 +257,25 @@ function svelteVitals(options = {}) {
       }
     }
   };
+  if (!options.ui) return buildPlugin;
+  const uiPlugin = {
+    name: "svelte-vitals:ui",
+    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());
+    }
+  };
+  return [buildPlugin, uiPlugin];
 }
 export {
   svelteVitals

package/package.json

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