feat(require-toggle-inside-transition): add additionalDirectives option (#2535) (#2537)

Author: cjpearson

docs/rules/require-toggle-inside-transition.md

@@ -33,7 +33,34 @@ This rule reports elements inside `<transition>` that do not control the display
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/require-toggle-inside-transition": ["error", {
+    "additionalDirectives": []
+  }]
+}
+```
+
+- `additionalDirectives` (`string[]`) ... Custom directives which will satisfy this rule in addition to `v-show` and `v-if`. Should be added without the `v-` prefix.
+
+### `additionalDirectives: ["dialog"]`
+
+<eslint-code-block :rules="{'vue/require-toggle-inside-transition': ['error', {additionalDirectives: ['dialog']}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <transition><div v-if="show" /></transition>
+  <transition><div v-show="show" /></transition>
+  <transition><dialog v-dialog="show" /></transition>
+
+  <!-- ✗ BAD -->
+  <transition><div /></transition>
+  <transition><div v-custom="show" /></transition>
+<template>
+```
+
+</eslint-code-block>
 
 ## :books: Further Reading
 

lib/rules/require-toggle-inside-transition.js

@@ -20,6 +20,25 @@ function isValidBindAppear(vBindAppear) {
   return true
 }
 
+/**
+ * @param {string[]} directives
+ */
+function createDirectiveList(directives) {
+  let str = ''
+
+  for (const [index, directive] of directives.entries()) {
+    if (index === 0) {
+      str += `\`v-${directive}\``
+    } else if (index < directives.length - 1) {
+      str += `, \`v-${directive}\``
+    } else {
+      str += ` or \`v-${directive}\``
+    }
+  }
+
+  return str
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -30,14 +49,34 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/require-toggle-inside-transition.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          additionalDirectives: {
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            uniqueItems: true
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       expected:
-        'The element inside `<transition>` is expected to have a `v-if` or `v-show` directive.'
+        'The element inside `<transition>` is expected to have a {{allowedDirectives}} directive.'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
+    /** @type {Array<string>} */
+    const additionalDirectives =
+      (context.options[0] && context.options[0].additionalDirectives) || []
+    const allowedDirectives = ['if', 'show', ...additionalDirectives]
+    const allowedDirectivesString = createDirectiveList(allowedDirectives)
+
     /**
      * Check if the given element has display control.
      * @param {VElement} element The element node to check.
@@ -59,14 +98,18 @@ module.exports = {
 
       if (
         element.name !== 'slot' &&
-        !utils.hasDirective(element, 'if') &&
-        !utils.hasDirective(element, 'show') &&
+        !allowedDirectives.some((directive) =>
+          utils.hasDirective(element, directive)
+        ) &&
         !utils.hasDirective(element, 'bind', 'key')
       ) {
         context.report({
           node: element.startTag,
           loc: element.startTag.loc,
-          messageId: 'expected'
+          messageId: 'expected',
+          data: {
+            allowedDirectives: allowedDirectivesString
+          }
         })
       }
     }

tests/lib/rules/require-toggle-inside-transition.js

@@ -77,6 +77,15 @@ tester.run('require-toggle-inside-transition', rule, {
     {
       filename: 'test.vue',
       code: '<template><transition :appear="true"><div /></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><dialog v-dialog="show" /></transition></template>',
+      options: [
+        {
+          additionalDirectives: ['dialog']
+        }
+      ]
     }
   ],
   invalid: [
@@ -132,6 +141,36 @@ tester.run('require-toggle-inside-transition', rule, {
       filename: 'test.vue',
       code: '<template><transition @appear="isLoaded"><div /></transition></template>',
       errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><dialog v-dialog="show" /></transition></template>',
+      options: [
+        {
+          additionalDirectives: []
+        }
+      ],
+      errors: [
+        {
+          messageId: 'expected',
+          data: { allowedDirectives: '`v-if` or `v-show`' }
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><div v-custom="show" /></transition></template>',
+      options: [
+        {
+          additionalDirectives: ['dialog']
+        }
+      ],
+      errors: [
+        {
+          messageId: 'expected',
+          data: { allowedDirectives: '`v-if`, `v-show` or `v-dialog`' }
+        }
+      ]
     }
   ]
 })