@nuxt/hints 1.0.0-alpha.9 → 1.0.1

package/dist/runtime/types.d.ts

@@ -2,11 +2,13 @@ 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 { Features } from './core/types'
 
 declare global {
   interface Window {
     __hints_TPC_start_time: number
     __hints_TPC_saveTime: (script: HTMLScriptElement, startTime?: number) => void
+    __hints_html_validation?: import('./html-validate/types').HtmlValidateReport
   }
   interface HTMLScriptElement {
     __hints_TPC_start_time?: number
@@ -36,6 +38,11 @@ declare module '#app' {
   interface NuxtApp {
     __tracerOverlay: typeof import('vite-plugin-vue-tracer/client/overlay')
     __tracerRecord: typeof import('vite-plugin-vue-tracer/client/record')
+    hints: {
+      config: {
+        features: Features
+      }
+    }
   }
 
   interface NuxtPayload {
@@ -52,6 +59,7 @@ declare module '#app' {
         element: HTMLScriptElement
         loaded: boolean
       }[]>
+      htmlValidateResult?: import('./html-validate/types').HtmlValidateReport
     }
   }
 }
@@ -61,6 +69,10 @@ declare module 'nitropack' {
     // Core hints hooks
     'hints:sse:setup': (context: import('./core/server/types').HintsSseContext) => void
 
+    // html-validate hooks
+    'hints:html-validate:report': (report: import('./html-validate/types').HtmlValidateReport) => void
+    'hints:html-validate:deleted': (id: string) => void
+
     // Hydration hooks
     'hints:hydration:mismatch': (payload: HydrationMismatchPayload) => void
     'hints:hydration:cleared': (payload: { id: string[] }) => void

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

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

package/dist/runtime/web-vitals/plugin.client.js

@@ -1,20 +1,33 @@
 import { defineNuxtPlugin, useNuxtApp } from "#imports";
 import { onINP, onLCP, onCLS } from "web-vitals/attribution";
 import { defu } from "defu";
-import { ref } from "vue";
-import { logger } from "../logger.js";
+import { shallowRef } from "vue";
+import { logger } from "./utils.js";
+import { getFeatureOptions } from "../core/features.js";
 function isImgElement(element) {
   return element instanceof Element && element.tagName === "IMG";
 }
+function isIgnoredDomain(src, ignoreDomains) {
+  if (ignoreDomains.length === 0) return false;
+  try {
+    const url = new URL(src);
+    return ignoreDomains.some((domain) => url.hostname === domain || url.hostname.endsWith(`.${domain}`));
+  } catch {
+    return false;
+  }
+}
 export default defineNuxtPlugin({
   name: "nuxt-hints:performance",
   setup() {
     const nuxtApp = useNuxtApp();
+    const opts = getFeatureOptions("webVitals") ?? {};
+    const trackedMetrics = opts.trackedMetrics ?? ["LCP", "INP", "CLS"];
+    const ignoreDomains = opts.ignoreDomains ?? [];
     nuxtApp.payload.__hints = defu(nuxtApp.payload.__hints, {
       webvitals: {
-        lcp: ref([]),
-        inp: ref([]),
-        cls: ref([])
+        lcp: shallowRef([]),
+        inp: shallowRef([]),
+        cls: shallowRef([])
       }
     });
     nuxtApp.hook("hints:webvitals:sync", (webvitals) => {
@@ -23,113 +36,130 @@ export default defineNuxtPlugin({
       webvitals.cls.value = [...nuxtApp.payload.__hints.webvitals.cls.value];
     });
     nuxtApp.hook("app:mounted", () => {
-      onINP((metric) => {
-        if (metric.rating === "good") {
-          return;
-        }
-        logger.info(
-          "[web-vitals] INP Metric: ",
-          metric
-        );
-        nuxtApp.payload.__hints.webvitals.inp.value.push(metric);
-        nuxtApp.callHook("hints:webvitals:inp", metric);
-      }, {
-        reportAllChanges: true
-      });
-      onLCP((metric) => {
-        if (metric.rating === "good") {
-          return;
-        }
-        logger.info(
-          `[web-vitals] LCP Metric: `,
-          metric
-        );
-        nuxtApp.payload.__hints.webvitals.lcp.value.push(metric);
-        nuxtApp.callHook("hints:webvitals:lcp", metric);
-        for (const performanceEntry of metric.entries) {
-          if (!performanceEntry.element || !isImgElement(performanceEntry.element)) {
-            continue;
+      if (trackedMetrics.includes("INP")) {
+        onINP((metric) => {
+          if (metric.rating === "good") {
+            return;
           }
-          if (performanceEntry.element.attributes?.getNamedItem("loading")?.value === "lazy") {
-            logger.warn(
-              '[performance] LCP Element should not have `loading="lazy"` \n\n Learn more: https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given'
-            );
+          logger.info(
+            "[web-vitals] INP Metric: ",
+            metric
+          );
+          nuxtApp.payload.__hints.webvitals.inp.value.push(metric);
+          nuxtApp.callHook("hints:webvitals:inp", metric);
+        }, {
+          reportAllChanges: true
+        });
+      }
+      if (trackedMetrics.includes("LCP")) {
+        onLCP((metric) => {
+          if (metric.rating === "good") {
+            return;
           }
-          if (hasImageFormat(performanceEntry.element.src)) {
-            if (!performanceEntry.element.src.includes("webp") || !performanceEntry.element.src.includes("avif")) {
+          logger.info(
+            `[web-vitals] LCP Metric: `,
+            metric
+          );
+          nuxtApp.payload.__hints.webvitals.lcp.value.push(metric);
+          nuxtApp.callHook("hints:webvitals:lcp", metric);
+          for (const performanceEntry of metric.entries) {
+            if (!performanceEntry.element || !isImgElement(performanceEntry.element)) {
+              continue;
+            }
+            if (isIgnoredDomain(performanceEntry.element.src, ignoreDomains)) {
+              continue;
+            }
+            if (performanceEntry.element.attributes?.getNamedItem("loading")?.value === "lazy") {
               logger.warn(
-                "[performance] LCP Element can be served in a next gen format like `webp` or `avif` \n\n Learn more: https://web.dev/choose-the-right-image-format/ \n\n Use: https://image.nuxt.com/usage/nuxt-img#format"
+                '[performance] LCP Element should not have `loading="lazy"` \n\n Learn more: https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given'
               );
             }
-          }
-          if (performanceEntry.element.fetchPriority !== "high") {
-            logger.warn(
-              '[performance] LCP Element can have `fetchPriority="high"` to load as soon as possible \n\n Learn more: https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given'
-            );
-          }
-          if (!performanceEntry.element.attributes.getNamedItem("height") || !performanceEntry.element.attributes.getNamedItem("width")) {
-            logger.warn(
-              "[performance] Images should have `width` and `height` sizes set  \n\n Learn more: https://web.dev/optimize-cls/#images-without-dimensions \n\n Use: https://image.nuxt.com/usage/nuxt-img#width-height"
-            );
-          }
-          if (performanceEntry.startTime > 2500) {
-            logger.warn(
-              `[performance] LCP Element loaded in ${performanceEntry.startTime} miliseconds. Good result is below 2500 miliseconds 
+            if (hasImageFormat(performanceEntry.element.src)) {
+              if (!performanceEntry.element.src.includes("webp") && !performanceEntry.element.src.includes("avif")) {
+                logger.warn(
+                  "[performance] LCP Element can be served in a next gen format like `webp` or `avif` \n\n Learn more: https://web.dev/choose-the-right-image-format/ \n\n Use: https://image.nuxt.com/usage/nuxt-img#format"
+                );
+              }
+            }
+            if (performanceEntry.element.fetchPriority !== "high") {
+              logger.warn(
+                '[performance] LCP Element can have `fetchPriority="high"` to load as soon as possible \n\n Learn more: https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given'
+              );
+            }
+            if (!performanceEntry.element.hasAttribute("width") || !performanceEntry.element.hasAttribute("height")) {
+              logger.warn(
+                "[performance] Images should have `width` and `height` sizes set  \n\n Learn more: https://web.dev/optimize-cls/#images-without-dimensions \n\n Use: https://image.nuxt.com/usage/nuxt-img#width-height"
+              );
+            }
+            if (performanceEntry.startTime > 2500) {
+              logger.warn(
+                `[performance] LCP Element loaded in ${performanceEntry.startTime} miliseconds. Good result is below 2500 miliseconds 
 
  Learn more: https://web.dev/lcp/#what-is-a-good-lcp-score`
-            );
+              );
+            }
+            if (!isElementPreloaded(performanceEntry.element.src)) {
+              logger.warn(
+                "[performance] LCP Element can be preloaded in `head` to improve load time \n\n Learn more: https://web.dev/optimize-lcp/#optimize-when-the-resource-is-discovered \n\n Use: https://image.nuxt.com/usage/nuxt-img#preload"
+              );
+            }
           }
-          if (!isElementPreloaded(performanceEntry.element.src)) {
-            logger.warn(
-              "[performance] LCP Element can be preloaded in `head` to improve load time \n\n Learn more: https://web.dev/optimize-lcp/#optimize-when-the-resource-is-discovered \n\n Use: https://image.nuxt.com/usage/nuxt-img#preload"
-            );
+        }, {
+          reportAllChanges: true
+        });
+      }
+      if (trackedMetrics.includes("CLS")) {
+        onCLS((metric) => {
+          if (metric.rating === "good") {
+            return;
           }
-        }
-      }, {
-        reportAllChanges: true
-      });
-      onCLS((metric) => {
-        if (metric.rating === "good") {
-          return;
-        }
-        logger.info(
-          "[web-vitals] CLS Metric: ",
-          metric
-        );
-        nuxtApp.callHook(
-          "hints:webvitals:cls",
-          metric
-        );
-        nuxtApp.payload.__hints.webvitals.cls.value.push(metric);
-        for (const entry of metric.entries) {
-          const performanceEntry = entry;
-          if (!performanceEntry.sources?.[0]) return;
-          const sourceElement = performanceEntry.sources?.[0].node;
-          if (!sourceElement || sourceElement.parentElement?.className.includes("nuxt-devtools")) return;
           logger.info(
-            "[performance] Potential CLS Element: ",
-            sourceElement
+            "[web-vitals] CLS Metric: ",
+            metric
           );
-          if ((performanceEntry.value ?? 0) > 0.1) {
-            logger.warn(
-              `[performance] CLS was ${performanceEntry.value}. Good result is below 0.1 
+          nuxtApp.callHook(
+            "hints:webvitals:cls",
+            metric
+          );
+          nuxtApp.payload.__hints.webvitals.cls.value.push(metric);
+          for (const entry of metric.entries) {
+            const performanceEntry = entry;
+            if (!performanceEntry.sources?.[0]) continue;
+            const sourceElement = performanceEntry.sources?.[0].node;
+            if (!sourceElement || sourceElement.parentElement?.className.includes("nuxt-devtools")) continue;
+            logger.info(
+              "[performance] Potential CLS Element: ",
+              sourceElement
+            );
+            if ((performanceEntry.value ?? 0) > 0.1) {
+              logger.warn(
+                `[performance] CLS was ${performanceEntry.value}. Good result is below 0.1 
 
  Learn more: https://web.dev/articles/cls#what-is-a-good-cls-score`
-            );
-          }
-          if (isImgElement(sourceElement) && (!sourceElement.attributes.getNamedItem("height") || !sourceElement.attributes.getNamedItem("width"))) {
-            logger.warn(
-              "[performance] Images should have `width` and `height` sizes set  \n\n Learn more: https://web.dev/optimize-cls/#images-without-dimensions \n\n Use: https://image.nuxt.com/usage/nuxt-img#width-height"
-            );
+              );
+            }
+            if (isImgElement(sourceElement) && (!sourceElement.attributes.getNamedItem("height") || !sourceElement.attributes.getNamedItem("width"))) {
+              logger.warn(
+                "[performance] Images should have `width` and `height` sizes set  \n\n Learn more: https://web.dev/optimize-cls/#images-without-dimensions \n\n Use: https://image.nuxt.com/usage/nuxt-img#width-height"
+              );
+            }
           }
-        }
-      });
+        }, {
+          reportAllChanges: true
+        });
+      }
     });
   }
 });
+const IMAGE_FORMATS = ["avif", "jpg", "jpeg", "png", "webp"];
 const hasImageFormat = (src) => {
-  const imageFormats = ["avif", "jpg", "jpeg", "png", "webp"];
-  return imageFormats.some((format) => src.includes(format));
+  let pathname;
+  try {
+    pathname = new URL(src, window.location.href).pathname;
+  } catch {
+    pathname = src;
+  }
+  return IMAGE_FORMATS.some((format) => pathname.includes(format));
 };
 const isElementPreloaded = (src) => {
   return Array.from(document.head.childNodes).filter(

package/dist/runtime/web-vitals/types.d.ts

@@ -0,0 +1,4 @@
+export interface WebVitalsFeatureOptions {
+    ignoreDomains?: string[];
+    trackedMetrics?: Array<'LCP' | 'INP' | 'CLS'>;
+}

package/dist/runtime/web-vitals/utils.d.ts

@@ -1,3 +1,4 @@
+export declare const logger: import("consola").ConsolaInstance;
 export declare enum ImagePerformanceIssueType {
     LazyAttrOnLCPElement = 0,
     ImgFormat = 1,

package/dist/runtime/web-vitals/utils.js

@@ -1,3 +1,5 @@
+import { createHintsLogger } from "../logger.js";
+export const logger = createHintsLogger("webVitals");
 export var ImagePerformanceIssueType = /* @__PURE__ */ ((ImagePerformanceIssueType2) => {
   ImagePerformanceIssueType2[ImagePerformanceIssueType2["LazyAttrOnLCPElement"] = 0] = "LazyAttrOnLCPElement";
   ImagePerformanceIssueType2[ImagePerformanceIssueType2["ImgFormat"] = 1] = "ImgFormat";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/hints",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.1",
   "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",
@@ -21,44 +21,48 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/devtools-kit": "^3.2.1",
+    "@nuxt/devtools-kit": "^3.2.3",
     "@nuxt/kit": "^4.3.1",
     "consola": "^3.4.2",
-    "h3": "^1.15.5",
+    "defu": "^6.1.4",
+    "devalue": "^5.6.4",
+    "h3": "^1.15.6",
+    "html-validate": "^10.11.2",
     "knitwork": "^1.3.0",
     "magic-string": "^0.30.21",
     "nitropack": "^2.13.1",
-    "oxc-parser": "^0.115.0",
+    "oxc-parser": "^0.120.0",
+    "prettier": "^3.8.1",
     "sirv": "^3.0.2",
     "unplugin": "^3.0.0",
     "unstorage": "^1.17.4",
     "valibot": "^1.2.0",
-    "vite-plugin-vue-tracer": "^1.2.0",
+    "vite-plugin-vue-tracer": "^1.3.0",
     "web-vitals": "^5.1.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^3.2.1",
-    "@nuxt/devtools-ui-kit": "^3.2.1",
-    "@nuxt/eslint": "^1.15.1",
+    "@nuxt/devtools": "^3.2.3",
+    "@nuxt/devtools-ui-kit": "^3.2.3",
+    "@nuxt/eslint": "^1.15.2",
     "@nuxt/icon": "^2.2.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.3.1",
     "@nuxt/test-utils": "^4.0.0",
-    "@shikijs/transformers": "^3.22.0",
-    "@types/node": "^24.10.13",
+    "@shikijs/transformers": "^3.23.0",
+    "@types/node": "^24.12.0",
     "@vue/test-utils": "^2.4.6",
     "changelogen": "^0.6.2",
     "diff": "^8.0.3",
-    "eslint": "^10.0.1",
+    "eslint": "^10.0.3",
     "get-port-please": "^3.2.0",
-    "happy-dom": "^20.7.0",
-    "pkg-pr-new": "0.0.63",
+    "happy-dom": "^20.8.4",
+    "pkg-pr-new": "0.0.66",
     "rimraf": "^6.1.3",
-    "sass-embedded": "^1.97.3",
-    "shiki": "^3.22.0",
+    "sass-embedded": "^1.98.0",
+    "shiki": "^3.23.0",
     "shiki-transformer-fold": "^0.2.0",
-    "vitest": "^4.0.18",
-    "@nuxt/hints": "^1.0.0-alpha.9"
+    "vitest": "^4.1.0",
+    "@nuxt/hints": "^1.0.1"
   },
   "scripts": {
     "client:build": "nuxi generate client",

package/dist/client/_nuxt/16LZ-2rN.js

@@ -1 +0,0 @@
-import{_ as g}from"./CTf7BuVz.js";import L from"./GiOWC8es.js";import{_ as w}from"./BZWgH84o.js";import{_ as z}from"./BFRyJUvr.js";import{g as N,e as v,o as n,c as a,b as c,w as i,k as _,F as p,x,d as u,a as t,l as $,t as r,n as C,L as B}from"./BOWvZIQC.js";import"./BKRej55Q.js";import"./D7xuZOu8.js";const A={grid:"","gap-4":"","p-4":""},E={class:"flex items-center justify-between"},I={class:"text-sm font-semibold"},S={class:"w-full text-sm"},R={class:"py-2"},T={class:"text-xs bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded"},D={class:"text-xs text-neutral-400 ml-1"},H={class:"py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48"},V={class:"py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48"},F={key:1,class:"text-neutral-500 dark:text-neutral-400"},K=N({__name:"component-lazy-load",setup(O){const d=v(),m=C(()=>d.$lazyLoadHints.value.filter(s=>s.state.directImports.some(e=>!e.rendered)));async function f(s){d.$lazyLoadHints.value=d.$lazyLoadHints.value.filter(e=>e.id!==s),$fetch(new URL(`${B}/${s}`,window.location.origin).href,{method:"DELETE"})}return(s,e)=>{const y=g,b=L,h=w,k=z;return n(),a("div",A,[c(y,{type:"info"},{default:i(()=>[...e[0]||(e[0]=[u(" These components are statically imported but were not rendered during SSR or initial hydration. Consider using the ",-1),t("code",null,"Lazy",-1),u(" prefix or ",-1),t("code",null,"defineAsyncComponent",-1),u(" to reduce the initial bundle size. ",-1)])]),_:1}),_(m).length>0?(n(!0),a(p,{key:0},x(_(m),l=>(n(),$(k,{key:l.id,class:"p4"},{default:i(()=>[t("header",E,[t("span",I,r(l.route),1),c(h,{title:"Remove",size:"small",quaternary:"",onClick:o=>f(l.id)},{default:i(()=>[c(b,{name:"material-symbols:delete-outline",class:"text-lg"})]),_:1},8,["onClick"])]),t("table",S,[e[1]||(e[1]=t("thead",null,[t("tr",{class:"border-b border-neutral-200 dark:border-neutral-700 text-left text-neutral-500 dark:text-neutral-400"},[t("th",{class:"pb-2 font-medium"}," Component "),t("th",{class:"pb-2 font-medium"}," Import Source "),t("th",{class:"pb-2 font-medium"}," Imported By ")])],-1)),t("tbody",null,[(n(!0),a(p,null,x(l.state.directImports.filter(o=>!o.rendered),o=>(n(),a("tr",{key:o.componentName,class:"border-b border-neutral-100 dark:border-neutral-800 last:border-b-0"},[t("td",R,[t("code",T,r(o.componentName),1),t("span",D,"→ Lazy"+r(o.componentName),1)]),t("td",H,r(o.importSource),1),t("td",V,r(o.importedBy),1)]))),128))])])]),_:2},1024))),128)):(n(),a("div",F," No lazy-load suggestions found. Navigate pages in your app to collect data. "))])}}});export{K as default};