Skip to content

Add new option to specify tags to ignore vue/no-deprecated-slot-attribute #2314

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

Merged
merged 6 commits into from
Nov 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions docs/rules/no-deprecated-slot-attribute.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,49 @@ This rule reports deprecated `slot` attribute in Vue.js v2.6.0+.

</eslint-code-block>

## :wrench: Options

```json
{
"vue/no-deprecated-slot-attribute": ["error", {
"ignore": ["my-component"]
}]
}
```

- `"ignore"` (`string[]`) An array of tags that ignore this rules. This option will check both kebab-case and PascalCase versions of the given tag names. Default is empty.

### `"ignore": ["my-component"]`

<eslint-code-block :rules="{'vue/no-dupe-keys': ['error', {ignore: ['my-component']}]}">

```vue
<template>
<ListComponent>
<!-- ✓ GOOD -->
<template v-slot:name>
{{ props.title }}
</template>
</ListComponent>

<ListComponent>
<!-- ✓ GOOD -->
<my-component slot="name">
{{ props.title }}
</my-component>
</ListComponent>

<ListComponent>
<!-- ✗ BAD -->
<other-component slot="name">
{{ props.title }}
</other-component>
</ListComponent>
</template>
```

</eslint-code-block>

## :books: Further Reading

- [API - slot](https://v2.vuejs.org/v2/api/#slot-deprecated)
Expand Down
14 changes: 13 additions & 1 deletion lib/rules/no-deprecated-slot-attribute.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,19 @@ module.exports = {
url: 'https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html'
},
fixable: 'code',
schema: [],
schema: [
{
type: 'object',
properties: {
ignore: {
type: 'array',
items: { type: 'string' },
uniqueItems: true
}
},
additionalProperties: false
}
],
messages: {
forbiddenSlotAttribute: '`slot` attributes are deprecated.'
}
Expand Down
14 changes: 14 additions & 0 deletions lib/rules/syntaxes/slot-attribute.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,17 @@
'use strict'

const canConvertToVSlot = require('./utils/can-convert-to-v-slot')
const casing = require('../../utils/casing')

module.exports = {
deprecated: '2.6.0',
supported: '<3.0.0',
/** @param {RuleContext} context @returns {TemplateListener} */
createTemplateBodyVisitor(context) {
const options = context.options[0] || {}
/** @type {Set<string>} */
const ignore = new Set(options.ignore)

const sourceCode = context.getSourceCode()
const tokenStore =
context.parserServices.getTemplateBodyTokenStore &&
Expand Down Expand Up @@ -95,6 +100,15 @@ module.exports = {
* @returns {void}
*/
function reportSlot(slotAttr) {
const componentName = slotAttr.parent.parent.rawName
if (
ignore.has(componentName) ||
ignore.has(casing.pascalCase(componentName)) ||
ignore.has(casing.kebabCase(componentName))
) {
return
}

context.report({
node: slotAttr.key,
messageId: 'forbiddenSlotAttribute',
Expand Down
34 changes: 33 additions & 1 deletion tests/lib/rules/no-deprecated-slot-attribute.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,19 @@ tester.run('no-deprecated-slot-attribute', rule, {
<LinkList>
<a />
</LinkList>
</template>`
</template>`,
{
code: `<template>
<LinkList>
<one slot="one" />
<two slot="two" />
<my-component slot="my-component-slot" />
<myComponent slot="myComponent-slot" />
<MyComponent slot="MyComponent-slot" />
</LinkList>
</template>`,
options: [{ ignore: ['one', 'two', 'my-component'] }]
}
],
invalid: [
{
Expand Down Expand Up @@ -594,6 +606,26 @@ tester.run('no-deprecated-slot-attribute', rule, {
'`slot` attributes are deprecated.',
'`slot` attributes are deprecated.'
]
},
{
code: `
<template>
<my-component>
<one slot="one">
A
</one>
<two slot="two">
B
</two>
</my-component>
</template>`,
output: null,
options: [
{
ignore: ['one']
}
],
errors: ['`slot` attributes are deprecated.']
}
]
})