-
-
Notifications
You must be signed in to change notification settings - Fork 690
⭐️New: Add vue/no-deprecated-slot-attribute rule #839
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
Changes from 1 commit
f28bdaa
1ce47a1
bf5f03f
014e6b6
6bbc928
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,44 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-deprecated-slot-attribute | ||
description: disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | ||
--- | ||
# vue/no-deprecated-slot-attribute | ||
> disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | ||
|
||
- :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 | ||
|
||
This rule reports deprecated `slot` attribute in Vue.js v2.6.0+. | ||
|
||
<eslint-code-block fix :rules="{'vue/no-deprecated-slot-attribute': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<ListComponent> | ||
<!-- ✓ GOOD --> | ||
<template v-slot:name> | ||
{{ props.title }} | ||
</template> | ||
</ListComponent> | ||
<ListComponent> | ||
<!-- ✗ BAD --> | ||
<template slot="name"> | ||
{{ props.title }} | ||
</template> | ||
</ListComponent> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :books: Further reading | ||
|
||
- [API - slot](https://vuejs.org/v2/api/#slot-deprecated) | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-slot-attribute.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-slot-attribute.js) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/** | ||
* @author Yosuke Ota | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
'use strict' | ||
|
||
const utils = require('../utils') | ||
const slotAttribute = require('./syntaxes/slot-attribute') | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: 'disallow deprecated `slot` attribute (in Vue.js 2.6.0+)', | ||
category: undefined, | ||
url: 'https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html' | ||
}, | ||
fixable: 'code', | ||
schema: [], | ||
messages: { | ||
forbiddenSlotAttribute: '`slot` attributes are deprecated.' | ||
} | ||
}, | ||
create (context) { | ||
const templateBodyVisitor = slotAttribute.createTemplateBodyVisitor(context) | ||
return utils.defineTemplateBodyVisitor(context, templateBodyVisitor) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
/** | ||
* @author Yosuke Ota | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
'use strict' | ||
module.exports = { | ||
deprecated: '2.6.0', | ||
createTemplateBodyVisitor (context) { | ||
const sourceCode = context.getSourceCode() | ||
/** | ||
* Convert to `v-slot`. | ||
* @param {object} fixer fixer | ||
* @param {VAttribute | null} slotAttr node of `slot` | ||
* @param {VAttribute | null} scopeAttr node of `scope` | ||
* @returns {*} fix data | ||
*/ | ||
function fixSlotToVSlot (fixer, slotAttr, scopeAttr) { | ||
const nameArgument = slotAttr && slotAttr.value && slotAttr && slotAttr.value.value | ||
? `:${slotAttr.value.value}` | ||
: '' | ||
const scopeValue = scopeAttr && scopeAttr.value | ||
? `=${sourceCode.getText(scopeAttr.value)}` | ||
: '' | ||
|
||
const replaceText = `v-slot${nameArgument}${scopeValue}` | ||
const fixers = [ | ||
fixer.replaceText(slotAttr || scopeAttr, replaceText) | ||
] | ||
if (slotAttr && scopeAttr) { | ||
fixers.push(fixer.remove(scopeAttr)) | ||
} | ||
return fixers | ||
} | ||
/** | ||
* Reports `slot` node | ||
* @param {VAttribute} slotAttr node of `slot` | ||
* @returns {void} | ||
*/ | ||
function reportSlot (slotAttr) { | ||
context.report({ | ||
node: slotAttr.key, | ||
messageId: 'forbiddenSlotAttribute', | ||
// fix to use `v-slot` | ||
fix (fixer) { | ||
const element = slotAttr.parent | ||
const scopeAttr = element.attributes | ||
.find(attr => attr.directive === true && attr.key.name && ( | ||
attr.key.name.name === 'slot-scope' || | ||
attr.key.name.name === 'scope' | ||
)) | ||
return fixSlotToVSlot(fixer, slotAttr, scopeAttr) | ||
} | ||
}) | ||
} | ||
|
||
return { | ||
"VAttribute[directive=false][key.name='slot']": reportSlot | ||
mysticatea marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
'use strict' | ||
|
||
const RuleTester = require('eslint').RuleTester | ||
const rule = require('../../../lib/rules/no-deprecated-slot-attribute.js') | ||
|
||
const tester = new RuleTester({ | ||
parser: 'vue-eslint-parser', | ||
parserOptions: { | ||
ecmaVersion: 2015 | ||
} | ||
}) | ||
|
||
tester.run('no-deprecated-slot-attribute', rule, { | ||
valid: [ | ||
`<template> | ||
<LinkList> | ||
<a v-slot:name /> | ||
</LinkList> | ||
</template>`, | ||
`<template> | ||
<LinkList> | ||
<a #name /> | ||
</LinkList> | ||
</template>`, | ||
`<template> | ||
<LinkList> | ||
<a v-slot="{a}" /> | ||
</LinkList> | ||
</template>`, | ||
`<template> | ||
<LinkList> | ||
<a #default="{a}" /> | ||
</LinkList> | ||
</template>`, | ||
`<template> | ||
<LinkList> | ||
<a /> | ||
</LinkList> | ||
</template>` | ||
], | ||
invalid: [ | ||
{ | ||
code: ` | ||
<template> | ||
<LinkList> | ||
<a slot /> | ||
</LinkList> | ||
</template>`, | ||
output: ` | ||
<template> | ||
<LinkList> | ||
<a v-slot /> | ||
</LinkList> | ||
</template>`, | ||
errors: [ | ||
{ | ||
message: '`slot` attributes are deprecated.', | ||
line: 4 | ||
} | ||
] | ||
}, | ||
{ | ||
code: ` | ||
<template> | ||
<LinkList> | ||
<a slot="name" /> | ||
</LinkList> | ||
</template>`, | ||
output: ` | ||
<template> | ||
<LinkList> | ||
<a v-slot:name /> | ||
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. Hmm, sorry, I had overlooked this in the previous review. In some cases,
So in this case, the In the example of nested default slots, it will be moved to the parent element. Therefore, autofix may be tough to implement... 🤔 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. Sorry for the late reply. Sorry, I did not understand |
||
</LinkList> | ||
</template>`, | ||
errors: [ | ||
{ | ||
message: '`slot` attributes are deprecated.', | ||
line: 4 | ||
} | ||
] | ||
}, | ||
{ | ||
code: ` | ||
<template> | ||
<LinkList> | ||
<a slot="name" disabled slot-scope="{a}"/> | ||
</LinkList> | ||
</template>`, | ||
output: ` | ||
<template> | ||
<LinkList> | ||
<a v-slot:name="{a}" disabled /> | ||
</LinkList> | ||
</template>`, | ||
errors: [ | ||
{ | ||
message: '`slot` attributes are deprecated.', | ||
line: 4 | ||
} | ||
] | ||
}, | ||
{ | ||
code: ` | ||
<template> | ||
<LinkList> | ||
<template slot="name" scope="{a}"> | ||
<a /> | ||
</template> | ||
</LinkList> | ||
</template>`, | ||
output: ` | ||
<template> | ||
<LinkList> | ||
<template v-slot:name="{a}" > | ||
<a /> | ||
</template> | ||
</LinkList> | ||
</template>`, | ||
errors: [ | ||
{ | ||
message: '`slot` attributes are deprecated.', | ||
line: 4 | ||
} | ||
] | ||
} | ||
] | ||
}) |
Uh oh!
There was an error while loading. Please reload this page.