Skip to content

Commit

Permalink
feat: add no-deprecated-delete-set rule (#2540)
Browse files Browse the repository at this point in the history
  • Loading branch information
waynzh authored Sep 12, 2024
1 parent d77fbf7 commit dfdbe1a
Show file tree
Hide file tree
Showing 5 changed files with 565 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/rules/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ For example:
| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` | | :hammer: |
| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | | :hammer: |
| [vue/no-deprecated-delete-set](./no-deprecated-delete-set.md) | disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+) | | :warning: |
| [vue/no-deprecated-model-definition](./no-deprecated-model-definition.md) | disallow deprecated `model` definition (in Vue.js 3.0.0+) | :bulb: | :warning: |
| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` | | :hammer: |
| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty | | :hammer: |
Expand Down
52 changes: 52 additions & 0 deletions docs/rules/no-deprecated-delete-set.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/no-deprecated-delete-set
description: disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)
---

# vue/no-deprecated-delete-set

> disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>

## :book: Rule Details

This rule reports use of deprecated `$delete` and `$set`. (in Vue.js 3.0.0+).

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

```vue
<script>
import { set, del } from 'vue'
export default {
mounted () {
/* ✗ BAD */
this.$set(obj, key, value)
this.$delete(obj, key)
Vue.set(obj, key, value)
Vue.delete(obj, key)
set(obj, key, value)
del(obj, key)
}
}
</script>
```

</eslint-code-block>

## :wrench: Options

Nothing.

## :books: Further Reading

- [Migration Guide - Removed APIs](https://v3-migration.vuejs.org/breaking-changes/#removed-apis)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-delete-set.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-delete-set.js)
1 change: 1 addition & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ const plugin = {
'no-constant-condition': require('./rules/no-constant-condition'),
'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-delete-set': require('./rules/no-deprecated-delete-set'),
'no-deprecated-destroyed-lifecycle': require('./rules/no-deprecated-destroyed-lifecycle'),
'no-deprecated-dollar-listeners-api': require('./rules/no-deprecated-dollar-listeners-api'),
'no-deprecated-dollar-scopedslots-api': require('./rules/no-deprecated-dollar-scopedslots-api'),
Expand Down
132 changes: 132 additions & 0 deletions lib/rules/no-deprecated-delete-set.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
/**
* @author Wayne Zhang
* See LICENSE file in root directory for full license.
*/
'use strict'

const utils = require('../utils')
const { ReferenceTracker } = require('@eslint-community/eslint-utils')

/**
* @typedef {import('@eslint-community/eslint-utils').TYPES.TraceMap} TraceMap
*/

/** @type {TraceMap} */
const deletedImportApisMap = {
set: {
[ReferenceTracker.CALL]: true
},
del: {
[ReferenceTracker.CALL]: true
}
}
const deprecatedApis = new Set(['set', 'delete'])
const deprecatedDollarApis = new Set(['$set', '$delete'])

/**
* @param {Expression|Super} node
*/
function isVue(node) {
return node.type === 'Identifier' && node.name === 'Vue'
}

module.exports = {
meta: {
type: 'problem',
docs: {
description:
'disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)',
categories: undefined,
url: 'https://eslint.vuejs.org/rules/no-deprecated-delete-set.html'
},
fixable: null,
schema: [],
messages: {
deprecated: 'The `$delete`, `$set` is deprecated.'
}
},
/** @param {RuleContext} context */
create(context) {
/**
* @param {Identifier} identifier
* @param {RuleContext} context
* @returns {CallExpression|undefined}
*/
function getVueDeprecatedCallExpression(identifier, context) {
// Instance API: this.$set()
if (
deprecatedDollarApis.has(identifier.name) &&
identifier.parent.type === 'MemberExpression' &&
utils.isThis(identifier.parent.object, context) &&
identifier.parent.parent.type === 'CallExpression' &&
identifier.parent.parent.callee === identifier.parent
) {
return identifier.parent.parent
}

// Vue 2 Global API: Vue.set()
if (
deprecatedApis.has(identifier.name) &&
identifier.parent.type === 'MemberExpression' &&
isVue(identifier.parent.object) &&
identifier.parent.parent.type === 'CallExpression' &&
identifier.parent.parent.callee === identifier.parent
) {
return identifier.parent.parent
}

return undefined
}

const nodeVisitor = {
/** @param {Identifier} node */
Identifier(node) {
const callExpression = getVueDeprecatedCallExpression(node, context)
if (!callExpression) {
return
}

context.report({
node,
messageId: 'deprecated'
})
}
}

return utils.compositingVisitors(
utils.defineVueVisitor(context, nodeVisitor),
utils.defineScriptSetupVisitor(context, nodeVisitor),
{
/** @param {Program} node */
Program(node) {
const tracker = new ReferenceTracker(utils.getScope(context, node))

// import { set } from 'vue'; set()
const esmTraceMap = {
vue: {
[ReferenceTracker.ESM]: true,
...deletedImportApisMap
}
}
// const { set } = require('vue'); set()
const cjsTraceMap = {
vue: {
...deletedImportApisMap
}
}

for (const { node } of [
...tracker.iterateEsmReferences(esmTraceMap),
...tracker.iterateCjsReferences(cjsTraceMap)
]) {
const refNode = /** @type {CallExpression} */ (node)
context.report({
node: refNode.callee,
messageId: 'deprecated'
})
}
}
}
)
}
}
Loading

0 comments on commit dfdbe1a

Please sign in to comment.