Fix false positives for namespace component in `vue/script-setup-uses…

…-vars` rule (#1602)
vuejs · Aug 10, 2021 · 628f409 · 628f409
1 parent 59db655
commit 628f409
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/lib/rules/script-setup-uses-vars.js b/lib/rules/script-setup-uses-vars.js
@@ -53,28 +53,32 @@ module.exports = {
     /**
      * `casing.camelCase()` converts the beginning to lowercase,
      * but does not convert the case of the beginning character when converting with Vue3.
-     * @see https://github.com/vuejs/vue-next/blob/1ffd48a2f5fd3eead3ea29dae668b7ed1c6f6130/packages/shared/src/index.ts#L116
+     * @see https://github.com/vuejs/vue-next/blob/2749c15170ad4913e6530a257db485d4e7ed2283/packages/shared/src/index.ts#L116
      * @param {string} str
      */
     function camelize(str) {
       return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
     }
     /**
-     * @see https://github.com/vuejs/vue-next/blob/1ffd48a2f5fd3eead3ea29dae668b7ed1c6f6130/packages/compiler-core/src/transforms/transformElement.ts#L321
+     * @see https://github.com/vuejs/vue-next/blob/2749c15170ad4913e6530a257db485d4e7ed2283/packages/compiler-core/src/transforms/transformElement.ts#L333
      * @param {string} name
      */
-    function markElementVariableAsUsed(name) {
+    function markSetupReferenceVariableAsUsed(name) {
       if (scriptVariableNames.has(name)) {
         context.markVariableAsUsed(name)
+        return true
       }
       const camelName = camelize(name)
       if (scriptVariableNames.has(camelName)) {
         context.markVariableAsUsed(camelName)
+        return true
       }
       const pascalName = casing.capitalize(camelName)
       if (scriptVariableNames.has(pascalName)) {
         context.markVariableAsUsed(pascalName)
+        return true
       }
+      return false
     }
 
     return utils.defineTemplateBodyVisitor(
@@ -97,14 +101,21 @@ module.exports = {
           ) {
             return
           }
-          markElementVariableAsUsed(node.rawName)
+          if (!markSetupReferenceVariableAsUsed(node.rawName)) {
+            // Check namespace
+            // https://github.com/vuejs/vue-next/blob/2749c15170ad4913e6530a257db485d4e7ed2283/packages/compiler-core/src/transforms/transformElement.ts#L304
+            const dotIndex = node.rawName.indexOf('.')
+            if (dotIndex > 0) {
+              markSetupReferenceVariableAsUsed(node.rawName.slice(0, dotIndex))
+            }
+          }
         },
         /** @param {VDirective} node */
         'VAttribute[directive=true]'(node) {
           if (utils.isBuiltInDirectiveName(node.key.name.name)) {
             return
           }
-          markElementVariableAsUsed(`v-${node.key.name.rawName}`)
+          markSetupReferenceVariableAsUsed(`v-${node.key.name.rawName}`)
         },
         /** @param {VAttribute} node */
         'VAttribute[directive=false]'(node) {

diff --git a/lib/utils/index.js b/lib/utils/index.js
@@ -704,6 +704,7 @@ module.exports = {
       name === 'pre' ||
       name === 'cloak' ||
       name === 'once' ||
+      name === 'memo' ||
       name === 'is'
     )
   },

diff --git a/tests/lib/rules/script-setup-uses-vars.js b/tests/lib/rules/script-setup-uses-vars.js
@@ -198,6 +198,22 @@ describe('script-setup-uses-vars', () => {
           }
         </style>
         `
+      },
+      // ns
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+        /* eslint script-setup-uses-vars: 1 */
+        import * as Form from './form-components'
+        </script>
+
+        <template>
+          <Form.Input>
+            <Form.Label>label</Form.Label>
+          </Form.Input>
+        </template>
+        `
       }
     ],