feat: add feature related configuration

client/app/composables/features.ts

@@ -11,12 +11,12 @@ export function useEnabledHintsFeatures(): Record<FeaturesName, boolean> {
   return Object.fromEntries<boolean>(
     Object.entries(config.features).map(([feature, flags]) => [
       feature,
-      typeof flags === 'object' ? flags.devtools : Boolean(flags),
+      typeof flags === 'object' ? flags.devtools !== false : Boolean(flags),
     ] as [FeaturesName, boolean]),
   ) as Record<FeaturesName, boolean>
 }
 
 export function useHintsFeature(feature: FeaturesName): boolean {
   const config = useHintsConfig()
-  return typeof config.features[feature] === 'object' ? config.features[feature].devtools : Boolean(config.features[feature])
+  return typeof config.features[feature] === 'object' ? config.features[feature].devtools !== false : Boolean(config.features[feature])
 }

package.json

@@ -38,15 +38,16 @@
     "@nuxt/devtools-kit": "^3.2.2",
     "@nuxt/kit": "^4.3.1",
     "consola": "^3.4.2",
+    "defu": "^6.1.4",
     "devalue": "^5.6.3",
     "h3": "^1.15.5",
     "html-validate": "^10.8.0",
     "knitwork": "^1.3.0",
     "magic-string": "^0.30.21",
     "nitropack": "^2.13.1",
     "oxc-parser": "^0.116.0",
-    "sirv": "^3.0.2",    
     "prettier": "^3.8.1",
+    "sirv": "^3.0.2",
     "unplugin": "^3.0.0",
     "unstorage": "^1.17.4",
     "valibot": "^1.2.0",

src/features.ts

@@ -1,10 +1,27 @@
 import type { ModuleOptions } from './module'
 import type { FeaturesName } from './runtime/core/types'
+import type { FeatureOptionsMap } from './runtime/feature-options'
 
 export function isFeatureDevtoolsEnabled(options: ModuleOptions, feature: FeaturesName): boolean {
-  return typeof options.features[feature] === 'object' ? options.features[feature].devtools : !!options.features[feature]
+  const val = options.features[feature]
+  return typeof val === 'object' ? val.devtools !== false : !!val
 }
 
 export function isFeatureEnabled(options: ModuleOptions, feature: FeaturesName): boolean {
   return !!options.features[feature]
 }
+
+/**
+ * Extract the per-feature options from the module config.
+ * Returns an empty object if the feature is set to a simple boolean.
+ */
+export function getFeatureOptions<K extends keyof FeatureOptionsMap>(
+  options: ModuleOptions,
+  feature: K,
+): FeatureOptionsMap[K] {
+  const val = options.features[feature]
+  if (typeof val === 'object' && val.options) {
+    return val.options as FeatureOptionsMap[K]
+  }
+  return {} as FeatureOptionsMap[K]
+}

src/module.ts

@@ -3,13 +3,13 @@ import { HINTS_SSE_ROUTE } from './runtime/core/server/types'
 import { setupDevToolsUI } from './devtools'
 import { InjectHydrationPlugin } from './plugins/hydration'
 import { LazyLoadHintPlugin } from './plugins/lazy-load'
-import type { FeatureFlags, FeaturesName } from './runtime/core/types'
+import type { Features } from './runtime/core/types'
 import { isFeatureDevtoolsEnabled, isFeatureEnabled } from './features'
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
   devtools: boolean
-  features: Record<FeaturesName, boolean | FeatureFlags>
+  features: Features
 }
 
 const moduleName = '@nuxt/hints'

src/runtime/core/features.ts

@@ -1,15 +1,24 @@
 // @ts-expect-error virtual file
 import { features } from '#hints-config'
 import type { FeaturesName } from './types'
+import type { FeatureOptionsMap } from '../feature-options'
 
 export function isFeatureDevtoolsEnabled(feature: FeaturesName): boolean {
-  return typeof features[feature] === 'object' ? features[feature].devtools : !!features[feature]
+  return typeof features[feature] === 'object' ? features[feature].devtools !== false : !!features[feature]
 }
 
 export function isFeatureLogsEnabled(feature: FeaturesName): boolean {
-  return typeof features[feature] === 'object' ? features[feature].logs : !!features[feature]
+  return typeof features[feature] === 'object' ? features[feature].logs !== false : !!features[feature]
 }
 
 export function isFeatureEnabled(feature: FeaturesName): boolean {
   return !!features[feature]
 }
