From e5ca8162e1e1ea15a2183a460f01874ca972f8ec Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 2 Jul 2021 09:52:31 +0900
Subject: [PATCH] Update

---
 docs/rules/script-setup-uses-vars.md      |   4 +
 lib/rules/script-setup-uses-vars.js       |  11 +-
 lib/utils/index.js                        | 223 ++++++++++++++--------
 tests/lib/rules/script-setup-uses-vars.js |  21 ++
 4 files changed, 170 insertions(+), 89 deletions(-)

diff --git a/docs/rules/script-setup-uses-vars.md b/docs/rules/script-setup-uses-vars.md
index 5ad4bb8e6..0612c75a9 100644
--- a/docs/rules/script-setup-uses-vars.md
+++ b/docs/rules/script-setup-uses-vars.md
@@ -54,6 +54,10 @@ If you are not using `<script setup>` or if you do not use the `no-unused-vars`
 - [vue/jsx-uses-vars](./jsx-uses-vars.md)
 - [no-unused-vars](https://eslint.org/docs/rules/no-unused-vars)
 
+## :books: Further Reading
+
+- [Vue RFCs - 0040-script-setup](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md)
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/script-setup-uses-vars.js)
diff --git a/lib/rules/script-setup-uses-vars.js b/lib/rules/script-setup-uses-vars.js
index ef1221718..e08af640f 100644
--- a/lib/rules/script-setup-uses-vars.js
+++ b/lib/rules/script-setup-uses-vars.js
@@ -31,16 +31,7 @@ module.exports = {
    * @returns {RuleListener} AST event handlers.
    */
   create(context) {
-    const df =
-      context.parserServices.getDocumentFragment &&
-      context.parserServices.getDocumentFragment()
-    if (!df) {
-      return {}
-    }
-    const scriptSetupNode = df.children
-      .filter(utils.isVElement)
-      .find((e) => e.name === 'script' && utils.hasAttribute(e, 'setup'))
-    if (!scriptSetupNode) {
+    if (!utils.isScriptSetup(context)) {
       return {}
     }
     /** @type {Set<string>} */
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 3dc482164..bfe786aa3 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -406,28 +406,6 @@ module.exports = {
     return null
   },
 
-  /**
-   * Check whether the given start tag has specific directive.
-   * @param {VElement} node The start tag node to check.
-   * @param {string} name The attribute name to check.
-   * @param {string} [value] The attribute value to check.
-   * @returns {boolean} `true` if the start tag has the attribute.
-   */
-  hasAttribute(node, name, value) {
-    return Boolean(this.getAttribute(node, name, value))
-  },
-
-  /**
-   * Check whether the given start tag has specific directive.
-   * @param {VElement} node The start tag node to check.
-   * @param {string} name The directive name to check.
-   * @param {string} [argument] The directive argument to check.
-   * @returns {boolean} `true` if the start tag has the directive.
-   */
-  hasDirective(node, name, argument) {
-    return Boolean(this.getDirective(node, name, argument))
-  },
-
   /**
    * Check whether the given directive attribute has their empty value (`=""`).
    * @param {VDirective} node The directive attribute node to check.
@@ -515,24 +493,16 @@ module.exports = {
    * @param {string} [value] The attribute value to check.
    * @returns {VAttribute | null} The found attribute.
    */
-  getAttribute(node, name, value) {
-    return (
-      node.startTag.attributes.find(
-        /**
-         * @param {VAttribute | VDirective} node
-         * @returns {node is VAttribute}
-         */
-        (node) => {
-          return (
-            !node.directive &&
-            node.key.name === name &&
-            (value === undefined ||
-              (node.value != null && node.value.value === value))
-          )
-        }
-      ) || null
-    )
-  },
+  getAttribute,
+
+  /**
+   * Check whether the given start tag has specific directive.
+   * @param {VElement} node The start tag node to check.
+   * @param {string} name The attribute name to check.
+   * @param {string} [value] The attribute value to check.
+   * @returns {boolean} `true` if the start tag has the attribute.
+   */
+  hasAttribute,
 
   /**
    * Get the directive list which has the given name.
@@ -540,19 +510,7 @@ module.exports = {
    * @param {string} name The directive name to check.
    * @returns {VDirective[]} The array of `v-slot` directives.
    */
-  getDirectives(node, name) {
-    const attributes =
-      node.type === 'VElement' ? node.startTag.attributes : node.attributes
-    return attributes.filter(
-      /**
-       * @param {VAttribute | VDirective} node
-       * @returns {node is VDirective}
-       */
-      (node) => {
-        return node.directive && node.key.name.name === name
-      }
-    )
-  },
+  getDirectives,
   /**
    * Get the directive which has the given name.
    * @param {VElement} node The start tag node to check.
@@ -560,26 +518,16 @@ module.exports = {
    * @param {string} [argument] The directive argument to check.
    * @returns {VDirective | null} The found directive.
    */
-  getDirective(node, name, argument) {
-    return (
-      node.startTag.attributes.find(
-        /**
-         * @param {VAttribute | VDirective} node
-         * @returns {node is VDirective}
-         */
-        (node) => {
-          return (
-            node.directive &&
-            node.key.name.name === name &&
-            (argument === undefined ||
-              (node.key.argument &&
-                node.key.argument.type === 'VIdentifier' &&
-                node.key.argument.name) === argument)
-          )
-        }
-      ) || null
-    )
-  },
+  getDirective,
+
+  /**
+   * Check whether the given start tag has specific directive.
+   * @param {VElement} node The start tag node to check.
+   * @param {string} name The directive name to check.
+   * @param {string} [argument] The directive argument to check.
+   * @returns {boolean} `true` if the start tag has the directive.
+   */
+  hasDirective,
 
   /**
    * Returns the list of all registered components
@@ -643,13 +591,13 @@ module.exports = {
     for (const childNode of node.children) {
       if (childNode.type === 'VElement') {
         let connected
-        if (this.hasDirective(childNode, 'if')) {
+        if (hasDirective(childNode, 'if')) {
           connected = false
           vIf = true
-        } else if (this.hasDirective(childNode, 'else-if')) {
+        } else if (hasDirective(childNode, 'else-if')) {
           connected = vIf
           vIf = true
-        } else if (this.hasDirective(childNode, 'else')) {
+        } else if (hasDirective(childNode, 'else')) {
           connected = vIf
           vIf = false
         } else {
@@ -685,9 +633,9 @@ module.exports = {
         !this.isHtmlWellKnownElementName(node.rawName)) ||
       (this.isSvgElementNode(node) &&
         !this.isSvgWellKnownElementName(node.rawName)) ||
-      this.hasAttribute(node, 'is') ||
-      this.hasDirective(node, 'bind', 'is') ||
-      this.hasDirective(node, 'is')
+      hasAttribute(node, 'is') ||
+      hasDirective(node, 'bind', 'is') ||
+      hasDirective(node, 'is')
     )
   },
 
@@ -1023,6 +971,28 @@ module.exports = {
 
   isVueFile,
 
+  /**
+   * Checks whether the current file is uses `<script setup>`
+   * @param {RuleContext} context The ESLint rule context object.
+   */
+  isScriptSetup(context) {
+    const df =
+      context.parserServices.getDocumentFragment &&
+      context.parserServices.getDocumentFragment()
+    if (!df) {
+      return false
+    }
+    const scripts = df.children
+      .filter(isVElement)
+      .filter((e) => e.name === 'script')
+    if (scripts.length === 2) {
+      return scripts.some((e) => hasAttribute(e, 'setup'))
+    } else {
+      const script = scripts[0]
+      return script && hasAttribute(script, 'setup')
+    }
+  },
+
   /**
    * Check if current file is a Vue instance or component and call callback
    * @param {RuleContext} context The ESLint rule context object.
@@ -2199,3 +2169,98 @@ function* iterateWatchHandlerValues(property) {
     yield value
   }
 }
+
+/**
+ * Get the attribute which has the given name.
+ * @param {VElement} node The start tag node to check.
+ * @param {string} name The attribute name to check.
+ * @param {string} [value] The attribute value to check.
+ * @returns {VAttribute | null} The found attribute.
+ */
+function getAttribute(node, name, value) {
+  return (
+    node.startTag.attributes.find(
+      /**
+       * @param {VAttribute | VDirective} node
+       * @returns {node is VAttribute}
+       */
+      (node) => {
+        return (
+          !node.directive &&
+          node.key.name === name &&
+          (value === undefined ||
+            (node.value != null && node.value.value === value))
+        )
+      }
+    ) || null
+  )
+}
+
+/**
+ * Get the directive list which has the given name.
+ * @param {VElement | VStartTag} node The start tag node to check.
+ * @param {string} name The directive name to check.
+ * @returns {VDirective[]} The array of `v-slot` directives.
+ */
+function getDirectives(node, name) {
+  const attributes =
+    node.type === 'VElement' ? node.startTag.attributes : node.attributes
+  return attributes.filter(
+    /**
+     * @param {VAttribute | VDirective} node
+     * @returns {node is VDirective}
+     */
+    (node) => {
+      return node.directive && node.key.name.name === name
+    }
+  )
+}
+/**
+ * Get the directive which has the given name.
+ * @param {VElement} node The start tag node to check.
+ * @param {string} name The directive name to check.
+ * @param {string} [argument] The directive argument to check.
+ * @returns {VDirective | null} The found directive.
+ */
+function getDirective(node, name, argument) {
+  return (
+    node.startTag.attributes.find(
+      /**
+       * @param {VAttribute | VDirective} node
+       * @returns {node is VDirective}
+       */
+      (node) => {
+        return (
+          node.directive &&
+          node.key.name.name === name &&
+          (argument === undefined ||
+            (node.key.argument &&
+              node.key.argument.type === 'VIdentifier' &&
+              node.key.argument.name) === argument)
+        )
+      }
+    ) || null
+  )
+}
+
+/**
+ * Check whether the given start tag has specific directive.
+ * @param {VElement} node The start tag node to check.
+ * @param {string} name The attribute name to check.
+ * @param {string} [value] The attribute value to check.
+ * @returns {boolean} `true` if the start tag has the attribute.
+ */
+function hasAttribute(node, name, value) {
+  return Boolean(getAttribute(node, name, value))
+}
+
+/**
+ * Check whether the given start tag has specific directive.
+ * @param {VElement} node The start tag node to check.
+ * @param {string} name The directive name to check.
+ * @param {string} [argument] The directive argument to check.
+ * @returns {boolean} `true` if the start tag has the directive.
+ */
+function hasDirective(node, name, argument) {
+  return Boolean(getDirective(node, name, argument))
+}
diff --git a/tests/lib/rules/script-setup-uses-vars.js b/tests/lib/rules/script-setup-uses-vars.js
index d01ffba96..5d7c7411d 100644
--- a/tests/lib/rules/script-setup-uses-vars.js
+++ b/tests/lib/rules/script-setup-uses-vars.js
@@ -252,6 +252,27 @@ describe('script-setup-uses-vars', () => {
             line: 4
           }
         ]
+      },
+
+      // Not `<script setup>`
+      {
+        filename: 'test.vue',
+        code: `
+        <script>
+          /* eslint script-setup-uses-vars: 1 */
+          const msg = 'Hello!'
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `,
+        errors: [
+          {
+            message: "'msg' is assigned a value but never used.",
+            line: 4
+          }
+        ]
       }
     ]
   })