From bd706cd19301f58a496351750eb46878cf04af38 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 26 Jun 2020 17:19:08 +0900
Subject: [PATCH 1/8] feat: Add no-empty-component-block rule

---
 docs/rules/no-empty-component-block.md      |  68 ++++++++++
 lib/rules/no-empty-component-block.js       |  79 ++++++++++++
 tests/lib/rules/no-empty-component-block.js | 130 ++++++++++++++++++++
 3 files changed, 277 insertions(+)
 create mode 100644 docs/rules/no-empty-component-block.md
 create mode 100644 lib/rules/no-empty-component-block.js
 create mode 100644 tests/lib/rules/no-empty-component-block.js

diff --git a/docs/rules/no-empty-component-block.md b/docs/rules/no-empty-component-block.md
new file mode 100644
index 000000000..25cc0ef1f
--- /dev/null
+++ b/docs/rules/no-empty-component-block.md
@@ -0,0 +1,68 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-empty-component-block
+description: disallow the `<template>` `<script>` `<style>` block to be empty
+---
+# vue/no-empty-component-block
+> disallow the `<template>` `<script>` `<style>` block to be empty
+
+## :book: Rule Details
+
+This rule disallows the `<template>` `<script>` `<style>` block to be empty.
+
+This rule also checks block what has attribute `src`.
+See: https://vue-loader.vuejs.org/spec.html#src-imports
+
+<eslint-code-block :rules="{'vue/no-empty-component-block': ['error']}">
+
+```vue
+// ✓ GOOD
+<template>
+  <p>foo</p>
+</template>
+
+<script>
+  console.log('foo')
+</script>
+
+<style>
+  p {
+    display: inline;
+  }
+</style>
+
+<template src="./template.html"></template>
+<template src="./template.html" />
+
+<script src="./script.js"></script>
+<script src="./script.js" />
+
+<style src="./style.css"></style>
+<style src="./style.css" />
+
+
+// ✗ BAD
+<template></template>
+<template />
+<template src="" />
+
+<script></script>
+<script />
+<script src="" />
+
+<style></style>
+<style />
+<style src="" />
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-empty-component-block.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-empty-component-block.js)
diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
new file mode 100644
index 000000000..ee63e5cdc
--- /dev/null
+++ b/lib/rules/no-empty-component-block.js
@@ -0,0 +1,79 @@
+/**
+ * @author tyankatsu <https://github.com/tyankatsu0105>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+/**
+ * check whether has attribute `src`
+ */
+function hasAttributeSrc(componentBlock) {
+  const hasAttribute = componentBlock.startTag.attributes.length > 0
+
+  const hasSrc =
+    componentBlock.startTag.attributes.filter(
+      (attribute) =>
+        attribute.key.name === 'src' && attribute.value.value !== ''
+    ).length > 0
+
+  return hasAttribute && hasSrc
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'disallow the `<template>` `<script>` `<style>` block to be empty',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-empty-component-block.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpected: '`<{{ blockName }}>` is empty. Empty block is not allowed.'
+    }
+  },
+
+  /**
+   * @param {RuleContext} context - The rule context.
+   * @returns {RuleListener} AST event handlers.
+   */
+  create(context) {
+    return {
+      Program(node) {
+        const componentBlocks = node.templateBody.parent.children
+
+        for (const componentBlock of componentBlocks) {
+          if (
+            componentBlock.name !== 'template' &&
+            componentBlock.name !== 'script' &&
+            componentBlock.name !== 'style'
+          )
+            return
+
+          // https://vue-loader.vuejs.org/spec.html#src-imports
+          if (hasAttributeSrc(componentBlock)) return
+
+          if (componentBlock.children.length === 0) {
+            context.report({
+              node: componentBlock,
+              loc: componentBlock.loc,
+              messageId: 'unexpected',
+              data: {
+                blockName: componentBlock.name
+              }
+            })
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tests/lib/rules/no-empty-component-block.js b/tests/lib/rules/no-empty-component-block.js
new file mode 100644
index 000000000..bff931a1a
--- /dev/null
+++ b/tests/lib/rules/no-empty-component-block.js
@@ -0,0 +1,130 @@
+/**
+ * @author tyankatsu <https://github.com/tyankatsu0105>
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-empty-component-block')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2018 }
+})
+
+tester.run('no-empty-component-block', rule, {
+  valid: [
+    `<template><p>foo</p></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>',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template src="" />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template></template><script></script>',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template /><script />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template src="" /><script src="" />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template></template><script></script><style></style>',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template /><script /><style />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template src="" /><script src="" /><style src="" />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.'
+        }
+      ]
+    }
+  ]
+})

From 7f2c386c82e783bab36ba0eb49858c79521114f1 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 26 Jun 2020 17:22:20 +0900
Subject: [PATCH 2/8] chore: run update

