fix(require-explicit-slots): Add support for type reference

Author: sanderdewinter

lib/rules/require-explicit-slots.js

@@ -5,6 +5,7 @@
 'use strict'
 
 const utils = require('../utils')
+const { getComponentPropsFromTypeDefine } = require('../utils/ts-utils')
 
 /**
  * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TypeNode
@@ -95,6 +96,32 @@ module.exports = {
                 slotsDefined.add(slotName)
               }
             }
+          } else if (
+            param.type === 'TSTypeReference' &&
+            param.typeName.type === 'Identifier'
+          ) {
+            const componentPropsFromTypeDefine =
+              getComponentPropsFromTypeDefine(context, typeArguments?.params[0])
+
+            for (const memberNode of componentPropsFromTypeDefine) {
+              const slotName = memberNode.propName
+
+              if (!slotName || !memberNode.node) {
+                continue
+              }
+
+              if (slotsDefined.has(slotName)) {
+                context.report({
+                  node: memberNode.node,
+                  messageId: 'alreadyDefinedSlot',
+                  data: {
+                    slotName
+                  }
+                })
+              } else {
+                slotsDefined.add(slotName)
+              }
+            }
           }
         }
       }),

tests/lib/rules/require-explicit-slots.js

@@ -160,6 +160,36 @@ tester.run('require-explicit-slots', rule, {
           parser: null
         }
       }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script lang="ts" setup>
+      interface Slots {
+        default: () => string;
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface MySlots {
+        foo: (msg: string) => any
+      }
+      defineSlots<MySlots>()
+      </script>`
     }
   ],
   invalid: [
@@ -333,6 +363,55 @@ tester.run('require-explicit-slots', rule, {
           message: 'Slot foo is already defined.'
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface MySlots {
+        default: any;
+        foo: (message: string) => any;
+      }
+      defineSlots<MySlots>()
+      defineSlots<{
+        default(props: { msg: string }): any,
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot default is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface MySlots {
+        default: any;
+        foo: (message: string) => any;
+      }
+      defineSlots<MySlots>()
+      defineSlots<MySlots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot default is already defined.'
+        },
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
     }
   ]
 })