@nuxt/hints 0.0.0 → 1.0.0-alpha.10

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

@@ -0,0 +1,65 @@
+import { createError, defineEventHandler, readBody, setResponseStatus } from "h3";
+const hydrationMismatches = [];
+export default function(nitroApp) {
+  const getHandler = defineEventHandler(() => {
+    return {
+      mismatches: hydrationMismatches
+    };
+  });
+  const postHandler = defineEventHandler(async (event) => {
+    const body = await readBody(event);
+    assertPayload(body);
+    const payload = {
+      id: crypto.randomUUID(),
+      htmlPreHydration: body.htmlPreHydration,
+      htmlPostHydration: body.htmlPostHydration,
+      componentName: body.componentName,
+      fileLocation: body.fileLocation
+    };
+    hydrationMismatches.push(payload);
+    if (hydrationMismatches.length > 20) {
+      hydrationMismatches.shift();
+    }
+    nitroApp.hooks.callHook("hints:hydration:mismatch", payload);
+    setResponseStatus(event, 201);
+    return payload;
+  });
+  const deleteHandler = defineEventHandler(async (event) => {
+    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);
+      }
+    }
+    nitroApp.hooks.callHook("hints:hydration:cleared", { id: body.id });
+    setResponseStatus(event, 204);
+  });
+  nitroApp.router.add("/__nuxt_hints/hydration", getHandler, "get");
+  nitroApp.router.add("/__nuxt_hints/hydration", postHandler, "post");
+  nitroApp.router.add("/__nuxt_hints/hydration", deleteHandler, "delete");
+  nitroApp.hooks.hook("hints:sse:setup", (context) => {
+    context.unsubscribers.push(
+      nitroApp.hooks.hook("hints:hydration:mismatch", (mismatch) => {
+        context.eventStream.push({
+          data: JSON.stringify(mismatch),
+          event: "hints:hydration:mismatch"
+        });
+      }),
+      nitroApp.hooks.hook("hints:hydration:cleared", (payload) => {
+        context.eventStream.push({
+          data: JSON.stringify(payload.id),
+          event: "hints:hydration:cleared"
+        });
+      })
+    );
+  });
+  function assertPayload(body) {
+    if (typeof body !== "object" || 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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/hydration/plugin.client.js

@@ -0,0 +1,11 @@
+import { defineNuxtPlugin, useNuxtApp } from "#imports";
+import { defu } from "defu";
+export default defineNuxtPlugin({
+  name: "@nuxt/hints:hydration",
+  setup() {
+    const nuxtApp = useNuxtApp();
+    nuxtApp.payload.__hints = defu(nuxtApp.payload.__hints, {
+      hydration: []
+    });
+  }
+});

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,4 @@
+export declare const logger: import("consola").ConsolaInstance;
+export declare const HYDRATION_ROUTE = "/__nuxt_hints/hydration";
+export declare const HYDRATION_SSE_ROUTE = "/__nuxt_hints/sse";
+export declare function formatHTML(html: string | undefined): string;

package/dist/runtime/hydration/utils.js

@@ -0,0 +1,26 @@
+import { HINTS_ROUTE, HINTS_SSE_ROUTE } from "../core/server/types.js";
+import { createHintsLogger } from "../logger.js";
+export const logger = createHintsLogger("hydration");
+export const HYDRATION_ROUTE = `${HINTS_ROUTE}/hydration`;
+export const HYDRATION_SSE_ROUTE = HINTS_SSE_ROUTE;
+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/lazy-load/composables.d.ts

@@ -0,0 +1,11 @@
+import type { DefineComponent } from 'vue';
+import type { DirectImportInfo } from './schema.js';
+export declare function useLazyComponentTracking(components?: DirectImportInfo[]): any;
+/**
+ * Wrap components definition like with defineComponent or defineNuxtComponent or just sfc exports
+ */
+export declare function __wrapMainComponent(component: DefineComponent, imports?: DirectImportInfo[]): DefineComponent;
+/**
+ * Wrap imported components to track their usage.
+ */
+export declare function __wrapImportedComponent(component: DefineComponent, componentName: string, importSource: string, importedBy: string): DefineComponent;

package/dist/runtime/lazy-load/composables.js

@@ -0,0 +1,52 @@
+import { useNuxtApp } from "#imports";
+import { defu } from "defu";
+export function useLazyComponentTracking(components = []) {
+  const nuxtApp = useNuxtApp();
+  if (!nuxtApp.payload.__hints?.lazyHydrationState) {
+    nuxtApp.payload.__hints = defu(nuxtApp.payload.__hints, {
+      lazyHydrationState: {
+        directImports: /* @__PURE__ */ new Map(),
+        hasReported: false,
+        pageLoaded: false
+      }
+    });
+  }
+  const state = nuxtApp.payload.__hints.lazyHydrationState;
+  for (const comp of components) {
+    state.directImports.set(comp.componentName, comp);
+  }
+  return state;
+}
+export function __wrapMainComponent(component, imports = []) {
+  const originalSetup = component.setup;
+  component.setup = (props, ctx) => {
+    useLazyComponentTracking(imports);
+    return originalSetup ? originalSetup(props, ctx) : void 0;
+  };
+  return component;
+}
+export function __wrapImportedComponent(component, componentName, importSource, importedBy) {
+  if (component && component.name === "AsyncComponentWrapper") {
+    return component;
+  }
+  const originalSetup = component.setup;
+  component.setup = (props, ctx) => {
+    const state = useLazyComponentTracking();
+    if (state) {
+      if (!state.directImports.has(componentName)) {
+        state.directImports.set(componentName, {
+          componentName,
+          importSource,
+          importedBy,
+          rendered: false
+        });
+      }
+      const info = state.directImports.get(componentName);
+      if (info) {
+        info.rendered = true;
+      }
+    }
+    return originalSetup ? originalSetup(props, ctx) : void 0;
+  };
+  return component;
+}

package/dist/runtime/lazy-load/nitro.plugin.d.ts

@@ -0,0 +1,2 @@
+import type { NitroApp } from 'nitropack/types';
+export default function (nitroApp: NitroApp): void;

package/dist/runtime/lazy-load/nitro.plugin.js

@@ -0,0 +1,59 @@
+import { createError, defineEventHandler, setResponseStatus, readBody } from "h3";
+import { ComponentLazyLoadDataSchema } from "./schema.js";
+import { parse, ValiError } from "valibot";
+import { LAZY_LOAD_ROUTE } from "./utils.js";
+const data = [];
+export default function(nitroApp) {
+  const getHandler = defineEventHandler(() => {
+    return data;
+  });
+  const postHandler = defineEventHandler(async (event) => {
+    const body = await readBody(event);
+    let parsed;
+    try {
+      parsed = parse(ComponentLazyLoadDataSchema, body);
+    } catch (error) {
+      if (error instanceof ValiError) {
+        setResponseStatus(event, 400);
+        return { error: "Validation failed", message: error.message };
+      }
+      throw error;
+    }
+    data.push(parsed);
+    nitroApp.hooks.callHook("hints:lazy-load:report", parsed);
+    setResponseStatus(event, 201);
+  });
+  const deleteHandler = defineEventHandler(async (event) => {
+    const id = event.context.params?.id;
+    if (!id) {
+      throw createError({ statusCode: 400, message: "ID is required" });
+    }
+    const index = data.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      data.splice(index, 1);
+    } else {
+      throw createError({ statusCode: 404, message: "Entry not found" });
+    }
+    nitroApp.hooks.callHook("hints:lazy-load:cleared", { id });
+    setResponseStatus(event, 204);
+  });
+  nitroApp.router.add(LAZY_LOAD_ROUTE, getHandler, "get");
+  nitroApp.router.add(LAZY_LOAD_ROUTE, postHandler, "post");
+  nitroApp.router.add(`${LAZY_LOAD_ROUTE}/:id`, deleteHandler, "delete");
+  nitroApp.hooks.hook("hints:sse:setup", (context) => {
+    context.unsubscribers.push(
+      nitroApp.hooks.hook("hints:lazy-load:report", (payload) => {
+        context.eventStream.push({
+          data: JSON.stringify(payload),
+          event: "hints:lazy-load:report"
+        });
+      }),
+      nitroApp.hooks.hook("hints:lazy-load:cleared", (payload) => {
+        context.eventStream.push({
+          data: JSON.stringify(payload.id),
+          event: "hints:lazy-load:cleared"
+        });
+      })
+    );
+  });
+}

package/dist/runtime/lazy-load/plugin.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/lazy-load/plugin.client.js

@@ -0,0 +1,73 @@
+import { defineNuxtPlugin, useNuxtApp, useRoute } from "#imports";
+import { defu } from "defu";
+import { useLazyComponentTracking } from "./composables.js";
+import { logger, LAZY_LOAD_ROUTE } from "./utils.js";
+import { isFeatureDevtoolsEnabled } from "../core/features.js";
+export default defineNuxtPlugin({
+  name: "@nuxt/hints:lazy-load",
+  dependsOn: ["nuxt:router"],
+  setup() {
+    const nuxtApp = useNuxtApp();
+    nuxtApp.payload.__hints = defu(nuxtApp.payload.__hints, {
+      lazyComponents: []
+    });
+    if (import.meta.client) {
+      const state = useLazyComponentTracking();
+      if (!state) return;
+      nuxtApp.hook("app:suspense:resolve", () => {
+        if (state.hasReported || state.pageLoaded) return;
+        state.pageLoaded = true;
+        setTimeout(() => {
+          nuxtApp.runWithContext(() => checkAndReport(state));
+        }, 500);
+      });
+    }
+  }
+});
+function checkAndReport(state) {
+  if (state.hasReported) return;
+  state.hasReported = true;
+  const suggestions = [];
+  for (const [_, info] of state.directImports) {
+    if (!info.rendered) {
+      suggestions.push(info);
+    }
+  }
+  if (suggestions.length > 0) {
+    reportSuggestions(suggestions);
+  }
+}
+function reportSuggestions(suggestions) {
+  const route = useRoute();
+  const nuxtApp = useNuxtApp();
+  nuxtApp.payload.__hints.lazyComponents = suggestions;
+  logger.info(
+    `${suggestions.length} component has not been rendered in SSR nor rendered at hydration time. Consider lazy loading it:
+`
+  );
+  for (const suggestion of suggestions) {
+    const lazyName = `Lazy${suggestion.componentName}`;
+    logger.info(
+      `${suggestion.componentName} \u2192 Use <${lazyName}> or \`defineAsyncComponent\` instead
+  Imported from: ${suggestion.importSource}
+  Used in: ${suggestion.importedBy}`
+    );
+  }
+  if (suggestions.length && isFeatureDevtoolsEnabled("lazyLoad")) {
+    const payload = {
+      id: `${encodeURIComponent(route.path)}-${Date.now()}`,
+      route: route.path,
+      state: {
+        pageLoaded: true,
+        hasReported: true,
+        directImports: suggestions
+      }
+    };
+    $fetch(LAZY_LOAD_ROUTE, {
+      method: "POST",
+      body: payload
+    }).catch((err) => {
+      logger.warn("Failed to send lazy-load data to server:", err);
+    });
+  }
+}

package/dist/runtime/lazy-load/schema.d.ts

@@ -0,0 +1,28 @@
+import type { InferOutput } from 'valibot';
+export declare const ComponentLazyLoadImportSchema: import("valibot").ObjectSchema<{
+    readonly componentName: import("valibot").StringSchema<undefined>;
+    readonly importSource: import("valibot").StringSchema<undefined>;
+    readonly importedBy: import("valibot").StringSchema<undefined>;
+    readonly rendered: import("valibot").BooleanSchema<undefined>;
+}, undefined>;
+export type DirectImportInfo = InferOutput<typeof ComponentLazyLoadImportSchema>;
+export declare const ComponentLazyLoadDataSchema: import("valibot").ObjectSchema<{
+    readonly id: import("valibot").StringSchema<undefined>;
+    readonly route: import("valibot").StringSchema<undefined>;
+    readonly state: import("valibot").ObjectSchema<{
+        readonly pageLoaded: import("valibot").BooleanSchema<undefined>;
+        readonly hasReported: import("valibot").BooleanSchema<undefined>;
+        readonly directImports: import("valibot").ArraySchema<import("valibot").ObjectSchema<{
+            readonly componentName: import("valibot").StringSchema<undefined>;
+            readonly importSource: import("valibot").StringSchema<undefined>;
+            readonly importedBy: import("valibot").StringSchema<undefined>;
+            readonly rendered: import("valibot").BooleanSchema<undefined>;
+        }, undefined>, undefined>;
+    }, undefined>;
+}, undefined>;
+export type ComponentLazyLoadData = InferOutput<typeof ComponentLazyLoadDataSchema>;
+export type ComponentLazyLoadState = {
+    directImports: Map<string, DirectImportInfo>;
+    hasReported: boolean;
+    pageLoaded: boolean;
+};

package/dist/runtime/lazy-load/schema.js

@@ -0,0 +1,16 @@
+import { array, boolean, object, string } from "valibot";
+export const ComponentLazyLoadImportSchema = object({
+  componentName: string(),
+  importSource: string(),
+  importedBy: string(),
+  rendered: boolean()
+});
+export const ComponentLazyLoadDataSchema = object({
+  id: string(),
+  route: string(),
+  state: object({
+    pageLoaded: boolean(),
+    hasReported: boolean(),
+    directImports: array(ComponentLazyLoadImportSchema)
+  })
+});

package/dist/runtime/lazy-load/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const logger: import("consola").ConsolaInstance;
+export declare const LAZY_LOAD_ROUTE = "/__nuxt_hints/lazy-load";

package/dist/runtime/lazy-load/utils.js

@@ -0,0 +1,4 @@
+import { HINTS_ROUTE } from "../core/server/types.js";
+import { createHintsLogger } from "../logger.js";
+export const logger = createHintsLogger("lazyLoad");
+export const LAZY_LOAD_ROUTE = `${HINTS_ROUTE}/lazy-load`;

package/dist/runtime/logger.d.ts

@@ -0,0 +1,3 @@
+import type { FeaturesName } from './core/types.js';
+export declare function createHintsLogger(feature: FeaturesName): import("consola").ConsolaInstance;
+export declare const logger: import("consola").ConsolaInstance;

package/dist/runtime/logger.js

@@ -0,0 +1,8 @@
+import { createConsola } from "consola";
+import { isFeatureLogsEnabled } from "./core/features.js";
+export function createHintsLogger(feature) {
+  return createConsola({
+    level: isFeatureLogsEnabled(feature) ? void 0 : 0
+  }).withTag(`hints:${feature}`);
+}
+export const logger = createConsola().withTag("hints");

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

@@ -0,0 +1,2 @@
+import type { NitroApp } from 'nitropack/types';
+export default function (nitroApp: NitroApp): void;

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

@@ -0,0 +1,48 @@
+export default function(nitroApp) {
+  nitroApp.hooks.hook("render:html", ({ head }) => {
+    head.unshift(`
+<script>
+window.__hints_TPC_start_time = Date.now();
+
+function __hints_TPC_saveTime(script, startTime) {
+    script.__hints_TPC_end_time = Date.now();
+    const scriptStartTime = startTime || script.__hints_TPC_start_time || window.__hints_TPC_start_time;
+    
+    const resourceEntries = performance.getEntriesByName(script.src)
+    const scriptEntry = resourceEntries.find(entry => entry.name === script.src)
+
+    if (scriptEntry) {
+        // Calculate parse + execute time using modern API
+        const navigationEntry = performance.getEntriesByType('navigation')[0]
+        const navigationStart = navigationEntry ? performance.timeOrigin : performance.timeOrigin
+        
+        script.requestTime = (scriptEntry.responseStart - scriptEntry.requestStart);
+        script.downloadTime = (scriptEntry.responseEnd - scriptEntry.responseStart);
+        script.totalNetworkTime = (scriptEntry.responseEnd - scriptEntry.startTime);
+        script.parseExecuteTime =  script.__hints_TPC_end_time - (navigationStart + scriptEntry.responseEnd);
+        script.loaded = true;
+        console.log('[@nuxt/hints]: \u{1F4CA} Detailed timing for', script.src, {
+            'Request': script.requestTime.toFixed(2) + 'ms',
+            'Download': script.downloadTime.toFixed(2) + 'ms',
+            'Total Network': script.totalNetworkTime.toFixed(2) + 'ms',
+            'Parse + Execute': script.parseExecuteTime.toFixed(2) + 'ms'
+        });
+    }
+}
+<\/script>
+`);
+    head.push(`
+<script>
+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.addEventListener('load', () => {
+            __hints_TPC_saveTime(script, script.__hints_TPC_start_time);
+        })
+        __hints_TPC_saveTime(script, script.__hints_TPC_start_time);
+    }
+}
+<\/script>
+  `);
+  });
+}

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,93 @@
+import { defineNuxtPlugin, ref, useNuxtApp } from "#imports";
+import { defu } from "defu";
+import { logger } from "./utils.js";
+const EXTENSIONS_SCHEMES_RE = /^(chrome-extension|moz-extension|safari-extension|ms-browser-extension):/;
+function isExtensionScript(src) {
+  try {
+    const url = new URL(src, window.location.origin);
+    return EXTENSIONS_SCHEMES_RE.test(url.protocol);
+  } catch {
+    return false;
+  }
+}
+function isSameOriginScript(src) {
+  try {
+    const url = new URL(src, window.location.origin);
+    return url.origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+function isIgnoredScript(src) {
+  return isSameOriginScript(src) || isExtensionScript(src);
+}
+export default defineNuxtPlugin({
+  name: "nuxt-hints:third-party-scripts",
+  setup() {
+    const nuxtApp = useNuxtApp();
+    nuxtApp.payload.__hints = defu(nuxtApp.payload.__hints, {
+      thirdPartyScripts: ref([])
+    });
+    const scripts = nuxtApp.payload.__hints.thirdPartyScripts;
+    const isUsingNuxtScripts = !!nuxtApp.$scripts;
+    nuxtApp.hook("hints:scripts:added", (script) => {
+      scripts.value.push({ element: script, loaded: false });
+    });
+    nuxtApp.hook("hints:scripts:loaded", (script) => {
+      const existingScript = scripts.value.find((s) => s.element === script);
+      if (existingScript) {
+        existingScript.loaded = true;
+      } else {
+        logger.warn(`Script loaded event received for a script not tracked: ${script.src}. Please open an issue with a minimal reproduction if you think this is a bug.`);
+        scripts.value.push({ element: script, loaded: true });
+      }
+    });
+    nuxtApp.hooks.hookOnce("app:mounted", () => {
+      let hasThirdPartyScript = false;
+      for (const script of document.scripts) {
+        if (script.src && !isIgnoredScript(script.src)) {
+          hasThirdPartyScript = true;
+          onScriptAdded(script);
+        }
+      }
+      if (hasThirdPartyScript && !isUsingNuxtScripts) {
+        logger.info("Third-party scripts detected on page load: consider using @nuxt/scripts");
+      }
+    });
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          for (const node of mutation.addedNodes) {
+            if (isScript(node) && node.src && !isIgnoredScript(node.src)) {
+              onScriptAdded(node);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+    function onScriptAdded(script) {
+      if (!script.crossOrigin) {
+        logger.warn(`Third-party script "${script.src}" is missing crossorigin attribute. Consider adding crossorigin="anonymous" for better security and error reporting.`);
+      }
+      nuxtApp.callHook("hints:scripts:added", script).then(() => {
+        if (!script.loaded) {
+          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);
+        }
+      });
+      logger.info(`Dynamically added third-party script detected: ${script.src}`);
+    }
+  }
+});
+function isScript(node) {
+  return node.nodeName === "SCRIPT";
+}

package/dist/runtime/third-party-scripts/utils.d.ts

@@ -0,0 +1 @@
+export declare const logger: import("consola").ConsolaInstance;

package/dist/runtime/third-party-scripts/utils.js

@@ -0,0 +1,2 @@
+import { createHintsLogger } from "../logger.js";
+export const logger = createHintsLogger("thirdPartyScripts");

package/dist/runtime/types.d.ts

@@ -0,0 +1,80 @@
+import type { VNode, Ref } from 'vue'
+import type { LCPMetricWithAttribution, INPMetricWithAttribution, CLSMetricWithAttribution } from 'web-vitals/attribution'
+import type { HydrationMismatchPayload, LocalHydrationMismatch } from './hydration/types'
+import type { DirectImportInfo, LazyHydrationState } from './lazy-load/composables'
+import type { FeaturesName, FeatureFlags } from './core/types'
+
+declare global {
+  interface Window {
+    __hints_TPC_start_time: number
+    __hints_TPC_saveTime: (script: HTMLScriptElement, startTime?: number) => void
+  }
+  interface HTMLScriptElement {
+    __hints_TPC_start_time?: number
+    __hints_TPC_end_time?: number
+    requestTime?: number
+    downloadTime?: number
+    totalNetworkTime?: number
+    parseExecuteTime?: number
+    loaded?: boolean
+  }
+  interface Element {
+    __vnode?: VNode
+  }
+}
+
+declare module '#app' {
+  interface RuntimeNuxtHooks {
+    'hints:scripts:added': (script: HTMLScriptElement) => void
+    'hints:scripts:loaded': (script: HTMLScriptElement) => void
+
+    'hints:webvitals:sync': (webvitals: NuxtPayload['__hints']['webvitals']) => void
+    'hints:webvitals:lcp': (metric: LCPMetricWithAttribution) => void
+    'hints:webvitals:inp': (metric: INPMetricWithAttribution) => void
+    'hints:webvitals:cls': (metric: CLSMetricWithAttribution) => void
+  }
+
+  interface NuxtApp {
+    __tracerOverlay: typeof import('vite-plugin-vue-tracer/client/overlay')
+    __tracerRecord: typeof import('vite-plugin-vue-tracer/client/record')
+    hints: {
+      config: {
+        features: Record<FeaturesName, FeatureFlags | boolean>
+      }
+    }
+  }
+
+  interface NuxtPayload {
+    __hints: {
+      lazyHydrationState?: LazyHydrationState
+      hydration: LocalHydrationMismatch[]
+      lazyComponents: DirectImportInfo[]
+      webvitals: {
+        lcp: Ref<LCPMetricWithAttribution[]>
+        inp: Ref<INPMetricWithAttribution[]>
+        cls: Ref<CLSMetricWithAttribution[]>
+      }
+      thirdPartyScripts: Ref<{
+        element: HTMLScriptElement
+        loaded: boolean
+      }[]>
+    }
+  }
+}
+
+declare module 'nitropack' {
+  interface NitroRuntimeHooks {
+    // Core hints hooks
+    'hints:sse:setup': (context: import('./core/server/types').HintsSseContext) => void
+
+    // Hydration hooks
+    'hints:hydration:mismatch': (payload: HydrationMismatchPayload) => void
+    'hints:hydration:cleared': (payload: { id: string[] }) => void
+
+    // Lazy-load hooks
+    'hints:lazy-load:report': (payload: import('./lazy-load/schema').ComponentLazyLoadData) => void
+    'hints:lazy-load:cleared': (payload: { id: string }) => void
+  }
+}
+
+export {}