feat: support v-bind shorthand

extensions/vscode/package.json

@@ -474,7 +474,7 @@
 					"items": {
 						"type": "string"
 					},
-					"default": [],
+					"default": [ ],
 					"description": "List any additional file extensions that should be processed as Vue files (requires restart)."
 				},
 				"vue.server.fullCompletionList": {
@@ -595,6 +595,11 @@
 					"type": "boolean",
 					"default": false,
 					"description": "Show inlay hints for component options wrapper for type support."
+				},
+				"vue.inlayHints.vbindShorthand": {
+					"type": "boolean",
+					"default": false,
+					"description": "Show inlay hints for v-bind shorthand."
 				}
 			}
 		},

packages/language-core/package.json

@@ -15,8 +15,8 @@
 	"dependencies": {
 		"@volar/language-core": "~1.11.0",
 		"@volar/source-map": "~1.11.0",
-		"@vue/compiler-dom": "^3.3.0",
-		"@vue/shared": "^3.3.0",
+		"@vue/compiler-dom": "npm:@vue/[email protected].0",
+		"@vue/shared": "npm:@vue/[email protected].0",
 		"computeds": "^0.0.1",
 		"minimatch": "^9.0.3",
 		"muggle-string": "^0.3.1",
@@ -27,7 +27,7 @@
 		"@types/minimatch": "^5.1.2",
 		"@types/node": "latest",
 		"@types/path-browserify": "^1.0.1",
-		"@vue/compiler-sfc": "^3.3.0"
+		"@vue/compiler-sfc": "npm:@vue/[email protected].0"
 	},
 	"peerDependencies": {
 		"typescript": "*"

packages/language-core/src/generators/template.ts

@@ -1297,7 +1297,8 @@ export function generate(
 					);
 				}
 				codes.push(': (');
-				if (prop.exp && !(prop.exp.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY)) { // style='z-index: 2' will compile to {'z-index':'2'}
+				const isShorthand = prop.exp?.loc.start.offset === prop.exp?.loc.end.offset;
+				if (prop.exp && !isShorthand && !(prop.exp.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY)) { // style='z-index: 2' will compile to {'z-index':'2'}
 					codes.push(
 						...createInterpolationCode(
 							prop.exp.loc.source,
@@ -1318,6 +1319,19 @@ export function generate(
 						);
 					}
 				}
+				else if (prop.arg && isShorthand && prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+					const propVariableName = camelize(prop.arg.content);
+					codes.push(
+						...createInterpolationCode(
+							propVariableName,
+							prop.arg.loc,
+							prop.arg.loc.start.offset,
+							caps_all,
+							'(',
+							')',
+						),
+					);
+				}
 				else {
 					codes.push('{}');
 				}

packages/language-service/package.json

@@ -20,7 +20,7 @@
 		"@volar/language-core": "~1.11.0",
 		"@volar/language-service": "~1.11.0",
 		"@volar/typescript": "~1.11.0",
-		"@vue/compiler-dom": "^3.3.0",
+		"@vue/compiler-dom": "npm:@vue/[email protected].0",
 		"@vue/language-core": "1.8.22",
 		"@vue/shared": "^3.3.0",
 		"computeds": "^0.0.1",

packages/language-service/src/plugins/vue-visualize-hidden-callback-param.ts

@@ -20,7 +20,7 @@ const plugin: Service = (context) => {
 
 					const hint: {
 						setting: string;
-						label: string;
+						label: string | vscode.InlayHintLabelPart[];
 						tooltip: string;
 						paddingRight?: boolean;
 						paddingLeft?: boolean;

test-workspace/tsc/vue3/v-bind-shorthand/Comp.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+defineProps<{
+	foo?: number;
+	bar?: number;
+}>();
+</script>

test-workspace/tsc/vue3/v-bind-shorthand/main.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Comp from './Comp.vue';
+
+const foo = 1;
+const bar = '';
+</script>
+
+<template>
+	<Comp :foo></Comp>
+	<!-- @vue-expect-error should typecheck -->
+	<Comp :bar></Comp>
+</template>