fix(no-setup-props-reactivity-loss): report template literal (#2489)

vuejs · Jul 2, 2024 · cac8167 · cac8167
1 parent 3ad09ef
commit cac8167
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 3 deletions.
diff --git a/lib/rules/no-setup-props-reactivity-loss.js b/lib/rules/no-setup-props-reactivity-loss.js
@@ -79,18 +79,35 @@ module.exports = {
         left.type !== 'ArrayPattern' &&
         left.type !== 'ObjectPattern' &&
         rightNode.type !== 'MemberExpression' &&
-        rightNode.type !== 'ConditionalExpression'
+        rightNode.type !== 'ConditionalExpression' &&
+        rightNode.type !== 'TemplateLiteral'
       ) {
         return
       }
 
-      /** @type {Expression | Super} */
-      let rightId = rightNode
+      if (rightNode.type === 'TemplateLiteral') {
+        rightNode.expressions.some((expression) =>
+          checkMemberAccess(expression, propsReferences, left, right)
+        )
+      } else {
+        checkMemberAccess(rightNode, propsReferences, left, right)
+      }
+    }
+
+    /**
+     * @param {Expression | Super} rightId
+     * @param {ScopePropsReferences} propsReferences
+     * @param {Pattern} left
+     * @param {Expression} right
+     * @return {boolean}
+     */
+    function checkMemberAccess(rightId, propsReferences, left, right) {
       while (rightId.type === 'MemberExpression') {
         rightId = utils.skipChainExpression(rightId.object)
       }
       if (rightId.type === 'Identifier' && propsReferences.refs.has(rightId)) {
         report(left, 'getProperty', propsReferences.scopeName)
+        return true
       }
       if (
         rightId.type === 'ConditionalExpression' &&
@@ -99,7 +116,9 @@ module.exports = {
           isPropsMemberAccessed(rightId.alternate, propsReferences))
       ) {
         report(right, 'getProperty', propsReferences.scopeName)
+        return true
       }
+      return false
     }
 
     /**

diff --git a/tests/lib/rules/no-setup-props-reactivity-loss.js b/tests/lib/rules/no-setup-props-reactivity-loss.js
@@ -144,6 +144,7 @@ tester.run('no-setup-props-reactivity-loss', rule, {
           const {x} = noProps
           ({y} = noProps)
           const z = noProps.z
+          const foo = \`\${noProp.foo}\`
         }
       }
       </script>
@@ -717,6 +718,43 @@ tester.run('no-setup-props-reactivity-loss', rule, {
           line: 4
         }
       ]
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2470
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const foo = \`\${p.x}\`
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const foo = \`bar\${p.x}bar\${p.y}\`
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
     }
   ]
 })