feat: Add no-empty-component-block rule

lib/rules/no-empty-component-block.js

@@ -11,6 +11,7 @@
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
+
 /**
  * check whether has attribute `src`
  */
@@ -26,6 +27,17 @@ function hasAttributeSrc(componentBlock) {
   return hasAttribute && hasSrc
 }
 
+/**
+ * check whether value under the component block is only whitespaces or break lines
+ */
+function isValueOnlyWhiteSpacesOrLineBreaks(componentBlock) {
+  return (
+    componentBlock.children.length === 1 &&
+    componentBlock.children[0].type === 'VText' &&
+    /^(\s|\n)+$/.test(componentBlock.children[0].value)
+  )
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -67,7 +79,10 @@ module.exports = {
           // https://vue-loader.vuejs.org/spec.html#src-imports
           if (hasAttributeSrc(componentBlock)) return
 
-          if (componentBlock.children.length === 0) {
+          if (
+            isValueOnlyWhiteSpacesOrLineBreaks(componentBlock) ||
+            componentBlock.children.length === 0
+          ) {
             context.report({
               node: componentBlock,
               loc: componentBlock.loc,

tests/lib/rules/no-empty-component-block.js

@@ -14,21 +14,36 @@ const tester = new RuleTester({
 tester.run('no-empty-component-block', rule, {
   valid: [
     `<template><p>foo</p></template>`,
+    `<template>  foobar   </template>`,
     `<template><p>foo</p></template><script>console.log('foo')</script>`,
     `<template><p>foo</p></template><script>console.log('foo')</script><style>p{display: inline;}</style>`,
-
     `<template src="./template.html"></template>`,
     `<template src="./template.html" />`,
-
     `<template src="./template.html"></template><script src="./script.js"></script>`,
     `<template src="./template.html" /><script src="./script.js" />`,
-
     `<template src="./template.html"></template><script src="./script.js"></script><style src="./style.css"></style>`,
     `<template src="./template.html" /><script src="./script.js" /><style src="./style.css" />`
   ],
   invalid: [
     {
-      code: '<template></template>',
+      code: `<template></template>`,
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: `<template> </template>`,
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: `<template>
+</template>`,
       errors: [
         {
           message: '`<template>` is empty. Empty block is not allowed.'