feat(no-v-text-v-html-on-component): add allow option (#2339)

Co-authored-by: Flo Edelmann <git@flo-edelmann.de>

Author: waynzh

docs/rules/no-v-text-v-html-on-component.md

@@ -36,7 +36,33 @@ If you use v-text / v-html on a component, it will overwrite the component's con
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/no-v-text-v-html-on-component": [
+    "error",
+    { "allow": ["router-link", "nuxt-link"] }
+  ]
+}
+```
+
+- `allow` (`string[]`) ... Specify a list of custom components for which the rule should not apply.
+
+### `{ "allow": ["router-link", "nuxt-link"] }`
+
+<eslint-code-block :rules="{'vue/no-v-text-v-html-on-component': ['error', { allow: ['router-link', 'nuxt-link'] }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <router-link v-html="content" />
+  <NuxtLink v-html="content" />
+  
+  <!-- ✗ BAD -->
+  <MyComponent v-html="content" />
+</template>
+```
+
+</eslint-code-block>
 
 ## :rocket: Version
 

lib/rules/no-v-text-v-html-on-component.js

@@ -5,6 +5,7 @@
 'use strict'
 
 const utils = require('../utils')
+const casing = require('../utils/casing')
 
 module.exports = {
   meta: {
@@ -15,21 +16,53 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-v-text-v-html-on-component.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            uniqueItems: true
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       disallow:
         "Using {{directiveName}} on component may break component's content."
     }
   },
   /** @param {RuleContext} context */
   create(context) {
+    const options = context.options[0] || {}
+    /** @type {Set<string>} */
+    const allow = new Set(options.allow)
+
+    /**
+     * Check whether the given node is an allowed component or not.
+     * @param {VElement} node The start tag node to check.
+     * @returns {boolean} `true` if the node is an allowed component.
+     */
+    function isAllowedComponent(node) {
+      const componentName = node.rawName
+      return (
+        allow.has(componentName) ||
+        allow.has(casing.pascalCase(componentName)) ||
+        allow.has(casing.kebabCase(componentName))
+      )
+    }
+
     /**
      * Verify for v-text and v-html directive
      * @param {VDirective} node
      */
     function verify(node) {
       const element = node.parent.parent
-      if (utils.isCustomComponent(element)) {
+      if (utils.isCustomComponent(element) && !isAllowedComponent(element)) {
         context.report({
           node,
           loc: node.loc,

tests/lib/rules/no-v-text-v-html-on-component.js

@@ -40,6 +40,25 @@ tester.run('no-v-text-v-html-on-component', rule, {
         <MyComponent v-if="content" />
       </template>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <router-link v-text="content" />
+      </template>
+      `,
+      options: [{ allow: ['router-link'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <router-link v-html="content" />
+        <NuxtLink v-html="content" />
+      </template>
+      `,
+      options: [{ allow: ['RouterLink', 'nuxt-link'] }]
     }
   ],
   invalid: [
@@ -132,6 +151,22 @@ tester.run('no-v-text-v-html-on-component', rule, {
           column: 30
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <router-link v-html="content" />
+      </template>
+      `,
+      options: [{ allow: ['nuxt-link'] }],
+      errors: [
+        {
+          message: "Using v-html on component may break component's content.",
+          line: 3,
+          column: 22
+        }
+      ]
     }
   ]
 })