feat(checker): add verbosity toggle (#225)

Author: dargmuesli

docs/content/en/index.md

@@ -75,6 +75,10 @@ This module configures [`html-validate`](https://html-validate.org/) to automati
 
       <alert>Consider not enabling this if you are using TailwindCSS, as prettier will struggle to cope with parsing the size of your HTML in development mode.</alert>
 
+   - `logLevel` sets the verbosity to one of `verbose`, `warning` or `error`. It defaults to `verbose` in dev, and `warning` when generating.
+
+      <alert>You can use this configuration option to turn off console logging for the `No HTML validation errors found for ...` message.</alert>
+
    - `failOnError` will throw an error after running `nuxt generate` if there are any validation errors with the generated pages.
 
       <alert>Useful in continuous integration.</alert>
@@ -89,6 +93,7 @@ This module configures [`html-validate`](https://html-validate.org/) to automati
    {
      htmlValidator: {
        usePrettier: false,
+       logLevel: 'verbose',
        failOnError: false,
        options: {
          extends: [

src/config.ts

@@ -22,13 +22,16 @@ export const defaultHtmlValidateConfig: ConfigData = {
   }
 }
 
+export type LogLevel = 'verbose' | 'warning' | 'error'
+
 export interface ModuleOptions {
   usePrettier?: boolean
+  logLevel?: LogLevel
   failOnError?: boolean
   options?: ConfigData
 }
 
-export const DEFAULTS: Required<ModuleOptions> = {
+export const DEFAULTS: Required<Omit<ModuleOptions, 'logLevel'>> & { logLevel?: LogLevel } = {
   usePrettier: false,
   failOnError: false,
   options: defaultHtmlValidateConfig

src/module.ts

@@ -14,11 +14,14 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt: '^2.0.0 || ^3.0.0-rc.7'
     }
   },
-  defaults: DEFAULTS,
-  async setup (_options, nuxt) {
+  defaults: nuxt => ({
+    ...DEFAULTS,
+    logLevel: nuxt.options.dev ? 'verbose' : 'warning'
+  }),
+  async setup (moduleOptions, nuxt) {
     logger.info(`Using ${chalk.bold('html-validate')} to validate server-rendered HTML`)
 
-    const { usePrettier, failOnError, options } = _options as Required<ModuleOptions>
+    const { usePrettier, failOnError, options, logLevel } = moduleOptions as Required<ModuleOptions>
     if ((nuxt.options as any).htmlValidator?.options?.extends) {
       options.extends = (nuxt.options as any).htmlValidator.options.extends
     }
@@ -34,15 +37,15 @@ export default defineNuxtModule<ModuleOptions>({
         config.plugins = config.plugins || []
         config.plugins.push(fileURLToPath(new URL('./runtime/nitro', import.meta.url)))
         config.virtual = config.virtual || {}
-        config.virtual['#html-validator-config'] = `export default ${JSON.stringify(_options)}`
+        config.virtual['#html-validator-config'] = `export default ${JSON.stringify(moduleOptions)}`
       })
     }
 
     if (!nuxt.options.dev || isNuxt2()) {
       const validatorPath = fileURLToPath(new URL('./runtime/validator', import.meta.url))
       const { useChecker, getValidator } = await import(resolveModule(validatorPath))
       const validator = getValidator(options)
-      const { checkHTML, invalidPages } = useChecker(validator, usePrettier)
+      const { checkHTML, invalidPages } = useChecker(validator, usePrettier, logLevel)
 
       if (failOnError) {
         const errorIfNeeded = () => {

src/runtime/nitro.ts

@@ -5,7 +5,7 @@ import config from '#html-validator-config'
 
 export default <NitroAppPlugin> function (nitro) {
   const validator = getValidator(config.options)
-  const { checkHTML } = useChecker(validator, config.usePrettier)
+  const { checkHTML } = useChecker(validator, config.usePrettier, config.logLevel)
 
   nitro.hooks.hook('render:response', (response: RenderResponse, { event }) => {
     if (typeof response.body === 'string' && (response.headers['Content-Type'] || response.headers['content-type'])?.includes('html')) {

src/runtime/validator.ts

@@ -1,13 +1,15 @@
 import chalk from 'chalk'
 import { ConfigData, HtmlValidate, formatterFactory } from 'html-validate'
+import type { LogLevel } from '../config'
 
 export const getValidator = (options: ConfigData = {}) => {
   return new HtmlValidate(options)
 }
 
 export const useChecker = (
   validator: HtmlValidate,
-  usePrettier = false
+  usePrettier = false,
+  logLevel: LogLevel = 'verbose'
 ) => {
   const invalidPages: string[] = []
 
@@ -27,7 +29,7 @@ export const useChecker = (
     html = typeof html === 'string' ? html.replace(/ ?data-v-[a-z0-9]+\b/g, '') : html
     const { valid, results } = validator.validateString(html)
 
-    if (valid && !results.length) {
+    if (valid && !results.length && logLevel === 'verbose') {
       return console.log(
         `No HTML validation errors found for ${chalk.bold(url)}`
       )
@@ -39,12 +41,18 @@ export const useChecker = (
     const formatter = couldFormat ? formatterFactory('codeframe') : await import('@html-validate/stylish').then(r => r.default?.default ?? r.default ?? r)
 
     const formattedResult = formatter?.(results)
-    const reporter = valid ? console.warn : console.error
-
-    reporter([
+    const message = [
       `HTML validation errors found for ${chalk.bold(url)}`,
       formattedResult
-    ].join('\n'))
+    ].join('\n')
+
+    if (valid) {
+      if (logLevel === 'verbose' || logLevel === 'warning') {
+        console.warn(message)
+      }
+    } else {
+      console.error(message)
+    }
   }
 
   return { checkHTML, invalidPages }

test/checker.test.ts

@@ -1,4 +1,6 @@
+import chalk from 'chalk'
 import { describe, it, expect, vi, afterEach } from 'vitest'
+
 import { useChecker } from '../src/runtime/validator'
 
 vi.mock('prettier', () => ({
@@ -14,6 +16,7 @@ vi.mock('html-validate')
 
 vi.spyOn(console, 'error')
 vi.spyOn(console, 'log')
+vi.spyOn(console, 'warn')
 
 describe('useChecker', () => {
   afterEach(() => {
@@ -29,7 +32,7 @@ describe('useChecker', () => {
     expect(console.error).toHaveBeenCalled()
   })
 
-  it('prints an error message when invalid html is provided', async () => {
+  it('prints an error when invalid html is provided', async () => {
     const mockValidator = vi.fn().mockImplementation(() => ({ valid: false, results: [] }))
     const { checkHTML: checker } = useChecker({ validateString: mockValidator } as any, false)
 
@@ -38,6 +41,36 @@ describe('useChecker', () => {
     expect(console.error).toHaveBeenCalled()
   })
 
+  it('prints a warning when invalid html is provided and log level is set to verbose', async () => {
+    const mockValidator = vi.fn().mockImplementation(() => ({ valid: true, results: [{ messages: [{ message: '' }] }] }))
+    const { checkHTML: checker } = useChecker({ validateString: mockValidator } as any, false, 'verbose')
+
+    await checker('https://test.com/', '<a>Link</a>')
+    expect(mockValidator).toHaveBeenCalled()
+    expect(console.warn).toHaveBeenCalled()
+    expect(console.error).not.toHaveBeenCalled()
+  })
+
+  it('prints a warning when invalid html is provided and log level is set to warning', async () => {
+    const mockValidator = vi.fn().mockImplementation(() => ({ valid: true, results: [] }))
+    const { checkHTML: checker } = useChecker({ validateString: mockValidator } as any, false, 'warning')
+
+    await checker('https://test.com/', '<a>Link</a>')
+    expect(mockValidator).toHaveBeenCalled()
+    expect(console.warn).toHaveBeenCalled()
+    expect(console.error).not.toHaveBeenCalled()
+  })
+
+  it('prints no warning when invalid html is provided and log level is set to error', async () => {
+    const mockValidator = vi.fn().mockImplementation(() => ({ valid: true, results: [] }))
+    const { checkHTML: checker } = useChecker({ validateString: mockValidator } as any, false, 'error')
+
+    await checker('https://test.com/', '<a>Link</a>')
+    expect(mockValidator).toHaveBeenCalled()
+    expect(console.warn).not.toHaveBeenCalled()
+    expect(console.error).not.toHaveBeenCalled()
+  })
+
   it('records urls when invalid html is provided', async () => {
     const mockValidator = vi.fn().mockImplementation(() => ({ valid: false, results: [] }))
     const { checkHTML: checker, invalidPages } = useChecker({ validateString: mockValidator } as any, false)
@@ -84,4 +117,22 @@ describe('useChecker', () => {
     const validate = await import('html-validate')
     expect(validate.formatterFactory).not.toHaveBeenCalledWith('codeframe')
   })
+
+  it('logs valid output', async () => {
+    const mockValidator = vi.fn().mockImplementation(() => ({ valid: true, results: [] }))
+    const { checkHTML: checker } = useChecker({ validateString: mockValidator } as any, false, 'verbose')
+
+    await checker('https://test.com/', Symbol as any)
+    expect(console.log).toHaveBeenCalledWith(
+      `No HTML validation errors found for ${chalk.bold('https://test.com/')}`
+    )
+  })
+
+  it('does not log valid output when logging on level warning', async () => {
+    const mockValidator = vi.fn().mockImplementation(() => ({ valid: true, results: [] }))
+    const { checkHTML: checker } = useChecker({ validateString: mockValidator } as any, false, 'warning')
+
+    await checker('https://test.com/', Symbol as any)
+    expect(console.log).not.toHaveBeenCalled()
+  })
 })