vuejs · KazariEX · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/packages/language-core/lib/codegen/script/scriptSetup.ts
@@ -1,7 +1,9 @@
+import { camelize } from '@vue/shared';
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
 import type { Code, Sfc, TextRange } from '../../types';
 import { codeFeatures } from '../codeFeatures';
 import { combineLastMapping, endOfLine, generateSfcBlockSection, newLine } from '../utils';
+import { generateCamelized } from '../utils/camelized';
 import { generateComponent, generateEmitsOption } from './component';
 import { generateComponentSelf } from './componentSelf';
 import type { ScriptCodegenContext } from './context';
@@ -477,7 +479,7 @@ function* generateComponentProps(
 			}
 
 			yield `: `;
-			yield getRangeName(scriptSetup, defineProp.defaultValue);
+			yield getRangeText(scriptSetup, defineProp.defaultValue);
 			yield `,${newLine}`;
 		}
 		yield `}${endOfLine}`;
@@ -491,6 +493,13 @@ function* generateComponentProps(
 		ctx.generatedPropsType = true;
 		yield `${ctx.localTypes.PropsChildren}<__VLS_Slots>`;
 	}
+	if (scriptSetupRanges.defineProps?.typeArg) {
+		if (ctx.generatedPropsType) {
+			yield ` & `;
+		}
+		ctx.generatedPropsType = true;
+		yield `__VLS_Props`;
+	}
 	if (scriptSetupRanges.defineProp.length) {
 		if (ctx.generatedPropsType) {
 			yield ` & `;
@@ -504,11 +513,17 @@ function* generateComponentProps(
 				yield generateSfcBlockSection(scriptSetup, defineProp.comments.start, defineProp.comments.end, codeFeatures.all);
 				yield newLine;
 			}
+
 			if (defineProp.isModel && !defineProp.name) {
 				yield propName!;
 			}
 			else if (defineProp.name) {
-				yield generateSfcBlockSection(scriptSetup, defineProp.name.start, defineProp.name.end, codeFeatures.navigation);
+				yield* generateCamelized(
+					getRangeText(scriptSetup, defineProp.name),
+					scriptSetup.name,
+					defineProp.name.start,
+					codeFeatures.navigation
+				);
 			}
 			else if (defineProp.localName) {
 				yield generateSfcBlockSection(scriptSetup, defineProp.localName.start, defineProp.localName.end, codeFeatures.navigation);
@@ -525,19 +540,12 @@ function* generateComponentProps(
 
 			if (defineProp.modifierType) {
 				const modifierName = `${defineProp.name ? propName : 'model'}Modifiers`;
-				const modifierType = getRangeName(scriptSetup, defineProp.modifierType);
+				const modifierType = getRangeText(scriptSetup, defineProp.modifierType);
 				yield `'${modifierName}'?: Partial<Record<${modifierType}, true>>,${newLine}`;
 			}
 		}
 		yield `}`;
 	}
-	if (scriptSetupRanges.defineProps?.typeArg) {
-		if (ctx.generatedPropsType) {
-			yield ` & `;
-		}
-		ctx.generatedPropsType = true;
-		yield `__VLS_Props`;
-	}
 	if (!ctx.generatedPropsType) {
 		yield `{}`;
 	}
@@ -555,7 +563,7 @@ function* generateModelEmit(
 			const [propName, localName] = getPropAndLocalName(scriptSetup, defineModel);
 			yield `'update:${propName}': [value: `;
 			yield* generateDefinePropType(scriptSetup, propName, localName, defineModel);
-			if (!defineModel.required && defineModel.defaultValue === undefined) {
+			if (!defineModel.required && !defineModel.defaultValue) {
 				yield ` | undefined`;
 			}
 			yield `]${endOfLine}`;
@@ -573,7 +581,7 @@ function* generateDefinePropType(
 ) {
 	if (defineProp.type) {
 		// Infer from defineProp<T>
-		yield getRangeName(scriptSetup, defineProp.type);
+		yield getRangeText(scriptSetup, defineProp.type);
 	}
 	else if (defineProp.runtimeType && localName) {
 		// Infer from actual prop declaration code 
@@ -593,20 +601,17 @@ function getPropAndLocalName(
 	defineProp: ScriptSetupRanges['defineProp'][number]
 ) {
 	const localName = defineProp.localName
-		? getRangeName(scriptSetup, defineProp.localName)
+		? getRangeText(scriptSetup, defineProp.localName)
 		: undefined;
-	let propName = defineProp.name
-		? getRangeName(scriptSetup, defineProp.name)
+	const propName = defineProp.name
+		? camelize(getRangeText(scriptSetup, defineProp.name).slice(1, -1))
 		: defineProp.isModel
 			? 'modelValue'
 			: localName;
-	if (defineProp.name) {
-		propName = propName!.replace(/['"]+/g, '');
-	}
 	return [propName, localName] as const;
 }
 
-function getRangeName(
+function getRangeText(
 	scriptSetup: NonNullable<Sfc['scriptSetup']>,
 	range: TextRange
 ) {

diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
@@ -3,7 +3,7 @@ import { camelize, capitalize } from '@vue/shared';
 import type { Code, VueCodeInformation } from '../../types';
 import { getSlotsPropertyName, hyphenateTag } from '../../utils/shared';
 import { createVBindShorthandInlayHintInfo } from '../inlayHints';
-import { endOfLine, newLine, normalizeAttributeValue, variableNameRegex, wrapWith } from '../utils';
+import { endOfLine, identifierRegex, newLine, normalizeAttributeValue, wrapWith } from '../utils';
 import { generateCamelized } from '../utils/camelized';
 import type { TemplateCodegenContext } from './context';
 import { generateElementChildren } from './elementChildren';
@@ -99,6 +99,7 @@ export function* generateComponent(
 				const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
 				yield* generateCamelized(
 					shouldCapitalize ? capitalize(node.tag) : node.tag,
+					'template',
 					tagOffset,
 					{
 						...ctx.codeFeatures.withoutHighlightAndCompletion,
@@ -164,7 +165,7 @@ export function* generateComponent(
 		yield `${endOfLine}`;
 
 		const camelizedTag = camelize(node.tag);
-		if (variableNameRegex.test(camelizedTag)) {
+		if (identifierRegex.test(camelizedTag)) {
 			// navigation support
 			yield `/** @type {[`;
 			for (const tagOffset of tagOffsets) {
@@ -173,6 +174,7 @@ export function* generateComponent(
 					yield `typeof __VLS_components.`;
 					yield* generateCamelized(
 						shouldCapitalize ? capitalize(node.tag) : node.tag,
+						'template',
 						tagOffset,
 						{
 							navigation: {
@@ -190,6 +192,7 @@ export function* generateComponent(
 				yield `// @ts-ignore${newLine}`; // #2304
 				yield* generateCamelized(
 					capitalize(node.tag),
+					'template',
 					tagOffsets[0],
 					{
 						completion: {
@@ -403,7 +406,7 @@ function* generateFailedPropExps(
 }
 
 function getCanonicalComponentName(tagText: string) {
-	return variableNameRegex.test(tagText)
+	return identifierRegex.test(tagText)
 		? tagText
 		: capitalize(camelize(tagText.replace(colonReg, '-')));
 }
@@ -423,12 +426,13 @@ function getPossibleOriginalComponentNames(tagText: string, deduplicate: boolean
 }
 
 function* generateCanonicalComponentName(tagText: string, offset: number, features: VueCodeInformation): Generator<Code> {
-	if (variableNameRegex.test(tagText)) {
+	if (identifierRegex.test(tagText)) {
 		yield [tagText, 'template', offset, features];
 	}
 	else {
 		yield* generateCamelized(
 			capitalize(tagText.replace(colonReg, '-')),
+			'template',
 			offset,
 			features
 		);
@@ -482,7 +486,7 @@ function* generateElementReference(
 			);
 			yield `} */${endOfLine}`;
 
-			if (variableNameRegex.test(content) && !options.templateRefNames.has(content)) {
+			if (identifierRegex.test(content) && !options.templateRefNames.has(content)) {
 				ctx.accessExternalVariable(content, startOffset);
 			}
 

diff --git a/packages/language-core/lib/codegen/template/elementDirectives.ts b/packages/language-core/lib/codegen/template/elementDirectives.ts
@@ -69,6 +69,7 @@ function* generateIdentifier(
 		`__VLS_directives.`,
 		...generateCamelized(
 			rawName,
+			'template',
 			prop.loc.start.offset,
 			ctx.resolveCodeFeatures({
 				...codeFeatures.withoutHighlight,

diff --git a/packages/language-core/lib/codegen/template/elementEvents.ts b/packages/language-core/lib/codegen/template/elementEvents.ts
@@ -2,7 +2,7 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import { camelize, capitalize } from '@vue/shared';
 import type * as ts from 'typescript';
 import type { Code } from '../../types';
-import { combineLastMapping, createTsAst, endOfLine, newLine, variableNameRegex, wrapWith } from '../utils';
+import { combineLastMapping, createTsAst, endOfLine, identifierRegex, newLine, wrapWith } from '../utils';
 import { generateCamelized } from '../utils/camelized';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
@@ -65,11 +65,12 @@ export function* generateEventArg(
 		...ctx.codeFeatures.withoutHighlightAndCompletion,
 		...ctx.codeFeatures.navigationWithoutRename,
 	};
-	if (variableNameRegex.test(camelize(name))) {
+	if (identifierRegex.test(camelize(name))) {
 		yield ['', 'template', start, features];
 		yield directive;
 		yield* generateCamelized(
 			capitalize(name),
+			'template',
 			start,
 			combineLastMapping
 		);
@@ -84,6 +85,7 @@ export function* generateEventArg(
 			directive,
 			...generateCamelized(
 				capitalize(name),
+				'template',
 				start,
 				combineLastMapping
 			),

diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts
@@ -6,7 +6,7 @@ import type { Code, VueCodeInformation, VueCompilerOptions } from '../../types';
 import { hyphenateAttr, hyphenateTag } from '../../utils/shared';
 import { codeFeatures } from '../codeFeatures';
 import { createVBindShorthandInlayHintInfo } from '../inlayHints';
-import { newLine, variableNameRegex, wrapWith } from '../utils';
+import { identifierRegex, newLine, wrapWith } from '../utils';
 import { generateCamelized } from '../utils/camelized';
 import { generateUnicode } from '../utils/unicode';
 import type { TemplateCodegenContext } from './context';
@@ -303,12 +303,13 @@ export function* generatePropExp(
 		else {
 			const propVariableName = camelize(exp.loc.source);
 
-			if (variableNameRegex.test(propVariableName)) {
+			if (identifierRegex.test(propVariableName)) {
 				const isDestructuredProp = options.destructuredPropNames?.has(propVariableName) ?? false;
 				const isTemplateRef = options.templateRefNames?.has(propVariableName) ?? false;
 
 				const codes = generateCamelized(
 					exp.loc.source,
+					'template',
 					exp.loc.start.offset,
 					features
 				);

diff --git a/packages/language-core/lib/codegen/template/objectProperty.ts b/packages/language-core/lib/codegen/template/objectProperty.ts
@@ -1,6 +1,6 @@
 import { camelize } from '@vue/shared';
 import type { Code, VueCodeInformation } from '../../types';
-import { combineLastMapping, variableNameRegex, wrapWith } from '../utils';
+import { combineLastMapping, identifierRegex, wrapWith } from '../utils';
 import { generateCamelized } from '../utils/camelized';
 import { generateStringLiteralKey } from '../utils/stringLiteralKey';
 import type { TemplateCodegenContext } from './context';
@@ -44,22 +44,22 @@ export function* generateObjectProperty(
 		}
 	}
 	else if (shouldCamelize) {
-		if (variableNameRegex.test(camelize(code))) {
-			yield* generateCamelized(code, offset, features);
+		if (identifierRegex.test(camelize(code))) {
+			yield* generateCamelized(code, 'template', offset, features);
 		}
 		else {
 			yield* wrapWith(
 				offset,
 				offset + code.length,
 				features,
 				`'`,
-				...generateCamelized(code, offset, combineLastMapping),
+				...generateCamelized(code, 'template', offset, combineLastMapping),
 				`'`
 			);
 		}
 	}
 	else {
-		if (variableNameRegex.test(code)) {
+		if (identifierRegex.test(code)) {
 			yield [code, 'template', offset, features];
 		}
 		else {

diff --git a/packages/language-core/lib/codegen/template/propertyAccess.ts b/packages/language-core/lib/codegen/template/propertyAccess.ts
@@ -1,5 +1,5 @@
 import type { Code, VueCodeInformation } from '../../types';
-import { variableNameRegex } from '../utils';
+import { identifierRegex } from '../utils';
 import { generateStringLiteralKey } from '../utils/stringLiteralKey';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
@@ -13,7 +13,7 @@ export function* generatePropertyAccess(
 	features?: VueCodeInformation,
 	astHolder?: any
 ): Generator<Code> {
-	if (!options.compilerOptions.noPropertyAccessFromIndexSignature && variableNameRegex.test(code)) {
+	if (!options.compilerOptions.noPropertyAccessFromIndexSignature && identifierRegex.test(code)) {
 		yield `.`;
 		yield offset !== undefined && features
 			? [code, 'template', offset, features]

diff --git a/packages/language-core/lib/codegen/utils/camelized.ts b/packages/language-core/lib/codegen/utils/camelized.ts
@@ -1,23 +1,28 @@
 import { capitalize } from '@vue/shared';
 import type { Code, VueCodeInformation } from '../../types';
 
-export function* generateCamelized(code: string, offset: number, info: VueCodeInformation): Generator<Code> {
+export function* generateCamelized(
+	code: string,
+	source: string,
+	offset: number,
+	info: VueCodeInformation
+): Generator<Code> {
 	const parts = code.split('-');
 	for (let i = 0; i < parts.length; i++) {
 		const part = parts[i];
 		if (part !== '') {
 			if (i === 0) {
 				yield [
 					part,
-					'template',
+					source,
 					offset,
 					info,
 				];
 			}
 			else {
 				yield [
 					capitalize(part),
-					'template',
+					source,
 					offset,
 					{ __combineOffset: i },
 				];

diff --git a/packages/language-core/lib/codegen/utils/index.ts b/packages/language-core/lib/codegen/utils/index.ts
@@ -6,7 +6,7 @@ import type { Code, SfcBlock, SfcBlockAttr, VueCodeInformation } from '../../typ
 export const newLine = `\n`;
 export const endOfLine = `;${newLine}`;
 export const combineLastMapping: VueCodeInformation = { __combineOffset: 1 };
-export const variableNameRegex = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+export const identifierRegex = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
 
 export function* wrapWith(
 	startOffset: number,