Skip to content

Commit

Permalink
Add vue/no-deprecated-v-is rule (#1510)
Browse files Browse the repository at this point in the history
  • Loading branch information
ota-meshi committed Jun 9, 2021
1 parent 76f835a commit 021fe2b
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -298,6 +298,7 @@ For example:
| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` | |
| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
| [vue/no-deprecated-v-is](./no-deprecated-v-is.md) | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | :wrench: |
| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` | |
| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty | |
| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option | |
Expand Down
42 changes: 42 additions & 0 deletions docs/rules/no-deprecated-v-is.md
@@ -0,0 +1,42 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/no-deprecated-v-is
description: disallow deprecated `v-is` directive (in Vue.js 3.1.0+)
---
# vue/no-deprecated-v-is

> disallow deprecated `v-is` directive (in Vue.js 3.1.0+)
- :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

This rule reports deprecated `v-is` directive in Vue.js v3.1.0+.

Use [`is` attribute with `vue:` prefix](https://v3.vuejs.org/api/special-attributes.html#is) instead.

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

```vue
<template>
<!-- ✓ GOOD -->
<div is="vue:MyComponent" />
<component is="MyComponent" />
<!-- ✗ BAD -->
<div v-is="'MyComponent'" />
</template>
```

</eslint-code-block>

## :books: Further Reading

- [v-is](https://v3.vuejs.org/api/directives.html#v-is)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-v-is.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-v-is.js)
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -71,6 +71,7 @@ module.exports = {
'no-deprecated-slot-attribute': require('./rules/no-deprecated-slot-attribute'),
'no-deprecated-slot-scope-attribute': require('./rules/no-deprecated-slot-scope-attribute'),
'no-deprecated-v-bind-sync': require('./rules/no-deprecated-v-bind-sync'),
'no-deprecated-v-is': require('./rules/no-deprecated-v-is'),
'no-deprecated-v-on-native-modifier': require('./rules/no-deprecated-v-on-native-modifier'),
'no-deprecated-v-on-number-modifiers': require('./rules/no-deprecated-v-on-number-modifiers'),
'no-deprecated-vue-config-keycodes': require('./rules/no-deprecated-vue-config-keycodes'),
Expand Down
31 changes: 31 additions & 0 deletions lib/rules/no-deprecated-v-is.js
@@ -0,0 +1,31 @@
/**
* @author Yosuke Ota
* See LICENSE file in root directory for full license.
*/
'use strict'

const utils = require('../utils')
const vIs = require('./syntaxes/v-is')

module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'disallow deprecated `v-is` directive (in Vue.js 3.1.0+)',
// TODO Switch to `vue3-essential` in the major version.
// categories: ['vue3-essential'],
categories: undefined,
url: 'https://eslint.vuejs.org/rules/no-deprecated-v-is.html'
},
fixable: 'code',
schema: [],
messages: {
forbiddenVIs: '`v-is` directive is deprecated.'
}
},
/** @param {RuleContext} context */
create(context) {
const templateBodyVisitor = vIs.createTemplateBodyVisitor(context)
return utils.defineTemplateBodyVisitor(context, templateBodyVisitor)
}
}
36 changes: 36 additions & 0 deletions tests/lib/rules/no-deprecated-v-is.js
@@ -0,0 +1,36 @@
'use strict'

const RuleTester = require('eslint').RuleTester
const rule = require('../../../lib/rules/no-deprecated-v-is')

const tester = new RuleTester({
parser: require.resolve('vue-eslint-parser'),
parserOptions: {
ecmaVersion: 2015
}
})

tester.run('no-deprecated-v-is', rule, {
valid: [
`<template>
<div is="vue:MyComponent" />
</template>`,
`<template>
<component is="MyComponent" />
</template>`
],
invalid: [
{
code: `
<template>
<div v-is="'MyComponent'" />
</template>`,
errors: [
{
message: '`v-is` directive is deprecated.',
line: 3
}
]
}
]
})

0 comments on commit 021fe2b

Please sign in to comment.