-
-
Notifications
You must be signed in to change notification settings - Fork 666
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add prefer-use-template-ref rule #2554
base: master
Are you sure you want to change the base?
Changes from all commits
21dfb40
d8f72ba
dc47a6f
4e04930
defad15
3468fa3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/prefer-use-template-ref | ||
description: require using `useTemplateRef` over `ref` for template refs | ||
--- | ||
|
||
# vue/prefer-use-template-ref | ||
|
||
> require using `useTemplateRef` over `ref` for template refs | ||
|
||
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge> | ||
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule. | ||
|
||
## :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. | ||
|
||
<eslint-code-block fix :rules="{'vue/prefer-use-template-ref': ['error']}"> | ||
|
||
```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> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :wrench: Options | ||
|
||
Nothing. | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-use-template-ref.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-use-template-ref.js) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
/** | ||
* @author Thomasan1999 | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
'use strict' | ||
|
||
const utils = require('../utils') | ||
|
||
/** @type {import("eslint").Rule.RuleModule} */ | ||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: | ||
'require using `useTemplateRef` instead of `ref` for template refs', | ||
categories: undefined, | ||
url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html' | ||
}, | ||
fixable: 'code', | ||
schema: [], | ||
messages: { | ||
preferUseTemplateRef: "Replace 'ref' with 'useTemplateRef'." | ||
} | ||
}, | ||
/** @param {RuleContext} context */ | ||
create(context) { | ||
/** @type Set<string> */ | ||
const templateRefs = new Set() | ||
|
||
/** | ||
* @typedef ScriptRef | ||
* @type {{node: Expression, ref: string}} | ||
*/ | ||
|
||
/** | ||
* @type ScriptRef[] */ | ||
const scriptRefs = [] | ||
|
||
return utils.compositingVisitors( | ||
utils.defineTemplateBodyVisitor( | ||
context, | ||
{ | ||
'VAttribute[directive=false]'(node) { | ||
if (node.key.name === 'ref' && node.value?.value) { | ||
templateRefs.add(node.value.value) | ||
} | ||
} | ||
}, | ||
{ | ||
VariableDeclarator(declarator) { | ||
// @ts-ignore | ||
if (declarator.init?.callee?.name !== 'ref') { | ||
return | ||
} | ||
|
||
scriptRefs.push({ | ||
node: declarator.init, | ||
// @ts-ignore | ||
ref: declarator.id.name | ||
}) | ||
} | ||
} | ||
), | ||
{ | ||
'Program:exit'() { | ||
for (const templateRef of templateRefs) { | ||
const scriptRef = scriptRefs.find( | ||
(scriptRef) => scriptRef.ref === templateRef | ||
) | ||
|
||
if (!scriptRef) { | ||
continue | ||
} | ||
|
||
context.report({ | ||
node: scriptRef.node, | ||
messageId: 'preferUseTemplateRef', | ||
fix(fixer) { | ||
return fixer.replaceText( | ||
scriptRef.node, | ||
`useTemplateRef('${scriptRef.ref}')` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This fix seems unsafe because it doesn't add any import statements. Adding There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Or you can change the autofix to a suggestion, so users still can apply it manually. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I could add |
||
) | ||
} | ||
}) | ||
} | ||
} | ||
} | ||
) | ||
} | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please add valid test cases that make sure the rule doesn't error/fail in the following cases:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could you please add some tests using the |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,232 @@ | ||||||
/** | ||||||
* @author Thomasan1999 | ||||||
* See LICENSE file in root directory for full license. | ||||||
*/ | ||||||
'use strict' | ||||||
|
||||||
const RuleTester = require('../../eslint-compat').RuleTester | ||||||
const rule = require('../../../lib/rules/prefer-use-template-ref') | ||||||
|
||||||
const tester = new RuleTester({ | ||||||
languageOptions: { | ||||||
parser: require('vue-eslint-parser'), | ||||||
ecmaVersion: 2020, | ||||||
sourceType: 'module' | ||||||
} | ||||||
}) | ||||||
|
||||||
tester.run('prefer-use-template-ref', rule, { | ||||||
valid: [ | ||||||
{ | ||||||
filename: 'single-use-template-ref.vue', | ||||||
code: ` | ||||||
<template> | ||||||
<div ref="root" /> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If it is a
Suggested change
|
||||||
import { useTemplateRef } from 'vue'; | ||||||
|
||||||
const root = useTemplateRef('root'); | ||||||
</script> | ||||||
` | ||||||
}, | ||||||
{ | ||||||
filename: 'multiple-use-template-refs.vue', | ||||||
code: ` | ||||||
<template> | ||||||
<button ref="button">Content</button> | ||||||
<a href="" ref="link">Link</a> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { useTemplateRef } from 'vue'; | ||||||
|
||||||
const buttonRef = useTemplateRef('button'); | ||||||
const link = useTemplateRef('link'); | ||||||
</script> | ||||||
` | ||||||
}, | ||||||
{ | ||||||
filename: 'use-template-ref-in-block.vue', | ||||||
code: ` | ||||||
<template> | ||||||
<div> | ||||||
<ul> | ||||||
<li ref="firstListItem">Morning</li> | ||||||
<li>Afternoon</li> | ||||||
<li>Evening</li> | ||||||
</ul> | ||||||
</div> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { useTemplateRef } from 'vue'; | ||||||
|
||||||
function getFirstListItemElement() { | ||||||
const firstListItem = useTemplateRef('firstListItem'); | ||||||
} | ||||||
</script> | ||||||
` | ||||||
} | ||||||
], | ||||||
invalid: [ | ||||||
{ | ||||||
filename: 'single-ref.vue', | ||||||
code: ` | ||||||
<template> | ||||||
<div ref="root"/> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
const root = ref(); | ||||||
</script> | ||||||
Comment on lines
+77
to
+85
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you make the code of the test cases a bit more concise please by removing the empty lines? |
||||||
`, | ||||||
output: ` | ||||||
<template> | ||||||
<div ref="root"/> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
const root = useTemplateRef('root'); | ||||||
</script> | ||||||
`, | ||||||
errors: [ | ||||||
{ | ||||||
messageId: 'preferUseTemplateRef', | ||||||
line: 9, | ||||||
column: 22 | ||||||
} | ||||||
] | ||||||
}, | ||||||
{ | ||||||
filename: 'one-ref-unused-in-script.vue', | ||||||
code: ` | ||||||
<template> | ||||||
<button ref="button">Content</button> | ||||||
<a href="" ref="link">Link</a> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
const buttonRef = ref(); | ||||||
const link = ref(); | ||||||
</script> | ||||||
`, | ||||||
output: ` | ||||||
<template> | ||||||
<button ref="button">Content</button> | ||||||
<a href="" ref="link">Link</a> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
const buttonRef = ref(); | ||||||
const link = useTemplateRef('link'); | ||||||
</script> | ||||||
`, | ||||||
errors: [ | ||||||
{ | ||||||
messageId: 'preferUseTemplateRef', | ||||||
line: 11, | ||||||
column: 22 | ||||||
} | ||||||
] | ||||||
}, | ||||||
{ | ||||||
filename: 'multiple-refs.vue', | ||||||
code: ` | ||||||
<template> | ||||||
<h1 ref="heading">Heading</h1> | ||||||
<a href="" ref="link">Link</a> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
const heading = ref(); | ||||||
const link = ref(); | ||||||
</script> | ||||||
`, | ||||||
output: ` | ||||||
<template> | ||||||
<h1 ref="heading">Heading</h1> | ||||||
<a href="" ref="link">Link</a> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
const heading = useTemplateRef('heading'); | ||||||
const link = useTemplateRef('link'); | ||||||
</script> | ||||||
`, | ||||||
errors: [ | ||||||
{ | ||||||
messageId: 'preferUseTemplateRef', | ||||||
line: 10, | ||||||
column: 25 | ||||||
}, | ||||||
{ | ||||||
messageId: 'preferUseTemplateRef', | ||||||
line: 11, | ||||||
column: 22 | ||||||
} | ||||||
] | ||||||
}, | ||||||
{ | ||||||
filename: 'ref-in-block.vue', | ||||||
code: ` | ||||||
<template> | ||||||
<div> | ||||||
<ul> | ||||||
<li ref="firstListItem">Morning</li> | ||||||
<li>Afternoon</li> | ||||||
<li>Evening</li> | ||||||
</ul> | ||||||
</div> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
function getFirstListItemElement() { | ||||||
const firstListItem = ref(); | ||||||
} | ||||||
</script> | ||||||
`, | ||||||
output: ` | ||||||
<template> | ||||||
<div> | ||||||
<ul> | ||||||
<li ref="firstListItem">Morning</li> | ||||||
<li>Afternoon</li> | ||||||
<li>Evening</li> | ||||||
</ul> | ||||||
</div> | ||||||
</template> | ||||||
|
||||||
<script> | ||||||
import { ref } from 'vue'; | ||||||
|
||||||
function getFirstListItemElement() { | ||||||
const firstListItem = useTemplateRef('firstListItem'); | ||||||
} | ||||||
</script> | ||||||
`, | ||||||
errors: [ | ||||||
{ | ||||||
messageId: 'preferUseTemplateRef', | ||||||
line: 16, | ||||||
column: 33 | ||||||
} | ||||||
] | ||||||
} | ||||||
] | ||||||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How does this rule handle
ref
as a function? Can you add documentation for that?