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.