feat(require-toggle-inside-transition): check directive (#2487)

Co-authored-by: Flo Edelmann <[email protected]>

Author: waynzh

Diff for: lib/rules/require-toggle-inside-transition.js

@@ -6,6 +6,20 @@
 
 const utils = require('../utils')
 
+/**
+ * @param {VDirective} vBindAppear
+ */
+function isValidBindAppear(vBindAppear) {
+  if (
+    vBindAppear.value?.expression &&
+    vBindAppear.value.expression.type === 'Literal'
+  ) {
+    return vBindAppear.value.expression?.value !== false
+  }
+
+  return true
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -35,7 +49,11 @@ module.exports = {
 
       /** @type VElement */ // @ts-expect-error
       const parent = element.parent
-      if (utils.hasAttribute(parent, 'appear')) {
+      const vBindAppear = utils.getDirective(parent, 'bind', 'appear')
+      if (
+        utils.hasAttribute(parent, 'appear') ||
+        (vBindAppear && isValidBindAppear(vBindAppear))
+      ) {
         return
       }
 

Diff for: tests/lib/rules/require-toggle-inside-transition.js

@@ -68,6 +68,15 @@ tester.run('require-toggle-inside-transition', rule, {
     {
       filename: 'test.vue',
       code: '<template><transition appear><div /></transition></template>'
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2467
+      filename: 'test.vue',
+      code: '<template><transition :appear="foo"><div /></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition :appear="true"><div /></transition></template>'
     }
   ],
   invalid: [
@@ -113,6 +122,16 @@ tester.run('require-toggle-inside-transition', rule, {
       filename: 'test.vue',
       code: '<template><Transition>  <div /></Transition></template>',
       errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition :appear="false"><div /></transition></template>',
+      errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition @appear="isLoaded"><div /></transition></template>',
+      errors: [{ messageId: 'expected' }]
     }
   ]
 })