feat: add config attribute extends

.gitignore

@@ -59,6 +59,7 @@ lib
 # Test releated files
 test/unit/coverage
 test/e2e/reports
+report.html
 
 # Website/Docs releated files
 /website/node_modules

src/cli/formatter.ts

@@ -3,7 +3,7 @@ import { EventEmitter } from 'events'
 import { sync as globSync } from 'glob'
 import { parse, resolve } from 'path'
 import type { HTMLHint as IHTMLHint } from '../core/core'
-import type { Hint, Ruleset } from '../core/types'
+import type { Configuration, Hint } from '../core/types'
 
 let HTMLHint: typeof IHTMLHint
 let options: { nocolor?: boolean }
@@ -45,7 +45,7 @@ export interface FormatterFileEvent {
 }
 
 export interface FormatterConfigEvent {
-  ruleset: Ruleset
+  config?: Configuration
   configPath?: string
 }
 

src/cli/htmlhint.ts

@@ -11,7 +11,7 @@ import { dirname, resolve, sep } from 'path'
 import * as request from 'request'
 import * as stripJsonComments from 'strip-json-comments'
 import type { HTMLHint as IHTMLHint } from '../core/core'
-import type { Hint, Ruleset } from '../core/types'
+import type { Configuration, Hint } from '../core/types'
 import { Formatter } from './formatter'
 
 const HTMLHint: typeof IHTMLHint = require('../htmlhint.js').HTMLHint
@@ -96,9 +96,11 @@ if (format) {
   formatter.setFormat(format)
 }
 
+// TODO: parse and validate `program.rules`
+
 hintTargets(arrTargets, {
   rulesdir: program.rulesdir,
-  ruleset: program.rules,
+  config: program.rules ? { rules: program.rules } : undefined,
   formatter: formatter,
   ignore: program.ignore,
 })
