Add ignoreWhenEmpty options to singleline/multiline-html-element-content-newline (#684)

* Add `ignoreWhenEmpty` options to multiline-html-element-content-newline and singleline-html-element-content-newline

* add sugestions from code review

Co-Authored-By: Michał Sajnóg <[email protected]>

Author: armano2

docs/rules/multiline-html-element-content-newline.md

@@ -74,12 +74,15 @@ This rule enforces a line break before and after the contents of a multiline ele
 
 ```json
 {
-  "vue/multiline-html-element-content-newline": ["error", {
-    "ignores": ["pre", "textarea"]
-  }]
+    "vue/multiline-html-element-content-newline": ["error", {
+        "ignoreWhenEmpty": true,
+        "ignores": ["pre", "textarea"]
+    }]
 }
 ```
 
+- `ignoreWhenEmpty` ... disables reporting when element has no content.
+    default `true`
 - `ignores` ... the configuration for element names to ignore line breaks style.  
     default `["pre", "textarea"]`
 

docs/rules/singleline-html-element-content-newline.md

@@ -52,13 +52,16 @@ This rule enforces a line break before and after the contents of a singleline el
 {
   "vue/singleline-html-element-content-newline": ["error", {
     "ignoreWhenNoAttributes": true,
+    "ignoreWhenEmpty": true,
     "ignores": ["pre", "textarea"]
   }]
 }
 ```
 
 - `ignoreWhenNoAttributes` ... allows having contents in one line, when given element has no attributes.
     default `true`
+- `ignoreWhenEmpty` ... disables reporting when element has no content.
+    default `true`
 - `ignores` ... the configuration for element names to ignore line breaks style.  
     default `["pre", "textarea"]`
 

lib/rules/multiline-html-element-content-newline.js

@@ -21,7 +21,8 @@ function isMultilineElement (element) {
 
 function parseOptions (options) {
   return Object.assign({
-    ignores: ['pre', 'textarea']
+    ignores: ['pre', 'textarea'],
+    ignoreWhenEmpty: true
   }, options)
 }
 
@@ -60,7 +61,10 @@ module.exports = {
     schema: [{
       type: 'object',
       properties: {
-        'ignores': {
+        ignoreWhenEmpty: {
+          type: 'boolean'
+        },
+        ignores: {
           type: 'array',
           items: { type: 'string' },
           uniqueItems: true,
@@ -76,7 +80,9 @@ module.exports = {
   },
 
   create (context) {
-    const ignores = parseOptions(context.options[0]).ignores
+    const options = parseOptions(context.options[0])
+    const ignores = options.ignores
+    const ignoreWhenEmpty = options.ignoreWhenEmpty
     const template = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
     const sourceCode = context.getSourceCode()
 
@@ -108,6 +114,14 @@ module.exports = {
         }
 
         const getTokenOption = { includeComments: true, filter: (token) => token.type !== 'HTMLWhitespace' }
+        if (
+          ignoreWhenEmpty &&
+          node.children.length === 0 &&
+          template.getFirstTokensBetween(node.startTag, node.endTag, getTokenOption).length === 0
+        ) {
+          return
+        }
+
         const contentFirst = template.getTokenAfter(node.startTag, getTokenOption)
         const contentLast = template.getTokenBefore(node.endTag, getTokenOption)
 

lib/rules/singleline-html-element-content-newline.js

@@ -22,7 +22,8 @@ function isSinglelineElement (element) {
 function parseOptions (options) {
   return Object.assign({
     ignores: ['pre', 'textarea'],
-    ignoreWhenNoAttributes: true
+    ignoreWhenNoAttributes: true,
+    ignoreWhenEmpty: true
   }, options)
 }
 
@@ -58,6 +59,9 @@ module.exports = {
         ignoreWhenNoAttributes: {
           type: 'boolean'
         },
+        ignoreWhenEmpty: {
+          type: 'boolean'
+        },
         ignores: {
           type: 'array',
           items: { type: 'string' },
@@ -77,6 +81,7 @@ module.exports = {
     const options = parseOptions(context.options[0])
     const ignores = options.ignores
     const ignoreWhenNoAttributes = options.ignoreWhenNoAttributes
+    const ignoreWhenEmpty = options.ignoreWhenEmpty
     const template = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
     const sourceCode = context.getSourceCode()
 
@@ -111,6 +116,14 @@ module.exports = {
         }
 
         const getTokenOption = { includeComments: true, filter: (token) => token.type !== 'HTMLWhitespace' }
+        if (
+          ignoreWhenEmpty &&
+          node.children.length === 0 &&
+          template.getFirstTokensBetween(node.startTag, node.endTag, getTokenOption).length === 0
+        ) {
+          return
+        }
+
         const contentFirst = template.getTokenAfter(node.startTag, getTokenOption)
         const contentLast = template.getTokenBefore(node.endTag, getTokenOption)
 

tests/lib/rules/multiline-html-element-content-newline.js

@@ -26,6 +26,19 @@ tester.run('multiline-html-element-content-newline', rule, {
     `<template><div class="panel">content</div></template>`,
     `<template><div class="panel"><div></div></div></template>`,
     `<template><div class="panel"><!-- comment --></div></template>`,
+    `
+      <template>
+        <slot
+          name="panel"
+        ></slot>
+      </template>
+    `,
+    `
+      <template>
+        <div
+          ></div>
+      </template>
+    `,
     `
       <template>
         <div class="panel">
@@ -525,6 +538,7 @@ content
 </div>
         </template>
       `,
+      options: [{ ignoreWhenEmpty: false }],
       errors: ['Expected 1 line break after opening tag (`<div>`), but no line breaks found.']
     }
   ]

tests/lib/rules/singleline-html-element-content-newline.js

@@ -23,6 +23,11 @@ const tester = new RuleTester({
 
 tester.run('singleline-html-element-content-newline', rule, {
   valid: [
+    `
+      <template>
+        <slot name="panel"></slot>
+      </template>
+    `,
     `
       <template>
         <div class="panel">
@@ -319,6 +324,7 @@ content
 </div>
         </template>
       `,
+      options: [{ ignoreWhenEmpty: false }],
       errors: [
         'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
       ]
@@ -429,7 +435,7 @@ singleline element
           <div></div>
         </template>
       `,
-      options: [{ ignoreWhenNoAttributes: false }],
+      options: [{ ignoreWhenEmpty: false, ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <div>
@@ -446,7 +452,7 @@ singleline element
           <div>    </div>
         </template>
       `,
-      options: [{ ignoreWhenNoAttributes: false }],
+      options: [{ ignoreWhenEmpty: false, ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <div>