feat: add no-deprecated-props rule

docs/rules/no-deprecated-props.md

@@ -0,0 +1,52 @@
+---
+title: '@rotki/no-deprecated-props'
+description: ...
+since: v0.2.0
+---
+
+# @rotki/no-deprecated-props
+
+> ...
+
+- :black_nib:️ The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports the usage of deprecated properties in components.
+
+<eslint-code-block fix>
+
+<!-- eslint-skip -->
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <RuiRadio value="ok" />
+</template>
+
+<!-- ✗ BAD -->
+<template>
+  <RuiRadio internal-value="ok" />
+</template>
+```
+
+</eslint-code-block>
+
+## :gear: Options
+
+```json
+{
+  "@rotki/no-deprecated-props": ["error"]
+}
+```
+
+-
+
+## :rocket: Version
+
+This rule was introduced in `@rotki/eslint-plugin` v0.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/rotki/eslint-plugin/blob/master/src/rules/no-deprecated-props.ts)
+- [Test source](https://github.com/rotki/eslint-plugin/tree/master/tests/rules/no-deprecated-props.ts)

src/plugin.ts

@@ -1,6 +1,7 @@
 import pkg from '../package.json' assert { type: 'json' };
 import noDeprecatedClasses from './rules/no-deprecated-classes';
 import noDeprecatedComponents from './rules/no-deprecated-components';
+import noDeprecatedProps from './rules/no-deprecated-props';
 import type { ESLint } from 'eslint';
 
 const plugin = {
@@ -11,6 +12,7 @@ const plugin = {
   rules: {
     'no-deprecated-classes': noDeprecatedClasses,
     'no-deprecated-components': noDeprecatedComponents,
+    'no-deprecated-props': noDeprecatedProps,
   },
 } satisfies ESLint.Plugin;
 

src/rules/no-deprecated-props.ts

@@ -0,0 +1,87 @@
+import { kebabCase, pascalCase } from 'scule';
+import createDebug from 'debug';
+import { createEslintRule, defineTemplateBodyVisitor } from '../utils';
+import type { AST as VAST } from 'vue-eslint-parser';
+
+const debug = createDebug('@rotki/eslint-plugin:no-deprecated-props');
+
+export const RULE_NAME = 'no-deprecated-props';
+
+export type MessageIds = 'replacedWith';
+
+export type Options = [];
+
+const replacements = {
+  RuiRadio: {
+    internalValue: 'value',
+  },
+} as const;
+
+function hasReplacement(tag: string): tag is (keyof typeof replacements) {
+  return Object.prototype.hasOwnProperty.call(replacements, tag);
+}
+
+function getPropName(node: VAST.VDirective | VAST.VAttribute): string | undefined {
+  if (node.directive) {
+    if (node.key.argument?.type !== 'VIdentifier')
+      return undefined;
+    return kebabCase(node.key.argument.rawName);
+  }
+  return kebabCase(node.key.rawName);
+}
+
+export default createEslintRule<Options, MessageIds>({
+  create(context) {
+    return defineTemplateBodyVisitor(context, {
+      VAttribute(node: VAST.VAttribute | VAST.VDirective) {
+        if (node.directive && (node.value?.type === 'VExpressionContainer' && (node.key.name.name !== 'bind' || !node.key.argument)))
+          return;
+
+        const tag = pascalCase(node.parent.parent.rawName);
+
+        if (!hasReplacement(tag))
+          return;
+
+        debug(`${tag} has replacement properties`);
+
+        const propName = getPropName(node);
+        const propNameNode = node.directive ? node.key.argument : node.key;
+
+        if (!propName || !propNameNode) {
+          debug('could not get prop name and/or node');
+          return;
+        }
+
+        Object.entries(replacements[tag]).forEach(([prop, replacement]) => {
+          if (kebabCase(prop) === propName) {
+            debug(`preparing a replacement for ${tag}:${propName} -> ${replacement}`);
+            context.report({
+              data: {
+                prop,
+                replacement,
+              },
+              fix(fixer) {
+                return fixer.replaceText(propNameNode, replacement);
+              },
+              messageId: 'replacedWith',
+              node: propNameNode,
+            });
+          }
+        });
+      },
+    });
+  },
+  defaultOptions: [],
+  meta: {
+    docs: {
+      description: '...',
+    },
+    fixable: 'code',
+    messages: {
+      replacedWith: `'{{ prop }}' has been replaced with '{{ replacement }}'`,
+    },
+    schema: [],
+    type: 'problem',
+  },
+  name: RULE_NAME,
+});

src/utils/assertions.ts

@@ -0,0 +1,11 @@
+class AssertionError extends Error {
+  constructor(msg: string) {
+    super(msg);
+    this.name = 'AssertionError';
+  }
+}
+
+export function assert(condition: any, msg?: string): asserts condition {
+  if (!condition)
+    throw new AssertionError(msg ?? 'AssertionError');
+}

src/utils/index.ts

@@ -9,3 +9,5 @@ export * from './node';
 export * from './config';
 
 export * from './array';
+
+export * from './assertions';

tests/rules/no-deprecated-props.ts

@@ -0,0 +1,66 @@
+import { RuleTester } from 'eslint';
+import rule from '../../src/rules/no-deprecated-props';
+
+const vueParser = require.resolve('vue-eslint-parser');
+
+const tester = new RuleTester({
+  parser: vueParser,
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+});
+
+tester.run('no-deprecated-props', rule as never, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+         <script lang="ts">
+         const val = ref('')         
+         </script>
+         <template>
+            <div>
+              <RuiRadio :value="val"/>
+              <RuiRadio value="ok"/>
+            </div>
+         </template>
+        `,
+    },
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `     
+        <script lang="ts">
+        const val = ref('')         
+        </script>
+        <template>
+          <div>
+            <RuiRadio :internal-value="val"/>
+            <RuiRadio internal-value="ok"/>
+          </div>
+        </template>
+      `.trim(),
+      output: `
+        <script lang="ts">
+        const val = ref('')         
+        </script>
+        <template>
+          <div>
+            <RuiRadio :value="val"/>
+            <RuiRadio value="ok"/>
+          </div>
+        </template>
+      `.trim(),
+      errors: [
+        {
+          messageId: 'replacedWith',
+        },
+        {
+          messageId: 'replacedWith',
+        },
+      ],
+    },
+  ],
+});