@nuxt/hints 1.0.0-alpha.3 → 1.0.0-alpha.4

package/dist/runtime/hydration/composables.js

@@ -1,26 +1,6 @@
 import { getCurrentInstance, onMounted } from "vue";
 import { useNuxtApp } from "#imports";
-function formatHTML(html) {
-  if (!html) return "";
-  let formatted = "";
-  let indent = 0;
-  const tags = html.split(/(<\/?[^>]+>)/g);
-  for (const tag of tags) {
-    if (!tag.trim()) continue;
-    if (tag.startsWith("</")) {
-      indent--;
-      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag;
-    } else if (tag.startsWith("<") && !tag.endsWith("/>") && !tag.includes("<!")) {
-      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag;
-      indent++;
-    } else if (tag.startsWith("<")) {
-      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag;
-    } else {
-      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag.trim();
-    }
-  }
-  return formatted.trim();
-}
+import { HYDRATION_ROUTE, formatHTML } from "./utils.js";
 export function useHydrationCheck() {
   if (import.meta.server) return;
   const nuxtApp = useNuxtApp();
@@ -29,16 +9,26 @@ export function useHydrationCheck() {
   }
   const instance = getCurrentInstance();
   if (!instance) return;
-  const htmlPrehydration = formatHTML(instance.vnode.el?.outerHTML);
+  const htmlPreHydration = formatHTML(instance.vnode.el?.outerHTML);
   const vnodePrehydration = instance.vnode;
   onMounted(() => {
     const htmlPostHydration = formatHTML(instance.vnode.el?.outerHTML);
-    if (htmlPrehydration !== htmlPostHydration) {
+    if (htmlPreHydration !== htmlPostHydration) {
+      const payload = {
+        htmlPreHydration,
+        htmlPostHydration,
+        id: globalThis.crypto.randomUUID(),
+        componentName: instance.type.name ?? instance.type.displayName ?? instance.type.__name,
+        fileLocation: instance.type.__file ?? "unknown"
+      };
       nuxtApp.__hints.hydration.push({
+        ...payload,
         instance,
-        vnode: vnodePrehydration,
-        htmlPreHydration: htmlPrehydration,
-        htmlPostHydration
+        vnode: vnodePrehydration
+      });
+      $fetch(new URL(HYDRATION_ROUTE, window.location.origin).href, {
+        method: "POST",
+        body: payload
       });
       console.warn(`[nuxt/hints:hydration] Component ${instance.type.name ?? instance.type.displayName ?? instance.type.__name ?? instance.type.__file} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`);
     }

package/dist/runtime/hydration/handler.nitro.d.ts

@@ -0,0 +1,5 @@
+import type { HydrationMismatchPayload } from './types.js';
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void> | {
+    mismatches: HydrationMismatchPayload[];
+}>;
+export default _default;

package/dist/runtime/hydration/handler.nitro.js

@@ -0,0 +1,52 @@
+import { createError, defineEventHandler, readBody, setResponseStatus } from "h3";
+import { useNitroApp } from "nitropack/runtime";
+const hydrationMismatches = [];
+export default defineEventHandler((event) => {
+  switch (event.method) {
+    case "GET":
+      return getHandler();
+    case "POST":
+      return postHandler(event);
+    case "DELETE":
+      return deleteHandler(event);
+    default:
+      throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" });
+  }
+});
+function getHandler() {
+  return {
+    mismatches: hydrationMismatches
+  };
+}
+async function postHandler(event) {
+  const body = await readBody(event);
+  assertPayload(body);
+  const nitro = useNitroApp();
+  const payload = { id: body.id, htmlPreHydration: body.htmlPreHydration, htmlPostHydration: body.htmlPostHydration, componentName: body.componentName, fileLocation: body.fileLocation };
+  hydrationMismatches.push(payload);
+  if (hydrationMismatches.length > 20) {
+    hydrationMismatches.shift();
+  }
+  nitro.hooks.callHook("hints:hydration:mismatch", payload);
+  setResponseStatus(event, 201);
+}
+async function deleteHandler(event) {
+  const nitro = useNitroApp();
+  const body = await readBody(event);
+  if (!body || !Array.isArray(body.id)) {
+    throw createError({ statusCode: 400, statusMessage: "Invalid payload" });
+  }
+  for (const id of body.id) {
+    const index = hydrationMismatches.findIndex((m) => m.id === id);
+    if (index !== -1) {
+      hydrationMismatches.splice(index, 1);
+    }
+  }
+  nitro.hooks.callHook("hints:hydration:cleared", { id: body.id });
+  setResponseStatus(event, 204);
+}
+function assertPayload(body) {
+  if (typeof body !== "object" || typeof body.id !== "string" || body.htmlPreHydration !== void 0 && typeof body.htmlPreHydration !== "string" || body.htmlPostHydration !== void 0 && typeof body.htmlPostHydration !== "string" || typeof body.componentName !== "string" || typeof body.fileLocation !== "string") {
+    throw createError({ statusCode: 400, statusMessage: "Invalid payload" });
+  }
+}

package/dist/runtime/hydration/plugin.client.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: any;
 export default _default;

package/dist/runtime/hydration/sse.nitro.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void>>;
+export default _default;

package/dist/runtime/hydration/sse.nitro.js

@@ -0,0 +1,22 @@
+import { createEventStream, defineEventHandler } from "h3";
+import { useNitroApp } from "nitropack/runtime";
+export default defineEventHandler((event) => {
+  const nitro = useNitroApp();
+  const eventStream = createEventStream(event);
+  const unsubs = [nitro.hooks.hook("hints:hydration:mismatch", (mismatch) => {
+    eventStream.push({
+      data: JSON.stringify(mismatch),
+      event: "hints:hydration:mismatch"
+    });
+  }), nitro.hooks.hook("hints:hydration:cleared", async (payload) => {
+    eventStream.push({
+      data: JSON.stringify(payload.id),
+      event: "hints:hydration:cleared"
+    });
+  })];
+  eventStream.onClosed(async () => {
+    unsubs.forEach((unsub) => unsub());
+    await eventStream.close();
+  });
+  return eventStream.send();
+});

package/dist/runtime/hydration/types.d.ts

@@ -0,0 +1,29 @@
+import type { EventStreamMessage } from 'h3';
+import type { ComponentInternalInstance, VNode } from 'vue';
+export interface HydrationMismatchPayload {
+    id: string;
+    componentName?: string;
+    fileLocation: string;
+    htmlPreHydration: string;
+    htmlPostHydration: string;
+}
+export interface LocalHydrationMismatch extends HydrationMismatchPayload {
+    instance: ComponentInternalInstance;
+    vnode: VNode;
+}
+export interface HydrationMismatchResponse {
+    mismatches: HydrationMismatchPayload[];
+}
+export interface HydrationDeleteSSE extends EventStreamMessage {
+    event: 'hydration:cleared';
+    data: string;
+}
+export interface HydrationNewSSE extends EventStreamMessage {
+    event: 'hydration:mismatch';
+    /**
+     * Stringified HydrationMismatchPayload
+     * @see HydrationMismatchPayload
+     */
+    data: string;
+}
+export type HydrationSSEPayload = HydrationDeleteSSE | HydrationNewSSE;

package/dist/runtime/hydration/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const HYDRATION_ROUTE = "/__nuxt_hydration";
+export declare const HYDRATION_SSE_ROUTE = "/__nuxt_hydration/sse";
+export declare function formatHTML(html: string | undefined): string;

package/dist/runtime/hydration/utils.js

@@ -0,0 +1,23 @@
+export const HYDRATION_ROUTE = "/__nuxt_hydration";
+export const HYDRATION_SSE_ROUTE = "/__nuxt_hydration/sse";
+export function formatHTML(html) {
+  if (!html) return "";
+  let formatted = "";
+  let indent = 0;
+  const tags = html.split(/(<\/?[^>]+>)/g);
+  for (const tag of tags) {
+    if (!tag.trim()) continue;
+    if (tag.startsWith("</")) {
+      indent--;
+      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag;
+    } else if (tag.startsWith("<") && !tag.endsWith("/>") && !tag.includes("<!")) {
+      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag;
+      indent++;
+    } else if (tag.startsWith("<")) {
+      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag;
+    } else {
+      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag.trim();
+    }
+  }
+  return formatted.trim();
+}

package/dist/runtime/third-party-scripts/nitro.plugin.js

@@ -36,9 +36,9 @@ function __hints_TPC_saveTime(script, startTime) {
 for (const script of document.scripts) {
     if (script.src && !script.src.startsWith(window.location.origin)) {
         script.__hints_TPC_start_time = window.__hints_TPC_start_time || Date.now();
-        script.onload = function(_) {
+        script.addEventListener('load', () => {
             __hints_TPC_saveTime(script, script.__hints_TPC_start_time);
-        }
+        })
         __hints_TPC_saveTime(script, script.__hints_TPC_start_time);
     }
 }

package/dist/runtime/third-party-scripts/plugin.client.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: any;
 export default _default;

package/dist/runtime/third-party-scripts/plugin.client.js

@@ -70,10 +70,10 @@ export default defineNuxtPlugin({
       }
       nuxtApp.callHook("hints:scripts:added", script).then(() => {
         if (!script.loaded) {
-          script.onload = () => {
+          script.addEventListener("load", () => {
             window.__hints_TPC_saveTime(script, script.__hints_TPC_start_time);
             nuxtApp.callHook("hints:scripts:loaded", script);
-          };
+          });
         } else {
           window.__hints_TPC_saveTime(script, script.__hints_TPC_start_time);
           nuxtApp.callHook("hints:scripts:loaded", script);

package/dist/runtime/types.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentInternalInstance, VNode, Ref } from 'vue'
+import type { VNode, Ref } from 'vue'
 import type { LCPMetricWithAttribution, INPMetricWithAttribution, CLSMetricWithAttribution } from 'web-vitals/attribution'
+import type { HydrationMismatchPayload, LocalHydrationMismatch } from './hydration/types'
 
 declare global {
   interface Window {
@@ -19,6 +20,7 @@ declare global {
     __vnode?: VNode
   }
 }
+
 declare module '#app' {
   interface RuntimeNuxtHooks {
     'hints:scripts:added': (script: HTMLScriptElement) => void
@@ -33,7 +35,7 @@ declare module '#app' {
   interface NuxtApp {
     __hints_tpc: Ref<{ element: HTMLScriptElement, loaded: boolean }[]>
     __hints: {
-      hydration: { instance: ComponentInternalInstance, vnode: VNode, htmlPreHydration: string | undefined, htmlPostHydration: string | undefined }[]
+      hydration: LocalHydrationMismatch[]
       webvitals: {
         lcp: Ref<LCPMetricWithAttribution[]>
         inp: Ref<INPMetricWithAttribution[]>
@@ -45,4 +47,11 @@ declare module '#app' {
   }
 }
 
+declare module 'nitropack' {
+  interface NitroRuntimeHooks {
+    'hints:hydration:mismatch': (payload: HydrationMismatchPayload) => void
+    'hints:hydration:cleared': (payload: { id: string[] }) => void
+  }
+}
+
 export {}

package/dist/runtime/web-vitals/plugin.client.d.ts

@@ -9,5 +9,5 @@ declare global {
         value?: number;
     }
 }
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: any;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/hints",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "Nuxt module that shows hints for aspects of your application such as Performance, Security, and more!",
   "repository": "https://github.com/nuxt/hints",
   "homepage": "https://github.com/nuxt/hints",
@@ -27,7 +27,7 @@
     "knitwork": "^1.3.0",
     "magic-string": "^0.30.19",
     "nitropack": "^2.12.6",
-    "oxc-parser": "^0.99.0",
+    "oxc-parser": "^0.103.0",
     "shiki": "^3.13.0",
     "sirv": "^3.0.2",
     "unplugin": "^2.3.10",
@@ -48,11 +48,11 @@
     "diff": "^8.0.2",
     "eslint": "^9.36.0",
     "happy-dom": "^20.0.10",
-    "pkg-pr-new": "0.0.60",
+    "pkg-pr-new": "0.0.62",
     "rimraf": "^6.0.1",
     "sass-embedded": "^1.93.3",
     "vitest": "^4.0.0",
-    "@nuxt/hints": "^1.0.0-alpha.3"
+    "@nuxt/hints": "^1.0.0-alpha.4"
   },
   "scripts": {
     "client:build": "nuxi generate client",

package/dist/client/_nuxt/BAIAvlAa.js

@@ -1 +0,0 @@
-import g from"./CeyKylGo.js";import{_ as h,c as f,o,r as k,g as w,j as N,b as e,w as s,a as t,k as m,l as u,m as n,d as p,t as x}from"./Ckm7x3qc.js";import{u as C,a as V,_ as $}from"./CzzNqrSg.js";import{_ as B}from"./s2_R2YM5.js";import{_ as S}from"./REBTOKr5.js";const j={},H={class:"n-badge"};function L(d,r){return o(),f("span",H,[k(d.$slots,"default")])}const z=Object.assign(h(j,[["render",L]]),{__name:"NBadge"}),I={class:"grid grid-cols-1 md:grid-cols-3 gap-3 p-4"},P={class:"flex items-center gap-3 min-w-0"},T={class:"flex items-center gap-3 min-w-0"},R=w({__name:"index",setup(d){const{allMetrics:r}=C(),{hydration:b}=V(),_=N(()=>b.length||0);return(W,a)=>{const l=g,v=z,c=$,i=B,y=S;return o(),f("div",I,[e(i,{to:"/web-vitals",class:"block"},{default:s(()=>[e(c,{class:"flex items-center justify-between p-4 hover:border-neutral-400 dark:hover:border-neutral-500"},{default:s(()=>[t("div",P,[e(l,{name:"material-symbols:monitoring",class:"text-xl text-blue-500"}),a[0]||(a[0]=t("div",{class:"min-w-0"},[t("div",{class:"text-sm font-medium truncate"}," Web Vitals "),t("div",{class:"text-xs text-neutral-500"}," LCP / INP / CLS ")],-1))]),n(r).length?(o(),m(v,{key:0},{default:s(()=>[p(x(n(r).length)+" issues ",1)]),_:1})):u("",!0)]),_:1})]),_:1}),e(i,{to:"/hydration",class:"block"},{default:s(()=>[e(c,{class:"flex items-center justify-between p-4 hover:border-neutral-400 dark:hover:border-neutral-500"},{default:s(()=>[t("div",T,[e(l,{name:"material-symbols:water-full",class:"text-xl text-cyan-500"}),a[1]||(a[1]=t("div",{class:"min-w-0"},[t("div",{class:"text-sm font-medium truncate"}," Hydration "),t("div",{class:"text-xs text-neutral-500"}," SSR vs client diffs ")],-1))]),n(_)?(o(),m(y,{key:0,size:"small",type:"error",bordered:!1},{default:s(()=>[p(x(n(_))+" issues ",1)]),_:1})):u("",!0)]),_:1})]),_:1}),e(i,{to:"/third-party-scripts",class:"block"},{default:s(()=>[e(c,{class:"p-4 flex items-center gap-3 hover:border-neutral-400 dark:hover:border-neutral-500"},{default:s(()=>[e(l,{name:"material-symbols:extension",class:"text-xl text-violet-500"}),a[2]||(a[2]=t("div",{class:"min-w-0"},[t("div",{class:"text-sm font-medium truncate"}," Third party scripts "),t("div",{class:"text-xs text-neutral-500"}," Analyze third-party scripts speed. ")],-1))]),_:1})]),_:1})])}}});export{R as default};