Skip to content

Commit

Permalink
Add vue/no-deprecated-dollar-scopedslots-api rule. (#1177)
Browse files Browse the repository at this point in the history
  • Loading branch information
ota-meshi committed Jun 5, 2020
1 parent 67b3e79 commit fb1fb79
Show file tree
Hide file tree
Showing 6 changed files with 417 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -43,6 +43,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties | |
| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: |
| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) | |
| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: |
| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) | |
| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) | |
| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) | |
Expand Down
47 changes: 47 additions & 0 deletions docs/rules/no-deprecated-dollar-scopedslots-api.md
@@ -0,0 +1,47 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/no-deprecated-dollar-scopedslots-api
description: disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)
---
# vue/no-deprecated-dollar-scopedslots-api
> disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)
- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
- :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 use of deprecated `$scopedSlots`. (in Vue.js 3.0.0+).

<eslint-code-block fix :rules="{'vue/no-deprecated-dollar-scopedslots-api': ['error']}">

```vue
<template>
<!-- ✗ BAD -->
<div v-if="$scopedSlots.default"><slot /></div>
</template>
<script>
export default {
render() {
/* ✗ BAD */
return this.$scopedSlots.default()
}
}
</script>
```

</eslint-code-block>

## :wrench: Options

Nothing.

## :books: Further reading

- [Vue RFCs - 0006-slots-unification](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0006-slots-unification.md)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-dollar-scopedslots-api.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-dollar-scopedslots-api.js)
1 change: 1 addition & 0 deletions lib/configs/vue3-essential.js
Expand Up @@ -11,6 +11,7 @@ module.exports = {
'vue/no-async-in-computed-properties': 'error',
'vue/no-deprecated-data-object-declaration': 'error',
'vue/no-deprecated-dollar-listeners-api': 'error',
'vue/no-deprecated-dollar-scopedslots-api': 'error',
'vue/no-deprecated-events-api': 'error',
'vue/no-deprecated-filter': 'error',
'vue/no-deprecated-functional-template': 'error',
Expand Down
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -50,6 +50,7 @@ module.exports = {
'no-custom-modifiers-on-v-model': require('./rules/no-custom-modifiers-on-v-model'),
'no-deprecated-data-object-declaration': require('./rules/no-deprecated-data-object-declaration'),
'no-deprecated-dollar-listeners-api': require('./rules/no-deprecated-dollar-listeners-api'),
'no-deprecated-dollar-scopedslots-api': require('./rules/no-deprecated-dollar-scopedslots-api'),
'no-deprecated-events-api': require('./rules/no-deprecated-events-api'),
'no-deprecated-filter': require('./rules/no-deprecated-filter'),
'no-deprecated-functional-template': require('./rules/no-deprecated-functional-template'),
Expand Down
79 changes: 79 additions & 0 deletions lib/rules/no-deprecated-dollar-scopedslots-api.js
@@ -0,0 +1,79 @@
/**
* @author Yosuke Ota
* See LICENSE file in root directory for full license.
*/
'use strict'

// ------------------------------------------------------------------------------
// Requirements
// ------------------------------------------------------------------------------

const utils = require('../utils')

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

module.exports = {
meta: {
type: 'problem',
docs: {
description:
'disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)',
categories: ['vue3-essential'],
url:
'https://eslint.vuejs.org/rules/no-deprecated-dollar-scopedslots-api.html'
},
fixable: 'code',
schema: [],
messages: {
deprecated: 'The `$scopedSlots` is deprecated.'
}
},

create(context) {
return utils.defineTemplateBodyVisitor(
context,
{
VExpressionContainer(node) {
for (const reference of node.references) {
if (reference.variable != null) {
// Not vm reference
continue
}
if (reference.id.name === '$scopedSlots') {
context.report({
node: reference.id,
messageId: 'deprecated',
fix(fixer) {
return fixer.replaceText(reference.id, '$slots')
}
})
}
}
}
},
utils.defineVueVisitor(context, {
MemberExpression(node) {
if (
node.property.type !== 'Identifier' ||
node.property.name !== '$scopedSlots'
) {
return
}
if (!utils.isThis(node.object, context)) {
return
}

context.report({
node: node.property,
messageId: 'deprecated',
fix(fixer) {
return fixer.replaceText(node.property, '$slots')
}
})
}
})
)
}
}

0 comments on commit fb1fb79

Please sign in to comment.