+
+export function getFeatureOptions<K extends keyof FeatureOptionsMap>(feature: K): FeatureOptionsMap[K] | undefined {
+  const val = features[feature]
+  if (typeof val === 'object' && val.options) {
+    return val.options as FeatureOptionsMap[K]
+  }
+  return undefined
+}

src/runtime/core/types.ts

@@ -1,11 +1,20 @@
+import type { FeatureOptionsMap } from '../feature-options'
+
 export type FeaturesName = 'hydration' | 'lazyLoad' | 'webVitals' | 'thirdPartyScripts' | 'htmlValidate'
 
+export type FeatureFlags<T extends Record<string, any> = Record<string, never>> = {
+  logs?: boolean
+  devtools?: boolean
+  /**
+   * Any feature specific options
+   */
+  options?: T
+}
+
 /**
- * FF used by modules options and to expose in the payload for devtools
+ * Fully-resolved features configuration type, where each feature
+ * can be a simple boolean or a FeatureFlags with its own options.
  */
-export type FeatureFlags = {
-  logs: boolean
-  devtools: boolean
+export type Features = {
+  [K in FeaturesName]: boolean | FeatureFlags<K extends keyof FeatureOptionsMap ? FeatureOptionsMap[K] : Record<string, never>>
 }
-
-export type Features = Record<FeaturesName, FeatureFlags>

src/runtime/feature-options.ts

@@ -0,0 +1,9 @@
+import type { HtmlValidateFeatureOptions } from './html-validate/types'
+import type { ThirdPartyScriptsFeatureOptions } from './third-party-scripts/types'
+import type { WebVitalsFeatureOptions } from './web-vitals/types'
+
+export interface FeatureOptionsMap {
+  thirdPartyScripts: ThirdPartyScriptsFeatureOptions
+  htmlValidate: HtmlValidateFeatureOptions
+  webVitals: WebVitalsFeatureOptions
+}

src/runtime/html-validate/nitro.plugin.ts

@@ -1,33 +1,41 @@
 import type { NitroAppPlugin } from 'nitropack/types'
-import { HtmlValidate } from 'html-validate'
+import { HtmlValidate, type ConfigData, type RuleConfig } from 'html-validate'
 import { addBeforeBodyEndTag } from './utils'
 import { storage } from './storage'
 import { randomUUID } from 'crypto'
 import { stringify } from 'devalue'
 import type { HtmlValidateReport } from './types'
 import { format } from 'prettier/standalone'
 import html from 'prettier/parser-html'
+import { getFeatureOptions } from '../core/features'
+import { defu } from 'defu'
+
+const DEFAULT_EXTENDS = [
+  'html-validate:standard',
+  'html-validate:document',
+  'html-validate:browser',
+]
+
+const DEFAULT_RULES: RuleConfig = {
+  'svg-focusable': 'off',
+  'no-unknown-elements': 'error',
+  'void-style': 'off',
+  'no-trailing-whitespace': 'off',
+  // Conflict with Nuxt defaults
+  'require-sri': 'off',
+  'attribute-boolean-style': 'off',
+  'doctype-style': 'off',
+  // Unreasonable rule
+  'no-inline-style': 'off',
+}
 
 export default <NitroAppPlugin> function (nitro) {
-  const validator = new HtmlValidate({
-    extends: [
-      'html-validate:standard',
-      'html-validate:document',
-      'html-validate:browser',
-    ],
-    rules: {
-      'svg-focusable': 'off',
-      'no-unknown-elements': 'error',
-      'void-style': 'off',
-      'no-trailing-whitespace': 'off',
-      // Conflict with Nuxt defaults
-      'require-sri': 'off',
-      'attribute-boolean-style': 'off',
-      'doctype-style': 'off',
-      // Unreasonable rule
-      'no-inline-style': 'off',
-    },
-  })
+  const opts: ConfigData = defu({ 
+    extends: DEFAULT_EXTENDS,
+    rules: DEFAULT_RULES,
+  }, getFeatureOptions('htmlValidate') ?? {})
+
+  const validator = new HtmlValidate(opts)
 
   nitro.hooks.hook('render:response', async (response, { event }) => {
     if (typeof response.body === 'string' && (response.headers?.['Content-Type'] || response.headers?.['content-type'])?.includes('html')) {

src/runtime/html-validate/types.ts

@@ -1,3 +1,7 @@
+import type { ConfigData } from 'html-validate'
+
+export type HtmlValidateFeatureOptions = ConfigData
+
 export type HtmlValidateReport = {
   id: string
   html: string

src/runtime/third-party-scripts/plugin.client.ts

@@ -1,13 +1,19 @@
 import { defineNuxtPlugin, ref, useNuxtApp } from '#imports'
 import { defu } from 'defu'
 import { logger } from './utils'
+import { getFeatureOptions } from '../core/features'
+import type { ThirdPartyScriptsFeatureOptions } from './types'
 
-const EXTENSIONS_SCHEMES_RE = /^(chrome-extension|moz-extension|safari-extension|ms-browser-extension):/
+const DEFAULT_EXTENSION_SCHEMES = ['chrome-extension', 'moz-extension', 'safari-extension', 'ms-browser-extension']
 
-function isExtensionScript(src: string) {
+function buildExtensionSchemesRegex(schemes: string[]) {
+  return new RegExp(`^(${schemes.join('|')}):`)
+}
+
+function isExtensionScript(src: string, schemesRegex: RegExp) {
   try {
     const url = new URL(src, window.location.origin)
-    return EXTENSIONS_SCHEMES_RE.test(url.protocol)
+    return schemesRegex.test(url.protocol)
   }
   catch {
     return false
@@ -24,14 +30,30 @@
   }
 }
 
-function isIgnoredScript(src: string) {
-  return isSameOriginScript(src) || isExtensionScript(src)
+function isIgnoredDomain(src: string, ignoredDomains: string[]) {
+  if (ignoredDomains.length === 0) return false
+  try {
+    const url = new URL(src, window.location.origin)
+    return ignoredDomains.some(domain => url.hostname === domain || url.hostname.endsWith(`.${domain}`))
+  }
+  catch {
+    return false
+  }
 }
 
 export default defineNuxtPlugin({
   name: 'nuxt-hints:third-party-scripts',
   setup() {
     const nuxtApp = useNuxtApp()
+    const opts = getFeatureOptions('thirdPartyScripts') ?? {}
+
+    const extensionSchemes = [...DEFAULT_EXTENSION_SCHEMES, ...(opts.ignoredSchemes ?? [])]
+    const schemesRegex = buildExtensionSchemesRegex(extensionSchemes)
+    const ignoredDomains = opts.ignoredDomains ?? []
+
+    function isIgnoredScript(src: string) {
+      return isSameOriginScript(src) || isExtensionScript(src, schemesRegex) || isIgnoredDomain(src, ignoredDomains)
+    }
 
     nuxtApp.payload.__hints = defu(nuxtApp.payload.__hints, {
       thirdPartyScripts: ref<{ element: HTMLScriptElement, loaded: boolean }[]>([]),

src/runtime/third-party-scripts/types.ts

@@ -0,0 +1,6 @@
+export interface ThirdPartyScriptsFeatureOptions {
+  /** Additional domains to ignore when detecting third-party scripts */
+  ignoredDomains?: string[]
+  /** Additional URL scheme patterns to ignore (default includes browser extension schemes) */
+  ignoredSchemes?: string[]
+}

src/runtime/types.d.ts

@@ -2,7 +2,7 @@
 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'
+import type { FeaturesName, Features } from './core/types'
 
 declare global {
   interface Window {
@@ -40,7 +40,7 @@
     __tracerRecord: typeof import('vite-plugin-vue-tracer/client/record')
     hints: {
       config: {
-        features: Record<FeaturesName, FeatureFlags | boolean>
+        features: Features
       }
     }
   }