feat: make rule compatible with options api

vuejs · Jan 12, 2024 · 63c62ab · 63c62ab
1 parent 8c0cdba
commit 63c62ab
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 15 deletions.
diff --git a/lib/rules/require-explicit-slots.js b/lib/rules/require-explicit-slots.js
@@ -6,6 +6,10 @@
 
 const utils = require('../utils')
 
+/**
+ * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TypeNode
+ */
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -17,26 +21,77 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      requireExplicitSlots:
-        'Slots must be explicitly defined with the defineSlots macro.',
+      requireExplicitSlots: 'Slots must be explicitly defined.',
       alreadyDefinedSlot: 'Slot {{slotName}} is already defined.'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
+    const sourceCode = context.getSourceCode()
+    const documentFragment =
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
+    if (!documentFragment) {
+      return {}
+    }
+    const scripts = documentFragment.children.filter(
+      (element) => utils.isVElement(element) && element.name === 'script'
+    )
+    if (scripts.every((script) => !utils.hasAttribute(script, 'lang', 'ts'))) {
+      return {}
+    }
     const slotsDefined = new Set()
 
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefineSlotsEnter(node) {
-          const typeArgument = node.typeArguments.params[0]
-          const slotsDefinitions = typeArgument.members
+          const typeArguments = node.typeArguments
+          const param = /** @type {TypeNode|undefined} */ (
+            typeArguments?.params[0]
+          )
+          if (!param) return
+
+          if (param.type === 'TSTypeLiteral') {
+            for (const memberNode of param.members) {
+              const slotName = memberNode.key.name
+              if (slotsDefined.has(slotName)) {
+                context.report({
+                  node: memberNode,
+                  messageId: 'alreadyDefinedSlot',
+                  data: {
+                    slotName
+                  }
+                })
+              } else {
+                slotsDefined.add(slotName)
+              }
+            }
+          }
+        }
+      }),
+      utils.executeOnVue(context, (obj) => {
+        const slotsProperty = obj.properties.find(
+          (property) => property.key.name === 'slots'
+        )
+        if (!slotsProperty) return
+
+        const slotsTypeHelper =
+          slotsProperty.value.typeAnnotation.typeName.name === 'SlotsType' &&
+          slotsProperty.value.typeAnnotation
+        if (!slotsTypeHelper) return
+
+        const typeArguments = slotsTypeHelper.typeArguments
+        const param = /** @type {TypeNode|undefined} */ (
+          typeArguments?.params[0]
+        )
+        if (!param) return
 
-          for (const slotDefinition of slotsDefinitions) {
-            const slotName = slotDefinition.key.name
+        if (param.type === 'TSTypeLiteral') {
+          for (const memberNode of param.members) {
+            const slotName = memberNode.key.name
             if (slotsDefined.has(slotName)) {
               context.report({
-                node: slotDefinition,
+                node: memberNode,
                 messageId: 'alreadyDefinedSlot',
                 data: {
                   slotName

diff --git a/tests/lib/rules/require-explicit-slots.js b/tests/lib/rules/require-explicit-slots.js
@@ -59,6 +59,76 @@ tester.run('require-explicit-slots', rule, {
         foo(props: { msg: string }): any
       }>()
       </script>`
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          foo(props: { msg: string }): any
+        }>,
+      })
+      </script>`
+    },
+    // does not report any error if the script is not TS
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup>
+      </script>`,
+      parserOptions: {
+        parser: null
+      }
     }
   ],
   invalid: [
@@ -74,8 +144,7 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },
@@ -91,8 +160,7 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },
@@ -108,8 +176,7 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },
@@ -128,8 +195,30 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },