feat: ignore attribute binding except string literal

Author: waynzh

lib/rules/require-explicit-slots.js

@@ -35,6 +35,21 @@ function getSlotsName(node) {
   return null
 }
 
+/**
+ * @param {VElement} node
+ * @return {VAttribute | VDirective | undefined}
+ */
+function getSlotNameNode(node) {
+  return node.startTag.attributes.find(
+    (node) =>
+      (!node.directive && node.key.name === 'name') ||
+      (node.directive &&
+        node.key.name.name === 'bind' &&
+        node.key.argument?.type === 'VIdentifier' &&
+        node.key.argument?.name === 'name')
+  )
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -68,6 +83,19 @@ module.exports = {
     }
     const slotsDefined = new Set()
 
+    /**
+     * @param {VElement} node
+     * @param {string | undefined} slotName
+     */
+    function reportMissingSlot(node, slotName) {
+      if (!slotsDefined.has(slotName)) {
+        context.report({
+          node,
+          messageId: 'requireExplicitSlots'
+        })
+      }
+    }
+
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefineSlotsEnter(node) {
@@ -139,32 +167,26 @@ module.exports = {
       utils.defineTemplateBodyVisitor(context, {
         /** @param {VElement} node */
         "VElement[name='slot']"(node) {
-          const nameNode = node.startTag.attributes.find(
-            (node) =>
-              (!node.directive && node.key.name === 'name') ||
-              (node.directive &&
-                node.key.name.name === 'bind' &&
-                node.key.argument?.type === 'VIdentifier' &&
-                node.key.argument?.name === 'name')
-          )
+          const nameNode = getSlotNameNode(node)
 
-          /** @type {string | undefined} */
-          let slotName
+          // if no slot name is declared, default to 'default'
           if (!nameNode) {
-            // If no slot name is declared, default to 'default'
-            slotName = 'default'
-          } else if (nameNode.directive) {
-            // ignore attribute binding
+            reportMissingSlot(node, 'default')
             return
-          } else {
-            slotName = nameNode.value?.value
           }
 
-          if (!slotsDefined.has(slotName)) {
-            context.report({
-              node,
-              messageId: 'requireExplicitSlots'
-            })
+          if (nameNode.directive) {
+            const expression = nameNode.value?.expression
+            // ignore attribute binding except string literal
+            if (!expression || !utils.isStringLiteral(expression)) {
+              return
+            }
+
+            const name = utils.getStringLiteralValue(expression) || undefined
+            reportMissingSlot(node, name)
+          } else {
+            // check and report if slot name is declared or is undefined
+            reportMissingSlot(node, nameNode.value?.value)
           }
         }
       })

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

@@ -161,13 +161,29 @@ tester.run('require-explicit-slots', rule, {
         }
       }
     },
-    // ignore attribute binding
+    // attribute binding
     {
       filename: 'test.vue',
       code: `
       <template>
         <div>
           <slot :name="'foo'"></slot>
+          <slot :name="\`bar\`"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+        bar(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="bar"></slot>
         </div>
       </template>
       <script setup lang="ts">
@@ -306,6 +322,26 @@ tester.run('require-explicit-slots', rule, {
         }
       ]
     },
+    {
+      // ignore attribute binding except string literal
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="'foo'"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
     {
       filename: 'test.vue',
       code: `