feat: move rules into dedicated attribute (#476)

* feat: move rules into dedicated attribute

* test: update tests

src/cli/htmlhint.ts

@@ -465,7 +465,7 @@ function hintFile(filepath: string, ruleset?: Ruleset) {
  // ignore
  }
 
- return HTMLHint.verify(content, ruleset)
+ return HTMLHint.verify(content, { rules: ruleset })
 }
 
 // hint stdin
@@ -483,7 +483,7 @@ function hintStdin(
 
  process.stdin.on('end', () => {
  const content = buffers.join('')
- const messages = HTMLHint.verify(content, ruleset)
+ const messages = HTMLHint.verify(content, { rules: ruleset })
  callback(messages)
  })
 }
@@ -496,7 +496,7 @@ function hintUrl(
 ) {
  request.get(url, (error, response, body) => {
  if (!error && response.statusCode == 200) {
- const messages = HTMLHint.verify(body, ruleset)
+ const messages = HTMLHint.verify(body, { rules: ruleset })
  callback(messages)
  } else {
  callback([])

src/core/core.ts

@@ -1,7 +1,14 @@
 import HTMLParser from './htmlparser'
 import Reporter, { ReportMessageCallback } from './reporter'
 import * as HTMLRules from './rules'
-import { Hint, isRuleSeverity, Rule, Ruleset, RuleSeverity } from './types'
+import {
+ Configuration,
+ Hint,
+ isRuleSeverity,
+ Rule,
+ Ruleset,
+ RuleSeverity,
+} from './types'
 
 export interface FormatOptions {
  colors?: boolean
@@ -27,7 +34,11 @@ class HTMLHintCore {
  this.rules[rule.id] = rule
  }
 
- public verify(html: string, ruleset: Ruleset = this.defaultRuleset) {
+ public verify(
+ html: string,
+ config: Configuration = { rules: this.defaultRuleset }
+ ) {
+ let ruleset = config.rules ?? this.defaultRuleset
  if (Object.keys(ruleset).length === 0) {
  ruleset = this.defaultRuleset
  }

src/core/types.ts

@@ -1,6 +1,10 @@
 import { HTMLParser } from './core'
 import { ReportMessageCallback } from './reporter'
 
+export interface Configuration {
+ rules?: Ruleset
+}
+
 export interface Rule {
  id: string
  description: string

test/core.spec.js

@@ -5,7 +5,7 @@ const HTMLHint = require('../dist/htmlhint.js').HTMLHint
 describe('Core', () => {
  it('Set false to rule no effected should result in an error', () => {
  const code = '<img src="test.gif" />'
- const messages = HTMLHint.verify(code, { 'alt-require': 'off' })
+ const messages = HTMLHint.verify(code, { rules: { 'alt-require': 'off' } })
  expect(messages.length).to.be(0)
  })
 
@@ -27,7 +27,9 @@ describe('Core', () => {
  // With value = 'error'
  let code = '<!-- htmlhint alt-require:error -->\r\n<img src="test.gif" />'
  let messages = HTMLHint.verify(code, {
- 'alt-require': 'off',
+ rules: {
+ 'alt-require': 'off',
+ },
  })
 
  expect(messages.length).to.be(1)
@@ -38,7 +40,9 @@ describe('Core', () => {
  // Without value
  code = '<!-- htmlhint alt-require -->\r\n<img src="test.gif" />'
  messages = HTMLHint.verify(code, {
- 'alt-require': 'off',
+ rules: {
+ 'alt-require': 'off',
+ },
  })
 
  expect(messages.length).to.be(1)
@@ -49,14 +53,18 @@ describe('Core', () => {
  // With value = 'off'
  code = '<!-- htmlhint alt-require:off -->\r\n<img src="test.gif" />'
  messages = HTMLHint.verify(code, {
- 'alt-require': 'error',
+ rules: {
+ 'alt-require': 'error',
+ },
  })
  expect(messages.length).to.be(0)
 
  // Without rule
  code = '<!-- htmlhint -->\r\n<img src="test.gif" />'
  messages = HTMLHint.verify(code, {
- 'alt-require': 'off',
+ rules: {
+ 'alt-require': 'off',
+ },
  })
 
  expect(messages.length).to.be(0)
@@ -66,8 +74,10 @@ describe('Core', () => {
  const code =
  'tttttttttttttttttttttttttttttttttttt<div>中文<img src="test.gif" />tttttttttttttttttttttttttttttttttttttttttttttt'
  const messages = HTMLHint.verify(code, {
- 'tag-pair': 'error',
- 'alt-require': 'error',
+ rules: {
+ 'tag-pair': 'error',
+ 'alt-require': 'error',
+ },
  })
  let arrLogs = HTMLHint.format(messages)
  expect(arrLogs.length).to.be(4)

test/rules/alt-require.spec.js

@@ -10,19 +10,19 @@ ruleOptions[ruldId] = 'warn'
 describe(`Rules: ${ruldId}`, () => {
  it('Img tag have empty alt attribute should not result in an error', () => {
  const code = '<img width="200" height="300" alt="">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Img tag have non empty alt attribute should not result in an error', () => {
  const code = '<img width="200" height="300" alt="test">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Img tag have not alt attribute should result in an error', () => {
  const code = '<img width="200" height="300">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -33,19 +33,19 @@ describe(`Rules: ${ruldId}`, () => {
  /* A tag can have shape and coords attributes and not have alt attribute */
  it('A tag have not alt attribute should not result in an error', () => {
  const code = '<a>'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Area tag have not href and alt attributes should not result in an error', () => {
  const code = '<area>'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Area[href] tag have not alt attribute should result in an error', () => {
  const code = '<area href="#test">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -55,7 +55,7 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Area[href] tag have empty alt attribute should result in an error', () => {
  const code = '<area href="#test" alt="">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -65,25 +65,25 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Area[href] tag have non emtpy alt attribute should not result in an error', () => {
  const code = '<area href="#test" alt="test">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Input tag have not type and alt attributes should not result in an error', () => {
  const code = '<input>'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Input[type="text"] tag have not alt attribute should not result in an error', () => {
  const code = '<input type="text">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Input[type="image"] tag have not alt attribute should result in an error', () => {
  const code = '<input type="image">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -93,7 +93,7 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Input[type="image"] tag have empty alt attribute should result in an error', () => {
  const code = '<input type="image" alt="">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -103,7 +103,7 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Input[type="image"] tag have non emtpy alt attribute should not result in an error', () => {
  const code = '<input type="image" alt="test">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 })

test/rules/attr-lowercase.spec.js

@@ -10,14 +10,14 @@ ruleOptions[ruldId] = 'error'
 describe(`Rules: ${ruldId}`, () => {
  it('Not all lowercase attr should result in an error', () => {
  let code = '<p TEST="abc">'
- let messages = HTMLHint.verify(code, ruleOptions)
+ let messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
  expect(messages[0].col).to.be(3)
 
  code = '<p id=""\r\n TEST1="abc" TEST2="abc">'
- messages = HTMLHint.verify(code, ruleOptions)
+ messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(2)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(2)
@@ -29,35 +29,35 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Lowercase attr should not result in an error', () => {
  const code = '<p test="abc">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Set is false should not result in an error', () => {
  const code = '<p TEST="abc">'
  ruleOptions[ruldId] = 'off'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Set to array list should not result in an error', () => {
  const code = '<p testBox="abc" tttAAA="ccc">'
  ruleOptions[ruldId] = ['error', { exceptions: ['testBox', 'tttAAA'] }]
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Set to array list with RegExp should not result in an error', () => {
  const code = '<p testBox="abc" bind:tapTop="ccc">'
  ruleOptions[ruldId] = ['error', { exceptions: ['testBox', /bind:.*/] }]
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Set to array list with regex string should not result in an error', () => {
  const code = '<p testBox="abc" [ngFor]="ccc">'
  ruleOptions[ruldId] = ['error', { exceptions: ['testBox', '/\\[.*\\]/'] }]
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 })

test/rules/attr-no-duplication.spec.js

@@ -10,7 +10,7 @@ ruleOptions[ruldId] = 'error'
 describe(`Rules: ${ruldId}`, () => {
  it('Attribute name been duplication should result in an error', () => {
  const code = '<a href="a" href="b">bbb</a>'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -19,7 +19,7 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Attribute name not been duplication should not result in an error', () => {
  const code = '<a href="a">bbb</a>'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 })

test/rules/attr-no-unnecessary-whitespace.spec.js

@@ -15,7 +15,7 @@ describe(`Rules: ${ruldId}`, () => {
  '<div title ="a" />',
  ]
  for (let i = 0; i < codes.length; i++) {
- const messages = HTMLHint.verify(codes[i], ruleOptions)
+ const messages = HTMLHint.verify(codes[i], { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -26,7 +26,7 @@ describe(`Rules: ${ruldId}`, () => {
  it('Attribute without spaces should not result in an error', () => {
  const codes = ['<div title="a" />', '<div title="a = a" />']
  for (let i = 0; i < codes.length; i++) {
- const messages = HTMLHint.verify(codes[i], ruleOptions)
+ const messages = HTMLHint.verify(codes[i], { rules: ruleOptions })
  expect(messages.length).to.be(0)
  }
  })

test/rules/attr-sort.spec.js

@@ -11,7 +11,7 @@ describe(`Rules: ${ruleId}`, () => {
  it('Attribute unsorted tags must result in an error', () => {
  const code = '<div id="test" class="class" title="tite"></div>'
 
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
 
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruleId)
@@ -21,15 +21,15 @@ describe(`Rules: ${ruleId}`, () => {
  it('Attribute unsorted tags that are unrecognizable should not throw error', () => {
  const code = '<div img="image" meta="meta" font="font"></div>'
 
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
 
  expect(messages.length).to.be(0)
  })
 
  it('Attribute unsorted of tags of various types should throw error', () => {
  const code = '<div type="type" img="image" id="id" font="font"></div>'
 
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
 
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruleId)

test/rules/attr-unsafe-chars.spec.js

@@ -11,7 +11,7 @@ describe(`Rules: ${ruldId}`, () => {
  it('Attribute value have unsafe chars should result in an error', () => {
  const code =
  '<a href="https://vimeo.com/album/1951235/video/56931059‎">Sud Web 2012</a>'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(1)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -21,14 +21,14 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Attribute value have no unsafe chars should not result in an error', () => {
  const code = '<input disabled="disabled" />'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 
  it('Attribute value have \\r\\n\\t should not result in an error', () => {
  const code =
  '<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,R0lGODlhEAAQAKEAAAAAAICAgP///wAAACH/\nC05FVFNDQVBFMi4wAwEAAAAh/hFDcmVhdGVkIHdpdGggR0lNUAAh+QQBZAADACwAAAAAEAAQAAACJIyPacLtvp5kEUwYmL00i81VXK\neNgjiioQdeqsuakXl6tIIjBQAh+QQBZAADACwAAAAAEAAQAAACIIyPacLtvp5kcb5qG85iZ2+BkyiRV8BBaEqtrKkqslEAADs=\t"/>'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 })

test/rules/attr-value-double-quotes.spec.js

@@ -10,7 +10,7 @@ ruleOptions[ruldId] = 'error'
 describe(`Rules: ${ruldId}`, () => {
  it('Attribute value closed by single quotes should result in an error', () => {
  const code = "<a href='abc' title=abc style=''>"
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(3)
  expect(messages[0].rule.id).to.be(ruldId)
  expect(messages[0].line).to.be(1)
@@ -25,7 +25,7 @@ describe(`Rules: ${ruldId}`, () => {
 
  it('Attribute value no closed should not result in an error', () => {
  const code = '<input type="button" disabled style="">'
- const messages = HTMLHint.verify(code, ruleOptions)
+ const messages = HTMLHint.verify(code, { rules: ruleOptions })
  expect(messages.length).to.be(0)
  })
 })