feat: implement require-explicit-slots

docs/rules/require-explicit-slots.md

@@ -0,0 +1,71 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-explicit-slots
+description: require slots to be explicitly defined with defineSlots
+---
+
+# vue/require-explicit-slots
+
+> require slots to be explicitly defined with defineSlots
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule enforces all slots used in the template to be defined once
+in the `script setup` block with the [`defineSlots`](https://vuejs.org/api/sfc-script-setup.html) macro.
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+<script setup lang="ts">
+defineSlots<{
+  default(props: { msg: string }): any
+}>()
+</script>
+
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <slot name="foo" />
+  </div>
+</template>
+<script setup lang="ts">
+defineSlots<{
+  foo(props: { msg: string }): any
+}>()
+</script>
+
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+<script setup lang="ts"></script>
+
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <slot name="foo" />
+  </div>
+</template>
+<script setup lang="ts">
+defineSlots<{
+  bar(props: { msg: string }): any
+}>()
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.

lib/rules/require-explicit-slots.js

@@ -0,0 +1,73 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require slots to be explicitly defined with defineSlots',
+      categories: ['vue3-strongly-recommended'],
+      url: 'https://eslint.vuejs.org/rules/require-explicit-slots.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      requireExplicitSlots:
+        'Slots must be explicitly defined with the defineSlots macro.',
+      alreadyDefinedSlot: 'Slot {{slotName}} is already defined.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const slotsDefined = new Set()
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefineSlotsEnter(node) {
+          const typeArgument = node.typeArguments.params[0]
+          const slotsDefinitions = typeArgument.members
+
+          for (const slotDefinition of slotsDefinitions) {
+            const slotName = slotDefinition.key.name
+            if (slotsDefined.has(slotName)) {
+              context.report({
+                node: slotDefinition,
+                messageId: 'alreadyDefinedSlot',
+                data: {
+                  slotName
+                }
+              })
+            } else {
+              slotsDefined.add(slotName)
+            }
+          }
+        }
+      }),
+      utils.defineTemplateBodyVisitor(context, {
+        "VElement[name='slot']"(node) {
+          let slotName = 'default'
+
+          const slotNameAttr = node.startTag.attributes.find(
+            (attribute) => attribute.key.name === 'name'
+          )
+
+          if (slotNameAttr) {
+            slotName = slotNameAttr.value.value
+          }
+
+          if (!slotsDefined.has(slotName)) {
+            context.report({
+              node,
+              messageId: 'requireExplicitSlots'
+            })
+          }
+        }
+      })
+    )
+  }
+}

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

@@ -0,0 +1,180 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/require-explicit-slots')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    parser: require.resolve('@typescript-eslint/parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('require-explicit-slots', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+      }>()
+      </script>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+        foo(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+      }>()
+      defineSlots<{
+        default(props: { msg: string }): any,
+        foo(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    }
+  ]
+})