From a56c597d20f97e99a2d5d1fe187bc19324fc952e Mon Sep 17 00:00:00 2001
From: waynzh <zhanghaowei19W@gmail.com>
Date: Wed, 24 Jan 2024 00:31:43 +0800
Subject: [PATCH 1/3] feat: add v-bind-same-name-style rule

---
 lib/rules/v-bind-same-name-style.js       | 118 +++++++++++++++++
 tests/lib/rules/v-bind-same-name-style.js | 151 ++++++++++++++++++++++
 2 files changed, 269 insertions(+)
 create mode 100644 lib/rules/v-bind-same-name-style.js
 create mode 100644 tests/lib/rules/v-bind-same-name-style.js

diff --git a/lib/rules/v-bind-same-name-style.js b/lib/rules/v-bind-same-name-style.js
new file mode 100644
index 000000000..614eb6163
--- /dev/null
+++ b/lib/rules/v-bind-same-name-style.js
@@ -0,0 +1,118 @@
+/**
+ * @author waynzh
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef { VDirectiveKey & { name: VIdentifier & { name: 'bind' }, argument: VExpressionContainer | VIdentifier } } VBindDirectiveKey
+ * @typedef { VDirective & { key: VBindDirectiveKey } } VBindDirective
+ */
+
+/**
+ * @param {VBindDirective} node
+ * @returns {string | null}
+ */
+function getAttributeName(node) {
+  // not support VExpressionContainer e.g. :[attribute]
+  if (node.key.argument.type === 'VIdentifier') {
+    return node.key.argument.rawName
+  }
+
+  return null
+}
+
+/**
+ * @param {VBindDirective} node
+ * @returns {string | null}
+ */
+function getValueName(node) {
+  if (node.value?.expression?.type === 'Identifier') {
+    return node.value.expression.name
+  }
+
+  return null
+}
+
+/**
+ * @param {VBindDirective} node
+ * @returns {boolean}
+ */
+function isSameName(node) {
+  const attrName = getAttributeName(node)
+  const valueName = getValueName(node)
+  return Boolean(attrName && valueName && attrName === valueName)
+}
+
+/**
+ * @param {VBindDirectiveKey} key
+ * @returns {number}
+ */
+function getCutStart(key) {
+  const modifiers = key.modifiers
+  return modifiers.length > 0
+    ? modifiers[modifiers.length - 1].range[1]
+    : key.argument.range[1]
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce `v-bind` same name directive style',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/v-bind-same-name-style.html'
+    },
+    fixable: 'code',
+    schema: [{ enum: ['always', 'never'] }],
+    messages: {
+      expectedShorthand: 'Expected shorthand same name.',
+      unexpectedShorthand: 'Unexpected shorthand same name.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const preferShorthand = context.options[0] === 'always'
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VBindDirective} node */
+      "VAttribute[directive=true][key.name.name='bind'][key.argument!=null]"(
+        node
+      ) {
+        if (!isSameName(node)) return
+
+        const isShortHand = utils.isVBindSameNameShorthand(node)
+        if (isShortHand === preferShorthand) {
+          return
+        }
+
+        let messageId = 'unexpectedShorthand'
+        if (preferShorthand) {
+          messageId = 'expectedShorthand'
+        }
+
+        context.report({
+          node,
+          loc: node.loc,
+          messageId,
+          *fix(fixer) {
+            if (preferShorthand && node.value) {
+              /** @type {Range} */
+              const valueRange = [getCutStart(node.key), node.range[1]]
+
+              yield fixer.removeRange(valueRange)
+            } else if (node.key.argument.type === 'VIdentifier') {
+              yield fixer.insertTextAfter(
+                node,
+                `="${casing.camelCase(node.key.argument.rawName)}"`
+              )
+            }
+          }
+        })
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/v-bind-same-name-style.js b/tests/lib/rules/v-bind-same-name-style.js
new file mode 100644
index 000000000..9c71e91f8
--- /dev/null
+++ b/tests/lib/rules/v-bind-same-name-style.js
@@ -0,0 +1,151 @@
+/**
+ * @author waynzh
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/v-bind-same-name-style')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+const expectedShorthand = 'Expected shorthand same name.'
+const unexpectedShorthand = 'Unexpected shorthand same name.'
+
+tester.run('v-bind-same-name-style', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    // never
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="bar"/><div v-bind:foo="bar"/></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="foo" /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo="foo" /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo="foo" /></template>',
+      options: ['never']
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop="foo" /></template>',
+      options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo="foo" /></template>',
+      options: ['never']
+    },
+    // always
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="bar"/><div v-bind:foo="bar"/></template>',
+      options: ['always']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      options: ['always']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      options: ['always']
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop /></template>',
+      options: ['always']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo /></template>',
+      options: ['always']
+    }
+  ],
+  invalid: [
+    // never
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      output: '<template><div v-bind:foo="foo" /></template>',
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      output: '<template><div :foo="foo" /></template>',
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      output: '<template><div :foo="foo" /></template>',
+      options: ['never'],
+      errors: [unexpectedShorthand]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop /></template>',
+      output: '<template><div :foo.prop="foo" /></template>',
+      options: ['never'],
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo /></template>',
+      output: '<template><div .foo="foo" /></template>',
+      options: ['never'],
+      errors: [unexpectedShorthand]
+    },
+    // always
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="foo" /></template>',
+      output: '<template><div :foo /></template>',
+      options: ['always'],
+      errors: [expectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo="foo" /></template>',
+      output: '<template><div v-bind:foo /></template>',
+      options: ['always'],
+      errors: [expectedShorthand]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop="foo" /></template>',
+      output: '<template><div :foo.prop /></template>',
+      options: ['always'],
+      errors: [expectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo="foo" /></template>',
+      output: '<template><div .foo /></template>',
+      options: ['always'],
+      errors: [expectedShorthand]
+    }
+  ]
+})

From 8c2dce7c1df3aae5de50481bda6f0f68b288e873 Mon Sep 17 00:00:00 2001
From: waynzh <zhanghaowei19W@gmail.com>
Date: Wed, 24 Jan 2024 00:35:00 +0800
Subject: [PATCH 2/3] docs: add docs

---
 docs/rules/index.md                          |  2 +
 docs/rules/no-restricted-static-attribute.md |  1 -
 docs/rules/no-restricted-v-bind.md           |  1 -
 docs/rules/require-explicit-slots.md         |  8 ++-
 docs/rules/v-bind-same-name-style.md         | 68 ++++++++++++++++++++
 lib/index.js                                 |  2 +
 6 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 docs/rules/v-bind-same-name-style.md

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 1367f797e..039099f35 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -269,6 +269,7 @@ For example:
 | [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
 | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
 | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: |
+| [vue/require-explicit-slots](./require-explicit-slots.md) | require slots to be explicitly defined |  | :warning: |
 | [vue/require-expose](./require-expose.md) | require declare public properties using `expose` | :bulb: | :hammer: |
 | [vue/require-macro-variable-name](./require-macro-variable-name.md) | require a certain macro variable name | :bulb: | :hammer: |
 | [vue/require-name-property](./require-name-property.md) | require a name property in Vue components | :bulb: | :hammer: |
@@ -278,6 +279,7 @@ For example:
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
 | [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
 | [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
+| [vue/v-bind-same-name-style](./v-bind-same-name-style.md) | enforce `v-bind` same name directive style | :wrench: | :hammer: |
 | [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
 | [vue/v-if-else-key](./v-if-else-key.md) | require key attribute for conditionally rendered repeated components | :wrench: | :warning: |
 | [vue/v-on-handler-style](./v-on-handler-style.md) | enforce writing style for handlers in `v-on` directives | :wrench: | :hammer: |
diff --git a/docs/rules/no-restricted-static-attribute.md b/docs/rules/no-restricted-static-attribute.md
index a0534f563..ee4f1d209 100644
--- a/docs/rules/no-restricted-static-attribute.md
+++ b/docs/rules/no-restricted-static-attribute.md
@@ -5,7 +5,6 @@ title: vue/no-restricted-static-attribute
 description: disallow specific attribute
 since: v7.0.0
 ---
-
 # vue/no-restricted-static-attribute
 
 > disallow specific attribute
diff --git a/docs/rules/no-restricted-v-bind.md b/docs/rules/no-restricted-v-bind.md
index 4c1495f4e..b603e690f 100644
--- a/docs/rules/no-restricted-v-bind.md
+++ b/docs/rules/no-restricted-v-bind.md
@@ -5,7 +5,6 @@ title: vue/no-restricted-v-bind
 description: disallow specific argument in `v-bind`
 since: v7.0.0
 ---
-
 # vue/no-restricted-v-bind
 
 > disallow specific argument in `v-bind`
diff --git a/docs/rules/require-explicit-slots.md b/docs/rules/require-explicit-slots.md
index ac3050896..c3b78ad8d 100644
--- a/docs/rules/require-explicit-slots.md
+++ b/docs/rules/require-explicit-slots.md
@@ -2,9 +2,8 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/require-explicit-slots
-description: require slots to be explicitly defined with defineSlots
+description: require slots to be explicitly defined
 ---
-
 # vue/require-explicit-slots
 
 > require slots to be explicitly defined
@@ -66,3 +65,8 @@ defineComponent({
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-explicit-slots.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-explicit-slots.js)
diff --git a/docs/rules/v-bind-same-name-style.md b/docs/rules/v-bind-same-name-style.md
new file mode 100644
index 000000000..de7db5e02
--- /dev/null
+++ b/docs/rules/v-bind-same-name-style.md
@@ -0,0 +1,68 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-bind-same-name-style
+description: enforce `v-bind` same name directive style
+---
+# vue/v-bind-same-name-style
+
+> enforce `v-bind` same name directive style
+
+- :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 enforces `v-bind` same-name directive style which you should use always or never use shorthand form.
+
+<eslint-code-block fix :rules="{'vue/v-bind-same-name-style': ['error', 'never']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div :foo="foo" />
+  <div v-bind:foo="foo" />
+
+  <!-- ✗ BAD -->
+  <div :foo />
+  <div v-bind:foo />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Default is set to `never`.
+
+```json
+{
+  "vue/v-bind-same-name-style": ["error", "never" | "always"]
+}
+```
+
+- `"never"` (default) ... requires never using shorthand.
+- `"always"` ... requires using shorthand.
+
+### `"always"`
+
+<eslint-code-block fix :rules="{'vue/v-bind-same-name-style': ['error', 'always']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div :foo />
+  <div v-bind:foo />
+
+  <!-- ✗ BAD -->
+  <div :foo="foo" />
+  <div v-bind:foo="foo" />
+</template>
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-bind-same-name-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-bind-same-name-style.js)
diff --git a/lib/index.js b/lib/index.js
index d9022cabf..c0b1f51a2 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -190,6 +190,7 @@ module.exports = {
     'require-direct-export': require('./rules/require-direct-export'),
     'require-emit-validator': require('./rules/require-emit-validator'),
     'require-explicit-emits': require('./rules/require-explicit-emits'),
+    'require-explicit-slots': require('./rules/require-explicit-slots'),
     'require-expose': require('./rules/require-expose'),
     'require-macro-variable-name': require('./rules/require-macro-variable-name'),
     'require-name-property': require('./rules/require-name-property'),
@@ -216,6 +217,7 @@ module.exports = {
     'template-curly-spacing': require('./rules/template-curly-spacing'),
     'this-in-template': require('./rules/this-in-template'),
     'use-v-on-exact': require('./rules/use-v-on-exact'),
+    'v-bind-same-name-style': require('./rules/v-bind-same-name-style'),
     'v-bind-style': require('./rules/v-bind-style'),
     'v-for-delimiter-style': require('./rules/v-for-delimiter-style'),
     'v-if-else-key': require('./rules/v-if-else-key'),

From 077196035643cbbebef3eafe515ea2f2bfbd83df Mon Sep 17 00:00:00 2001
From: waynzh <zhanghaowei19W@gmail.com>
Date: Wed, 24 Jan 2024 00:59:44 +0800
Subject: [PATCH 3/3] feat: add camlecase test case

---
 lib/rules/v-bind-same-name-style.js       |  8 ++++++--
 tests/lib/rules/v-bind-same-name-style.js | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/lib/rules/v-bind-same-name-style.js b/lib/rules/v-bind-same-name-style.js
index 614eb6163..d646146a7 100644
--- a/lib/rules/v-bind-same-name-style.js
+++ b/lib/rules/v-bind-same-name-style.js
@@ -44,7 +44,11 @@ function getValueName(node) {
 function isSameName(node) {
   const attrName = getAttributeName(node)
   const valueName = getValueName(node)
-  return Boolean(attrName && valueName && attrName === valueName)
+  return Boolean(
+    attrName &&
+      valueName &&
+      casing.camelCase(attrName) === casing.camelCase(valueName)
+  )
 }
 
 /**
@@ -99,7 +103,7 @@ module.exports = {
           loc: node.loc,
           messageId,
           *fix(fixer) {
-            if (preferShorthand && node.value) {
+            if (preferShorthand) {
               /** @type {Range} */
               const valueRange = [getCutStart(node.key), node.range[1]]
 
diff --git a/tests/lib/rules/v-bind-same-name-style.js b/tests/lib/rules/v-bind-same-name-style.js
index 9c71e91f8..deca54896 100644
--- a/tests/lib/rules/v-bind-same-name-style.js
+++ b/tests/lib/rules/v-bind-same-name-style.js
@@ -117,6 +117,14 @@ tester.run('v-bind-same-name-style', rule, {
       options: ['never'],
       errors: [unexpectedShorthand]
     },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :src-url /></template>',
+      output: '<template><div :src-url="srcUrl" /></template>',
+      options: ['never'],
+      errors: [unexpectedShorthand]
+    },
     // always
     {
       filename: 'test.vue',
@@ -146,6 +154,14 @@ tester.run('v-bind-same-name-style', rule, {
       output: '<template><div .foo /></template>',
       options: ['always'],
       errors: [expectedShorthand]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :src-url="srcUrl" /></template>',
+      output: '<template><div :src-url /></template>',
+      options: ['always'],
+      errors: [expectedShorthand]
     }
   ]
 })