feat: add prefer-use-template-ref rule #2554
Conversation
| type: 'suggestion', | ||
| docs: { | ||
| description: | ||
| 'require using `useTemplateRef` over `ref` for template refs', |
There was a problem hiding this comment.
| 'require using `useTemplateRef` over `ref` for template refs', | |
| 'require using `useTemplateRef` instead of `ref` for template refs', |
Please re-run npm run update after this change to update the docs.
There was a problem hiding this comment.
Please add valid test cases that make sure the rule doesn't error/fail in the following cases:
- A
.vuefile with arefthat is not a template ref. - A
.jsfile with aref.
| <template> | ||
| <div ref="root"/> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref } from 'vue'; | ||
|
|
||
| const root = ref(); | ||
| </script> |
There was a problem hiding this comment.
Can you make the code of the test cases a bit more concise please by removing the empty lines?
| ## :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. |
There was a problem hiding this comment.
| the [useTemplateRef()](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API. | |
| the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API. |
| 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 over `ref` for template refs. |
There was a problem hiding this comment.
| This rule enforces using the new `useTemplateRef` function over `ref` for template refs. | |
| This rule enforces using the new `useTemplateRef` function instead of `ref` for template refs. |
| ```vue | ||
|
|
||
| <template> | ||
| <div ref="divRef"></div> | ||
| <button ref="submitter">Submit</button> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref, useTemplateRef } from 'vue'; | ||
|
|
||
| /* ✓ GOOD */ | ||
| const divRef = useTemplateRef('divRef'); | ||
| const div = useTemplateRef('divRef'); | ||
| const loremIpsum = useTemplateRef('divRef'); | ||
| const submitButton = useTemplateRef('submitter'); | ||
| /* ✗ BAD */ | ||
| const divRef = ref(); | ||
| const submitter = ref(); | ||
| </script> | ||
| ``` |
There was a problem hiding this comment.
This currently fails anyway because of the duplicate const identifier, see https://deploy-preview-2554--eslint-plugin-vue.netlify.app/rules/prefer-use-template-ref.html.
Instead, I'd suggest something like this:
| ```vue | |
| <template> | |
| <div ref="divRef"></div> | |
| <button ref="submitter">Submit</button> | |
| </template> | |
| <script> | |
| import { ref, useTemplateRef } from 'vue'; | |
| /* ✓ GOOD */ | |
| const divRef = useTemplateRef('divRef'); | |
| const div = useTemplateRef('divRef'); | |
| const loremIpsum = useTemplateRef('divRef'); | |
| const submitButton = useTemplateRef('submitter'); | |
| /* ✗ BAD */ | |
| const divRef = ref(); | |
| const submitter = ref(); | |
| </script> | |
| ``` | |
| ```vue | |
| <template> | |
| <button ref="submitRef">Submit</button> | |
| <button ref="closeRef">Close</button> | |
| </template> | |
| <script> | |
| import { ref, useTemplateRef } from 'vue'; | |
| /* ✓ GOOD */ | |
| const submitRef = useTemplateRef('submitRef'); | |
| const submitButton = useTemplateRef('submitRef'); | |
| const closeButton = useTemplateRef('closeRef'); | |
| /* ✗ BAD */ | |
| const closeRef = ref(); | |
| </script> | |
| ``` |
| fix(fixer) { | ||
| return fixer.replaceText( | ||
| scriptRef.node, | ||
| `useTemplateRef('${scriptRef.ref}')` |
There was a problem hiding this comment.
This fix seems unsafe because it doesn't add any import statements. Adding import requires complex logic, so could you change it to without auto-fix to keep it simple?
If you want to implement autofix for import, please add tests for the absence and presence of import from 'vue', tests for different kinds of import, tests for the two type syntaxes in TypeScript, and tests combining them.
There was a problem hiding this comment.
Or you can change the autofix to a suggestion, so users still can apply it manually.
There was a problem hiding this comment.
I could add import if that's an option but I read in docs that ESLint rules should not apply complex logic. If you're okay with me adding it, I will implement the auto-fix with the added tests, it would definitely help me to have the auto-fix there when going through a bigger codebase to not have to do the change manually many times over and over. But if you prefer the suggestion option, I could also go with that. Wdyt?
There was a problem hiding this comment.
Could you please add some tests using the setup() function and some using the Options API?
| <div ref="root" /> | ||
| </template> | ||
|
|
||
| <script> |
There was a problem hiding this comment.
If it is a <script setup> test, the setup attribute is required.
| <script> | |
| <script setup> |
|
|
||
| ## :book: Rule Details | ||
|
|
||
| Vue 3.5 introduced a new way of obtaining template refs via |
There was a problem hiding this comment.
How does this rule handle ref as a function? Can you add documentation for that?
<script setup>
import { ref } from 'vue';
const button = ref();
</script>
<template>
<button :ref="ref => button.value = ref">Content</button>
</template>
resolves #2549