@@ -121,7 +123,7 @@ function hintTargets(
   arrTargets: string[],
   options: {
     formatter: Formatter
-    ruleset?: Ruleset
+    config?: Configuration
     rulesdir?: string
     ignore?: string
   }
@@ -213,7 +215,7 @@ function hintAllFiles(
   options: {
     ignore?: string
     formatter: Formatter
-    ruleset?: Ruleset
+    config?: Configuration
   },
   onFinised: (result: {
     targetFileCount: number
@@ -241,22 +243,22 @@ function hintAllFiles(
     time: number
   }> = []
 
-  // init ruleset
-  let ruleset = options.ruleset
-  if (ruleset === undefined) {
-    ruleset = getConfig(program.config, globInfo.base, formatter)
+  // init config
+  let config = options.config
+  if (config === undefined) {
+    config = getConfig(program.config, globInfo.base, formatter)
   }
 
   // hint queue
   const hintQueue = asyncQueue<string>((filepath, next) => {
     const startTime = new Date().getTime()
 
     if (filepath === 'stdin') {
-      hintStdin(ruleset, hintNext)
+      hintStdin(config, hintNext)
     } else if (/^https?:\/\//.test(filepath)) {
-      hintUrl(filepath, ruleset, hintNext)
+      hintUrl(filepath, config, hintNext)
     } else {
-      const messages = hintFile(filepath, ruleset)
+      const messages = hintFile(filepath, config)
       hintNext(messages)
     }
 
@@ -370,14 +372,15 @@ function getConfig(
   configPath: string | undefined,
   base: string,
   formatter: Formatter
-) {
+): Configuration | undefined {
   if (configPath === undefined && existsSync(base)) {
     // find default config file in parent directory
     if (statSync(base).isDirectory() === false) {
       base = dirname(base)
     }
 
     while (base) {
+      // TODO: load via cosmiconfig (https://github.com/htmlhint/HTMLHint/issues/126)
       const tmpConfigFile = resolve(base, '.htmlhintrc')
 
       if (existsSync(tmpConfigFile)) {
@@ -395,20 +398,22 @@ function getConfig(
 
   // TODO: can configPath be undefined here?
   if (configPath !== undefined && existsSync(configPath)) {
-    const config = readFileSync(configPath, 'utf-8')
-    let ruleset: Ruleset = {}
+    const configContent = readFileSync(configPath, 'utf-8')
+    let config: Configuration | undefined
 
     try {
-      ruleset = JSON.parse(stripJsonComments(config))
+      config = JSON.parse(stripJsonComments(configContent))
       formatter.emit('config', {
-        ruleset: ruleset,
-        configPath: configPath,
+        configPath,
+        config,
       })
     } catch (e) {
       // ignore
     }
 
-    return ruleset
+    // TODO: validate config
+
+    return config
   }
 }
 
@@ -456,7 +461,7 @@ function walkPath(
 }
 
 // hint file
-function hintFile(filepath: string, ruleset?: Ruleset) {
+function hintFile(filepath: string, config?: Configuration) {
   let content = ''
 
   try {
@@ -465,12 +470,12 @@ function hintFile(filepath: string, ruleset?: Ruleset) {
     // ignore
   }
 
-  return HTMLHint.verify(content, { rules: ruleset })
+  return HTMLHint.verify(content, config)
 }
 
 // hint stdin
 function hintStdin(
-  ruleset: Ruleset | undefined,
+  config: Configuration | undefined,
   callback: (messages: Hint[]) => void
 ) {
   process.stdin.setEncoding('utf8')
@@ -483,20 +488,20 @@ function hintStdin(
 
   process.stdin.on('end', () => {
     const content = buffers.join('')
-    const messages = HTMLHint.verify(content, { rules: ruleset })
+    const messages = HTMLHint.verify(content, config)
     callback(messages)
   })
 }
 
 // hint url
 function hintUrl(
   url: string,
-  ruleset: Ruleset | undefined,
+  config: Configuration | undefined,
   callback: (messages: Hint[]) => void
 ) {
   request.get(url, (error, response, body) => {
     if (!error && response.statusCode == 200) {
-      const messages = HTMLHint.verify(body, { rules: ruleset })
+      const messages = HTMLHint.verify(body, config)
       callback(messages)
     } else {
       callback([])

src/core/configuration.ts

@@ -0,0 +1,39 @@
+import { Configuration } from './types'
+
+export function isConfiguration(value: unknown): value is Configuration {
+  // Config must be an object
+  if (typeof value !== 'object') {
+    return false
+  }
+
+  // Config must not be null
+  if (value === null) {
+    return false
+  }
+
+  // This helps to get better support for TypeScript
+  const config = value as Record<string, unknown>
+
+  // If extends is defined, it must be an array
+  if (config.extends !== undefined) {
+    if (!Array.isArray(config.extends)) {
+      return false
+    }
+
+    // Any value within extens must be a string
+    for (const extension of config.extends) {
+      if (typeof extension !== 'string') {
+        return false
+      }
+    }
+  }
+
+  // If extends is defined, it must be an object
+  if (config.rules !== undefined) {
+    if (typeof config.rules !== 'object' && config.rules !== null) {
+      return false
+    }
+  }
+
+  return true
+}

src/core/core.ts

@@ -1,3 +1,4 @@
+import { isConfiguration } from './configuration'
 import HTMLParser from './htmlparser'
 import Reporter, { ReportMessageCallback } from './reporter'
 import * as HTMLRules from './rules'
@@ -15,32 +16,78 @@ export interface FormatOptions {
   indent?: number
 }
 
-class HTMLHintCore {
-  public rules: { [id: string]: Rule } = {}
-  public readonly defaultRuleset: Ruleset = {
-    'tagname-lowercase': 'error',
+const HTMLHINT_RECOMMENDED = 'htmlhint:recommended'
+const HTMLHINT_LEGACY = 'htmlhint:legacy'
+
+const DEFAULT_RULESETS: Record<string, Ruleset> = {
+  [HTMLHINT_RECOMMENDED]: {
+    'alt-require': 'warn',
+    'attr-lowercase': 'warn',
+    'attr-no-duplication': 'error',
+    'attr-no-unnecessary-whitespace': 'warn',
+    'attr-unsafe-chars': 'warn',
+    'attr-value-double-quotes': 'warn',
+    'id-class-ad-disabled': 'warn',
+    'id-unique': 'error',
+    'space-tab-mixed-disabled': 'warn',
+    'spec-char-escape': 'warn',
+    'src-not-empty': 'error',
+    'tag-pair': 'warn',
+    'tagname-lowercase': 'warn',
+    'tagname-specialchars': 'error',
+    'title-require': 'warn',
+  },
+  [HTMLHINT_LEGACY]: {
     'attr-lowercase': 'error',
+    'attr-no-duplication': 'error',
     'attr-value-double-quotes': 'error',
     'doctype-first': 'error',
-    'tag-pair': 'error',
-    'spec-char-escape': 'error',
     'id-unique': 'error',
+    'spec-char-escape': 'error',
     'src-not-empty': 'error',
-    'attr-no-duplication': 'error',
+    'tag-pair': 'error',
+    'tagname-lowercase': 'error',
     'title-require': 'error',
-  }
+  },
+}
+
+class HTMLHintCore {
+  public rules: { [id: string]: Rule } = {}
 
   public addRule(rule: Rule) {
     this.rules[rule.id] = rule
   }
 
   public verify(
     html: string,
-    config: Configuration = { rules: this.defaultRuleset }
+    config: Configuration = { extends: [HTMLHINT_RECOMMENDED] }
   ) {
-    let ruleset = config.rules ?? this.defaultRuleset
+    if (!isConfiguration(config)) {
+      throw new Error('The HTMLHint configuration is invalid')
+    }
+
+    let ruleset: Ruleset = {}
+
+    // If an empty configuration is passed, use the recommended ruleset
+    if (config.extends === undefined && config.rules === undefined) {
+      config.extends = [HTMLHINT_RECOMMENDED]
+    }
+
+    // Iterate through extensions and merge rulesets into ruleset
+    for (const extend of config.extends ?? []) {
+      if (typeof extend === 'string') {
+        const extendRuleset = DEFAULT_RULESETS[extend] ?? {}
+        ruleset = { ...ruleset, ...extendRuleset }
+      }
+    }
+
+    // Apply self-configured rules
+    ruleset = { ...ruleset, ...(config.rules ?? {}) }
+
+    // If no rules have been configured, return immediately
     if (Object.keys(ruleset).length === 0) {
-      ruleset = this.defaultRuleset
+      // console.log('Please configure some HTMLHint rules')
+      return []
     }
 
     // parse inline ruleset

src/core/types.ts

@@ -2,6 +2,7 @@ import { HTMLParser } from './core'
 import { ReportMessageCallback } from './reporter'
 
 export interface Configuration {
+  extends?: string[]
   rules?: Ruleset
 }
 

test/cli/formatters/checkstyle.spec.js

@@ -6,7 +6,7 @@ const path = require('path')
 
 describe('CLI', () => {
   describe('Formatter: checkstyle', () => {
-    it('should have stdout output with formatter checkstyle', (done) => {
+    it('Should have stdout output with formatter checkstyle', (done) => {
       const expected = fs
         .readFileSync(path.resolve(__dirname, 'checkstyle.xml'), 'utf8')
         .replace('{{path}}', path.resolve(__dirname, 'example.html'))

test/cli/formatters/checkstyle.xml

@@ -1,25 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <checkstyle version="4.3">
     <file name="{{path}}">
-        <error line="8" column="7" severity="error" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
-        <error line="8" column="14" severity="error" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
         <error line="8" column="14" severity="error" message="Duplicate of attribute name [ bad ] was found." source="htmlhint.attr-no-duplication"/>
-        <error line="9" column="7" severity="error" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
-        <error line="9" column="14" severity="error" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
+        <error line="8" column="7" severity="warning" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
+        <error line="8" column="14" severity="warning" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
         <error line="9" column="14" severity="error" message="Duplicate of attribute name [ bad ] was found." source="htmlhint.attr-no-duplication"/>
-        <error line="10" column="22" severity="error" message="Tag must be paired, no start tag: [ &lt;/input&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="11" column="3" severity="error" message="Special characters must be escaped : [ &lt; ]." source="htmlhint.spec-char-escape"/>
-        <error line="11" column="18" severity="error" message="Special characters must be escaped : [ &gt; ]." source="htmlhint.spec-char-escape"/>
-        <error line="13" column="11" severity="error" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="14" column="9" severity="error" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="15" column="7" severity="error" message="Tag must be paired, no start tag: [ &lt;/hello&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="16" column="5" severity="error" message="Tag must be paired, no start tag: [ &lt;/test&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="17" column="3" severity="error" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="21" column="15" severity="error" message="The value of attribute [ class ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
-        <error line="21" column="24" severity="error" message="The value of attribute [ what ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
-        <error line="21" column="32" severity="error" message="The value of attribute [ something ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
-        <error line="25" column="3" severity="error" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="26" column="1" severity="error" message="Tag must be paired, no start tag: [ &lt;/bad&gt; ]" source="htmlhint.tag-pair"/>
-        <error line="27" column="1" severity="error" message="Tag must be paired, no start tag: [ &lt;/bad&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="9" column="7" severity="warning" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
+        <error line="9" column="14" severity="warning" message="The value of attribute [ bad ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
+        <error line="10" column="22" severity="warning" message="Tag must be paired, no start tag: [ &lt;/input&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="11" column="3" severity="warning" message="Special characters must be escaped : [ &lt; ]." source="htmlhint.spec-char-escape"/>
+        <error line="11" column="18" severity="warning" message="Special characters must be escaped : [ &gt; ]." source="htmlhint.spec-char-escape"/>
+        <error line="13" column="11" severity="warning" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="14" column="9" severity="warning" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="15" column="7" severity="warning" message="Tag must be paired, no start tag: [ &lt;/hello&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="16" column="5" severity="warning" message="Tag must be paired, no start tag: [ &lt;/test&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="17" column="3" severity="warning" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="21" column="15" severity="warning" message="The value of attribute [ class ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
+        <error line="21" column="24" severity="warning" message="The value of attribute [ what ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
+        <error line="21" column="32" severity="warning" message="The value of attribute [ something ] must be in double quotes." source="htmlhint.attr-value-double-quotes"/>
+        <error line="25" column="3" severity="warning" message="Tag must be paired, no start tag: [ &lt;/div&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="26" column="1" severity="warning" message="Tag must be paired, no start tag: [ &lt;/bad&gt; ]" source="htmlhint.tag-pair"/>
+        <error line="27" column="1" severity="warning" message="Tag must be paired, no start tag: [ &lt;/bad&gt; ]" source="htmlhint.tag-pair"/>
     </file>
 </checkstyle>

test/cli/formatters/compact.spec.js

@@ -6,7 +6,7 @@ const path = require('path')
 
 describe('CLI', () => {
   describe('Formatter: compact', () => {
-    it('should have stdout output with formatter compact', (done) => {
+    it('Should have stdout output with formatter compact', (done) => {
       const expected = fs
         .readFileSync(path.resolve(__dirname, 'compact.txt'), 'utf8')
         .replace(