From 8f9ab8e8184de6fc1496b65c6680aaa23a8d796e Mon Sep 17 00:00:00 2001 From: ntnyq Date: Fri, 15 Nov 2024 09:58:49 +0800 Subject: [PATCH 1/2] fix(prefer-use-template-ref): add support for `shallowRef` --- docs/rules/prefer-use-template-ref.md | 18 +++++++++++------- lib/rules/prefer-use-template-ref.js | 17 ++++++++++++----- tests/lib/rules/prefer-use-template-ref.js | 19 +++++++++++++++++++ 3 files changed, 42 insertions(+), 12 deletions(-) diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md index 553e99bf1..071262eb2 100644 --- a/docs/rules/prefer-use-template-ref.md +++ b/docs/rules/prefer-use-template-ref.md @@ -2,31 +2,32 @@ pageClass: rule-details sidebarDepth: 0 title: vue/prefer-use-template-ref -description: require using `useTemplateRef` instead of `ref` for template refs +description: require using `useTemplateRef` instead of `ref/shallowRef` for template refs since: v9.31.0 --- # vue/prefer-use-template-ref -> require using `useTemplateRef` instead of `ref` for template refs +> require using `useTemplateRef` instead of `ref/shallowRef` for template refs ## :book: Rule Details Vue 3.5 introduced a new way of obtaining template refs via the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API. -This rule enforces using the new `useTemplateRef` function instead of `ref` for template refs. +This rule enforces using the new `useTemplateRef` function instead of `ref/shallowRef` for template refs. ```vue ``` @@ -47,14 +49,16 @@ This rule skips `ref` template function refs as these should be used to allow cu ```vue ``` diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js index 8dcdccb38..22507718e 100644 --- a/lib/rules/prefer-use-template-ref.js +++ b/lib/rules/prefer-use-template-ref.js @@ -8,8 +8,12 @@ const utils = require('../utils') /** @param expression {Expression | null} */ function expressionIsRef(expression) { - // @ts-ignore - return expression?.callee?.name === 'ref' + return ( + // @ts-ignore + expression?.callee?.name === 'ref' || + // @ts-ignore + expression?.callee?.name === 'shallowRef' + ) } /** @type {import("eslint").Rule.RuleModule} */ @@ -18,13 +22,13 @@ module.exports = { type: 'suggestion', docs: { description: - 'require using `useTemplateRef` instead of `ref` for template refs', + 'require using `useTemplateRef` instead of `ref/shallowRef` for template refs', categories: undefined, url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html' }, schema: [], messages: { - preferUseTemplateRef: "Replace 'ref' with 'useTemplateRef'." + preferUseTemplateRef: "Replace 'ref/shallowRef' with 'useTemplateRef'." } }, /** @param {RuleContext} context */ @@ -46,7 +50,10 @@ module.exports = { context, { 'VAttribute[directive=false]'(node) { - if (node.key.name === 'ref' && node.value?.value) { + if ( + (node.key.name === 'ref' || node.key.name === 'shallowRef') && + node.value?.value + ) { templateRefs.add(node.value.value) } } diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js index 49a2f0759..96c1eaf93 100644 --- a/tests/lib/rules/prefer-use-template-ref.js +++ b/tests/lib/rules/prefer-use-template-ref.js @@ -318,6 +318,25 @@ tester.run('prefer-use-template-ref', rule, { column: 28 } ] + }, + { + filename: 'single-shallowRef.vue', + code: ` + + + `, + errors: [ + { + messageId: 'preferUseTemplateRef', + line: 7, + column: 22 + } + ] } ] }) From 200209a3eff51fa162ff7478ce6b3f6926c93a1d Mon Sep 17 00:00:00 2001 From: ntnyq Date: Sat, 16 Nov 2024 13:24:28 +0800 Subject: [PATCH 2/2] fix: use placeholder to report a more specific message --- docs/rules/index.md | 2 +- docs/rules/prefer-use-template-ref.md | 6 +++--- lib/rules/prefer-use-template-ref.js | 15 ++++++++------- tests/lib/rules/prefer-use-template-ref.js | 21 +++++++++++++++++++++ 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/docs/rules/index.md b/docs/rules/index.md index e359f47ab..51515e233 100644 --- a/docs/rules/index.md +++ b/docs/rules/index.md @@ -270,7 +270,7 @@ For example: | [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: | | [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: | | [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: | -| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref` for template refs | | :hammer: | +| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs | | :hammer: | | [vue/require-default-export](./require-default-export.md) | require components to be the default export | | :warning: | | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported | | :hammer: | | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: | diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md index 071262eb2..1b1b40385 100644 --- a/docs/rules/prefer-use-template-ref.md +++ b/docs/rules/prefer-use-template-ref.md @@ -2,20 +2,20 @@ pageClass: rule-details sidebarDepth: 0 title: vue/prefer-use-template-ref -description: require using `useTemplateRef` instead of `ref/shallowRef` for template refs +description: require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs since: v9.31.0 --- # vue/prefer-use-template-ref -> require using `useTemplateRef` instead of `ref/shallowRef` for template refs +> require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs ## :book: Rule Details Vue 3.5 introduced a new way of obtaining template refs via the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API. -This rule enforces using the new `useTemplateRef` function instead of `ref/shallowRef` for template refs. +This rule enforces using the new `useTemplateRef` function instead of `ref`/`shallowRef` for template refs. diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js index 22507718e..916583e9f 100644 --- a/lib/rules/prefer-use-template-ref.js +++ b/lib/rules/prefer-use-template-ref.js @@ -22,13 +22,13 @@ module.exports = { type: 'suggestion', docs: { description: - 'require using `useTemplateRef` instead of `ref/shallowRef` for template refs', + 'require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs', categories: undefined, url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html' }, schema: [], messages: { - preferUseTemplateRef: "Replace 'ref/shallowRef' with 'useTemplateRef'." + preferUseTemplateRef: "Replace '{{name}}' with 'useTemplateRef'." } }, /** @param {RuleContext} context */ @@ -50,10 +50,7 @@ module.exports = { context, { 'VAttribute[directive=false]'(node) { - if ( - (node.key.name === 'ref' || node.key.name === 'shallowRef') && - node.value?.value - ) { + if (node.key.name === 'ref' && node.value?.value) { templateRefs.add(node.value.value) } } @@ -86,7 +83,11 @@ module.exports = { context.report({ node: scriptRef.node, - messageId: 'preferUseTemplateRef' + messageId: 'preferUseTemplateRef', + data: { + // @ts-ignore + name: scriptRef.node?.callee?.name + } }) } } diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js index 96c1eaf93..fe1ee2d2f 100644 --- a/tests/lib/rules/prefer-use-template-ref.js +++ b/tests/lib/rules/prefer-use-template-ref.js @@ -214,6 +214,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 7, column: 22 } @@ -235,6 +238,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 9, column: 22 } @@ -256,11 +262,17 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 8, column: 25 }, { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 9, column: 22 } @@ -288,6 +300,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 14, column: 33 } @@ -314,6 +329,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 12, column: 28 } @@ -333,6 +351,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'shallowRef' + }, line: 7, column: 22 }