From b940cb94fd1bbda117db2078f467511ee9fcc89f Mon Sep 17 00:00:00 2001 From: Yosuke Ota Date: Sat, 9 May 2020 18:13:17 +0900 Subject: [PATCH] Add `vue/no-deprecated-html-element-is` rule (#1117) --- docs/rules/README.md | 1 + docs/rules/no-deprecated-html-element-is.md | 43 ++++++++++++ lib/configs/vue3-essential.js | 1 + lib/index.js | 1 + lib/rules/no-deprecated-html-element-is.js | 50 ++++++++++++++ .../rules/no-deprecated-html-element-is.js | 69 +++++++++++++++++++ 6 files changed, 165 insertions(+) create mode 100644 docs/rules/no-deprecated-html-element-is.md create mode 100644 lib/rules/no-deprecated-html-element-is.js create mode 100644 tests/lib/rules/no-deprecated-html-element-is.js diff --git a/docs/rules/README.md b/docs/rules/README.md index 89fa12b52..4357d7e9d 100644 --- a/docs/rules/README.md +++ b/docs/rules/README.md @@ -42,6 +42,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi | [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-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-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) | | | [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) | | | [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | | [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | diff --git a/docs/rules/no-deprecated-html-element-is.md b/docs/rules/no-deprecated-html-element-is.md new file mode 100644 index 000000000..800072b9c --- /dev/null +++ b/docs/rules/no-deprecated-html-element-is.md @@ -0,0 +1,43 @@ +--- +pageClass: rule-details +sidebarDepth: 0 +title: vue/no-deprecated-html-element-is +description: disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) +--- +# vue/no-deprecated-html-element-is +> disallow using deprecated the `is` attribute on HTML elements (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"`. + +## :book: Rule Details + +This rule reports deprecated the `is` attribute on HTML elements (removed in Vue.js v3.0.0+) + + + +```vue + +``` + + + +### :wrench: Options + +Nothing. + +## :books: Further Reading + +- [Vue RFCs - 0027-custom-elements-interop](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0027-custom-elements-interop.md) + +## :mag: Implementation + +- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-html-element-is.js) +- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-html-element-is.js) diff --git a/lib/configs/vue3-essential.js b/lib/configs/vue3-essential.js index eb1374480..f21d544c7 100644 --- a/lib/configs/vue3-essential.js +++ b/lib/configs/vue3-essential.js @@ -10,6 +10,7 @@ module.exports = { 'vue/no-deprecated-data-object-declaration': 'error', 'vue/no-deprecated-events-api': 'error', 'vue/no-deprecated-filter': 'error', + 'vue/no-deprecated-html-element-is': 'error', 'vue/no-deprecated-inline-template': 'error', 'vue/no-deprecated-scope-attribute': 'error', 'vue/no-deprecated-slot-attribute': 'error', diff --git a/lib/index.js b/lib/index.js index 740b49e3f..adf6185f0 100644 --- a/lib/index.js +++ b/lib/index.js @@ -43,6 +43,7 @@ module.exports = { 'no-deprecated-data-object-declaration': require('./rules/no-deprecated-data-object-declaration'), 'no-deprecated-events-api': require('./rules/no-deprecated-events-api'), 'no-deprecated-filter': require('./rules/no-deprecated-filter'), + 'no-deprecated-html-element-is': require('./rules/no-deprecated-html-element-is'), 'no-deprecated-inline-template': require('./rules/no-deprecated-inline-template'), 'no-deprecated-scope-attribute': require('./rules/no-deprecated-scope-attribute'), 'no-deprecated-slot-attribute': require('./rules/no-deprecated-slot-attribute'), diff --git a/lib/rules/no-deprecated-html-element-is.js b/lib/rules/no-deprecated-html-element-is.js new file mode 100644 index 000000000..b45a700f3 --- /dev/null +++ b/lib/rules/no-deprecated-html-element-is.js @@ -0,0 +1,50 @@ +/** + * @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 the `is` attribute on HTML elements (in Vue.js 3.0.0+)', + categories: ['vue3-essential'], + url: 'https://eslint.vuejs.org/rules/no-deprecated-html-element-is.html' + }, + fixable: null, + schema: [], + messages: { + unexpected: 'The `is` attribute on HTML element are deprecated.' + } + }, + + create: function (context) { + return utils.defineTemplateBodyVisitor(context, { + "VAttribute[directive=true][key.name.name='bind'][key.argument.name='is'], VAttribute[directive=false][key.name='is']" (node) { + const element = node.parent.parent + if ( + !utils.isHtmlWellKnownElementName(element.rawName) && + !utils.isSvgWellKnownElementName(element.rawName) + ) { + return + } + context.report({ + node, + loc: node.loc, + messageId: 'unexpected' + }) + } + }) + } +} diff --git a/tests/lib/rules/no-deprecated-html-element-is.js b/tests/lib/rules/no-deprecated-html-element-is.js new file mode 100644 index 000000000..efa52e27a --- /dev/null +++ b/tests/lib/rules/no-deprecated-html-element-is.js @@ -0,0 +1,69 @@ +/** + * @author Yosuke Ota + * See LICENSE file in root directory for full license. + */ +'use strict' + +// ------------------------------------------------------------------------------ +// Requirements +// ------------------------------------------------------------------------------ + +const rule = require('../../../lib/rules/no-deprecated-html-element-is') +const RuleTester = require('eslint').RuleTester + +// ------------------------------------------------------------------------------ +// Tests +// ------------------------------------------------------------------------------ + +const ruleTester = new RuleTester({ + parser: require.resolve('vue-eslint-parser'), + parserOptions: { ecmaVersion: 2019 } +}) + +ruleTester.run('no-deprecated-inline-template', rule, { + valid: [ + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' + } + ], + + invalid: [ + { + filename: 'test.vue', + code: '', + errors: [ + { + line: 1, + column: 16, + messageId: 'unexpected', + endLine: 1, + endColumn: 24 + } + ] + }, + { + filename: 'test.vue', + code: '', + errors: [ + { + line: 1, + column: 16, + messageId: 'unexpected' + } + ] + } + ] +})