Add support for v-bind same-name shorthand (#215)

* Add support for v-bind same-name shorthand

* fix

* add test

* fix

Author: ota-meshi

src/script-setup/scope-analyzer.ts

@@ -15,6 +15,7 @@ import {
     isScriptElement,
     isScriptSetupElement,
 } from "../common/ast-utils"
+import { camelize } from "../utils/utils"
 
 const BUILTIN_COMPONENTS = new Set([
     "template",
@@ -94,15 +95,6 @@ const COMPILER_MACROS_AT_ROOT = new Set([
     "defineModel",
 ])
 
-/**
- * `casing.camelCase()` converts the beginning to lowercase,
- * but does not convert the case of the beginning character when converting with Vue3.
- * @see https://github.com/vuejs/vue-next/blob/48de8a42b7fed7a03f7f1ff5d53d6a704252cafe/packages/shared/src/index.ts#L109
- */
-function camelize(str: string) {
-    return str.replace(/-(\w)/gu, (_, c) => (c ? c.toUpperCase() : ""))
-}
-
 function capitalize(str: string) {
     return str[0].toUpperCase() + str.slice(1)
 }

src/template/index.ts

@@ -7,6 +7,8 @@ import type { ParserOptions } from "../common/parser-options"
 import { isSFCFile } from "../common/parser-options"
 import type {
     ESLintExpression,
+    ESLintExtendedProgram,
+    ESLintIdentifier,
     Reference,
     Token,
     VAttribute,
@@ -34,6 +36,7 @@ import {
     parseVOnExpression,
     parseSlotScopeExpression,
     parseGenericExpression,
+    parseScriptFragment,
 } from "../script"
 import {
     createSimpleToken,
@@ -46,6 +49,7 @@ import {
     isTSLang,
 } from "../common/ast-utils"
 import { insertError } from "../common/error-utils"
+import { camelize } from "../utils/utils"
 
 const shorthandSign = /^[.:@#]/u
 const shorthandNameMap = { ":": "bind", ".": "bind", "@": "on", "#": "slot" }
@@ -626,6 +630,14 @@ export function convertToDirective(
     }
 
     if (node.value == null) {
+        if (directive.key.name.name === "bind") {
+            // v-bind same-name shorthand (Vue 3.4+)
+            convertForVBindSameNameShorthandValue(
+                directive,
+                parserOptions,
+                locationCalculator,
+            )
+        }
         return
     }
 
@@ -677,6 +689,65 @@ export function convertToDirective(
     }
 }
 
+function convertForVBindSameNameShorthandValue(
+    directive: VDirective,
+    parserOptions: ParserOptions,
+    locationCalculator: LocationCalculatorForHtml,
+) {
+    if (
+        directive.key.name.name !== "bind" ||
+        directive.key.argument == null ||
+        directive.key.argument.type !== "VIdentifier"
+    ) {
+        return
+    }
+    // v-bind same-name shorthand (Vue 3.4+)
+    const vId = directive.key.argument
+    const camelName = camelize(vId.name)
+    let result: ESLintExtendedProgram | null = null
+    try {
+        result = parseScriptFragment(
+            camelName,
+            locationCalculator.getSubCalculatorAfter(vId.range[0]),
+            parserOptions,
+        )
+    } catch (err) {
+        debug("[template] Parse error: %s", err)
+    }
+    if (
+        result == null ||
+        result.ast.body.length !== 1 ||
+        result.ast.body[0].type !== "ExpressionStatement" ||
+        result.ast.body[0].expression.type !== "Identifier"
+    ) {
+        return
+    }
+    const id: ESLintIdentifier = result.ast.body[0].expression
+    id.range[1] = vId.range[1]
+    id.loc.end = { ...vId.loc.end }
+    if (id.end != null) {
+        id.end = vId.end
+    }
+    directive.value = {
+        type: "VExpressionContainer",
+        range: [...vId.range],
+        loc: {
+            start: { ...vId.loc.start },
+            end: { ...vId.loc.end },
+        },
+        parent: directive,
+        expression: id,
+        references: [
+            {
+                id,
+                mode: "r",
+                variable: null,
+            },
+        ],
+    }
+    id.parent = directive.value
+}
+
 /**
  * Parse the content of the given mustache.
  * @param parserOptions The parser options to parse expressions.

src/utils/utils.ts

@@ -0,0 +1,6 @@
+/**
+ * @see https://github.com/vuejs/vue-next/blob/48de8a42b7fed7a03f7f1ff5d53d6a704252cafe/packages/shared/src/index.ts#L109
+ */
+export function camelize(str: string) {
+    return str.replace(/-(\w)/gu, (_, c) => (c ? c.toUpperCase() : ""))
+}

test/fixtures/ast/directive-shorthands/ast.json

@@ -207,7 +207,67 @@
                                     }
                                 ]
                             },
-                            "value": null
+                            "value": {
+                                "type": "VExpressionContainer",
+                                "range": [
+                                    21,
+                                    22
+                                ],
+                                "loc": {
+                                    "start": {
+                                        "column": 10,
+                                        "line": 2
+                                    },
+                                    "end": {
+                                        "column": 11,
+                                        "line": 2
+                                    }
+                                },
+                                "expression": {
+                                    "type": "Identifier",
+                                    "start": 21,
+                                    "loc": {
+                                        "start": {
+                                            "line": 2,
+                                            "column": 10
+                                        },
+                                        "end": {
+                                            "column": 11,
+                                            "line": 2
+                                        }
+                                    },
+                                    "range": [
+                                        21,
+                                        22
+                                    ],
+                                    "name": "a"
+                                },
+                                "references": [
+                                    {
+                                        "id": {
+                                            "type": "Identifier",
+                                            "start": 21,
+                                            "loc": {
+                                                "start": {
+                                                    "line": 2,
+                                                    "column": 10
+                                                },
+                                                "end": {
+                                                    "column": 11,
+                                                    "line": 2
+                                                }
+                                            },
+                                            "range": [
+                                                21,
+                                                22
+                                            ],
+                                            "name": "a"
+                                        },
+                                        "mode": "r",
+                                        "variable": null
+                                    }
+                                ]
+                            }
                         }
                     ]
                 },

test/fixtures/ast/directive-shorthands/tree.json

@@ -45,6 +45,17 @@
                                                 "children": []
                                             }
                                         ]
+                                    },
+                                    {
+                                        "type": "VExpressionContainer",
+                                        "text": "a",
+                                        "children": [
+                                            {
+                                                "type": "Identifier",
+                                                "text": "a",
+                                                "children": []
+                                            }
+                                        ]
                                     }
                                 ]
                             }