---
 docs/rules/README.md | 1 +
 lib/index.js         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index d4ae75129..8bc5b1024 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -287,6 +287,7 @@ For example:
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
 | [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  |
+| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
 | [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
 | [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  |
diff --git a/lib/index.js b/lib/index.js
index 39510d3f8..ae86686a7 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -69,6 +69,7 @@ module.exports = {
     'no-dupe-keys': require('./rules/no-dupe-keys'),
     'no-duplicate-attr-inheritance': require('./rules/no-duplicate-attr-inheritance'),
     'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
+    'no-empty-component-block': require('./rules/no-empty-component-block'),
     'no-empty-pattern': require('./rules/no-empty-pattern'),
     'no-extra-parens': require('./rules/no-extra-parens'),
     'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),

From e588bdf0a70d98cc4db31de25f2dbb0da89d5dda Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 26 Jun 2020 17:29:15 +0900
Subject: [PATCH 3/8] feat: consider whether exist node.templateBody

---
 lib/rules/no-empty-component-block.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
index ee63e5cdc..f7bc9e2b3 100644
--- a/lib/rules/no-empty-component-block.js
+++ b/lib/rules/no-empty-component-block.js
@@ -49,6 +49,10 @@ module.exports = {
   create(context) {
     return {
       Program(node) {
+        if (!node.templateBody) {
+          return
+        }
+
         const componentBlocks = node.templateBody.parent.children
 
         for (const componentBlock of componentBlocks) {

From 4ab0ba8832d5604c366187bbdbc8580fade42b48 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 26 Jun 2020 17:38:29 +0900
Subject: [PATCH 4/8] refactor: use parserServices.getDocumentFragment

---
 lib/rules/no-empty-component-block.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
index f7bc9e2b3..af42e5975 100644
--- a/lib/rules/no-empty-component-block.js
+++ b/lib/rules/no-empty-component-block.js
@@ -47,14 +47,11 @@ module.exports = {
    * @returns {RuleListener} AST event handlers.
    */
   create(context) {
+    const componentBlocks = context.parserServices.getDocumentFragment()
+      .children
+
     return {
       Program(node) {
-        if (!node.templateBody) {
-          return
-        }
-
-        const componentBlocks = node.templateBody.parent.children
-
         for (const componentBlock of componentBlocks) {
           if (
             componentBlock.name !== 'template' &&

From b845da5a54ca6d0e80f98a4227b388a15490c3ba Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 26 Jun 2020 17:42:26 +0900
Subject: [PATCH 5/8] feat: consider whether exists
 context.parserServices.getDocumentFragment

---
 lib/rules/no-empty-component-block.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
index af42e5975..4ba3b9143 100644
--- a/lib/rules/no-empty-component-block.js
+++ b/lib/rules/no-empty-component-block.js
@@ -47,6 +47,10 @@ module.exports = {
    * @returns {RuleListener} AST event handlers.
    */
   create(context) {
+    if (!context.parserServices.getDocumentFragment) {
+      return {}
+    }
+
     const componentBlocks = context.parserServices.getDocumentFragment()
       .children
 

From 8022b328783d98808c4f09b76d18cdb20411ee53 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 26 Jun 2020 19:28:00 +0900
Subject: [PATCH 6/8] feat: consider whitespaces and break lines

---
 lib/rules/no-empty-component-block.js       | 17 ++++++++++++++-
 tests/lib/rules/no-empty-component-block.js | 23 +++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
index 4ba3b9143..d53be5eb7 100644
--- a/lib/rules/no-empty-component-block.js
+++ b/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,
diff --git a/tests/lib/rules/no-empty-component-block.js b/tests/lib/rules/no-empty-component-block.js
index bff931a1a..92813aa28 100644
--- a/tests/lib/rules/no-empty-component-block.js
+++ b/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.'

From 4e94cdfc6329bddbebbb98cda9eca3c75d8fc252 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 26 Jun 2020 19:30:12 +0900
Subject: [PATCH 7/8] chore run update

---
 docs/rules/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 8bc5b1024..e2353b631 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -286,8 +286,8 @@ For example:
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
-| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  |
 | [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
+| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  |
 | [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
 | [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  |

From 3f1b9d421d4d0466deb6805d173337416635f22c Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 27 Jun 2020 09:48:48 +0900
Subject: [PATCH 8/8] refactor: reflect PR review

---
 lib/rules/no-empty-component-block.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
index d53be5eb7..2df2679db 100644
--- a/lib/rules/no-empty-component-block.js
+++ b/lib/rules/no-empty-component-block.js
@@ -34,7 +34,7 @@ function isValueOnlyWhiteSpacesOrLineBreaks(componentBlock) {
   return (
     componentBlock.children.length === 1 &&
     componentBlock.children[0].type === 'VText' &&
-    /^(\s|\n)+$/.test(componentBlock.children[0].value)
+    !componentBlock.children[0].value.trim()
   )
 }
 
@@ -74,10 +74,10 @@ module.exports = {
             componentBlock.name !== 'script' &&
             componentBlock.name !== 'style'
           )
-            return
+            continue
 
           // https://vue-loader.vuejs.org/spec.html#src-imports
-          if (hasAttributeSrc(componentBlock)) return
+          if (hasAttributeSrc(componentBlock)) continue
 
           if (
             isValueOnlyWhiteSpacesOrLineBreaks(componentBlock) ||