Merge branch 'master' into fix/issue-3206

.vscode/settings.json

@@ -15,5 +15,8 @@
 	},
 	"[jsonc]": {
 		"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"[vue]": {
+		"editor.defaultFormatter": "Vue.volar"
 	}
 }

packages/vscode-typescript-vue-plugin/README.md

@@ -10,7 +10,7 @@ This plugin proxies TS server requests to provide some extra functionality:
 
 - When finding references in *.ts files, you also get results from *.vue files.
 - When renaming in *.ts files, references on *.vue files also get adjusted.
-- When typing import statements, .vue* files will also appear for autocompletion.
+- When typing import statements, *.vue files will also appear for autocompletion.
 - (And some extra details most people don't need to know...)
 
 ## Sponsors

packages/vscode-vue/README.md

@@ -91,8 +91,7 @@ For Global components, you need to define `GlobalComponents` interface, for exam
 
 ```typescript
 // components.d.ts
-declare module '@vue/runtime-core' {  // Vue 3
-// declare module 'vue' {   // Vue 2.7
+declare module 'vue' {  // Vue >= 2.7
 // declare module '@vue/runtime-dom' {  // Vue <= 2.6.14
   export interface GlobalComponents {
     RouterLink: typeof import('vue-router')['RouterLink']

packages/vue-language-core/src/generators/script.ts

@@ -1,19 +1,17 @@
-import { getLength, Segment } from '@volar/source-map';
 import { FileRangeCapabilities, MirrorBehaviorCapabilities } from '@volar/language-core';
-import type { TextRange } from '../types';
 import * as SourceMaps from '@volar/source-map';
-import { hyphenate } from '@vue/shared';
+import { Segment, getLength } from '@volar/source-map';
+import * as muggle from 'muggle-string';
 import { posix as path } from 'path';
 import type * as ts from 'typescript/lib/tsserverlibrary';
 import type * as templateGen from '../generators/template';
 import type { ScriptRanges } from '../parsers/scriptRanges';
 import type { ScriptSetupRanges } from '../parsers/scriptSetupRanges';
+import type { TextRange, VueCompilerOptions } from '../types';
 import { Sfc } from '../types';
-import type { VueCompilerOptions } from '../types';
-import { getSlotsPropertyName } from '../utils/shared';
-import { walkInterpolationFragment } from '../utils/transform';
 import * as sharedTypes from '../utils/globalTypes';
-import * as muggle from 'muggle-string';
+import { getSlotsPropertyName, hyphenateTag } from '../utils/shared';
+import { walkInterpolationFragment } from '../utils/transform';
 
 export function generate(
 	ts: typeof import('typescript/lib/tsserverlibrary'),
@@ -975,7 +973,7 @@ declare function defineProp<T>(value?: T | (() => T), required?: boolean, rest?:
 
 			// fix import components unused report
 			for (const varName of bindingNames) {
-				if (!!htmlGen.tagNames[varName] || !!htmlGen.tagNames[hyphenate(varName)]) {
+				if (!!htmlGen.tagNames[varName] || !!htmlGen.tagNames[hyphenateTag(varName)]) {
 					usageVars.add(varName);
 				}
 			}

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

@@ -1,12 +1,13 @@
-import { Segment } from '@volar/source-map';
 import { FileRangeCapabilities } from '@volar/language-core';
+import { Segment } from '@volar/source-map';
 import * as CompilerDOM from '@vue/compiler-dom';
-import { camelize, capitalize, hyphenate } from '@vue/shared';
+import { camelize, capitalize } from '@vue/shared';
+import { minimatch } from 'minimatch';
+import * as muggle from 'muggle-string';
 import type * as ts from 'typescript/lib/tsserverlibrary';
 import { Sfc, VueCompilerOptions } from '../types';
+import { hyphenateAttr, hyphenateTag } from '../utils/shared';
 import { colletVars, walkInterpolationFragment } from '../utils/transform';
-import { minimatch } from 'minimatch';
-import * as muggle from 'muggle-string';
 
 const capabilitiesPresets = {
 	all: FileRangeCapabilities.full,
@@ -233,7 +234,7 @@ export function generate(
 								...capabilitiesPresets.tagReference,
 								rename: {
 									normalize: tagName === name ? capabilitiesPresets.tagReference.rename.normalize : camelizeComponentName,
-									apply: getRenameApply(tagName),
+									apply: getTagRenameApply(tagName),
 								},
 							},
 						]),
@@ -963,8 +964,8 @@ export function generate(
 								},
 								// onClickOutside -> @click-outside
 								apply(newName) {
-									const hName = hyphenate(newName);
-									if (hyphenate(newName).startsWith('on-')) {
+									const hName = hyphenateAttr(newName);
+									if (hyphenateAttr(newName).startsWith('on-')) {
 										return camelize(hName.slice('on-'.length));
 									}
 									return newName;
@@ -1188,7 +1189,7 @@ export function generate(
 
 				if (
 					(!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
-					&& hyphenate(attrNameText) === attrNameText
+					&& hyphenateAttr(attrNameText) === attrNameText
 					&& !vueCompilerOptions.htmlAttributes.some(pattern => minimatch(attrNameText!, pattern))
 				) {
 					attrNameText = camelize(attrNameText);
@@ -1222,7 +1223,7 @@ export function generate(
 								...caps_attr,
 								rename: {
 									normalize: camelize,
-									apply: camelized ? hyphenate : noEditApply,
+									apply: camelized ? hyphenateAttr : noEditApply,
 								},
 							},
 						], (prop.loc as any).name_2 ?? ((prop.loc as any).name_2 = {})),
@@ -1238,7 +1239,7 @@ export function generate(
 								...caps_attr,
 								rename: {
 									normalize: camelize,
-									apply: camelized ? hyphenate : noEditApply,
+									apply: camelized ? hyphenateAttr : noEditApply,
 								},
 							},
 						], (prop.loc as any).name_2 ?? ((prop.loc as any).name_2 = {})),
@@ -1294,7 +1295,7 @@ export function generate(
 				let camelized = false;
 
 				if (
-					hyphenate(prop.name) === prop.name
+					hyphenateAttr(prop.name) === prop.name
 					&& !vueCompilerOptions.htmlAttributes.some(pattern => minimatch(attrNameText!, pattern))
 				) {
 					attrNameText = camelize(prop.name);
@@ -1317,7 +1318,7 @@ export function generate(
 							...caps_attr,
 							rename: {
 								normalize: camelize,
-								apply: camelized ? hyphenate : noEditApply,
+								apply: camelized ? hyphenateAttr : noEditApply,
 							},
 						},
 					], (prop.loc as any).name_1 ?? ((prop.loc as any).name_1 = {}))
@@ -1479,7 +1480,7 @@ export function generate(
 							},
 							rename: {
 								normalize: camelize,
-								apply: getRenameApply(prop.name),
+								apply: getPropRenameApply(prop.name),
 							},
 						},
 					],
@@ -1642,7 +1643,7 @@ export function generate(
 							...capabilitiesPresets.slotProp,
 							rename: {
 								normalize: camelize,
-								apply: getRenameApply(prop.arg.content),
+								apply: getPropRenameApply(prop.arg.content),
 							},
 						},
 					], prop.arg.loc),
@@ -1671,7 +1672,7 @@ export function generate(
 							...capabilitiesPresets.attr,
 							rename: {
 								normalize: camelize,
-								apply: getRenameApply(prop.name),
+								apply: getPropRenameApply(prop.name),
 							},
 						},
 					], prop.loc),
@@ -1952,8 +1953,12 @@ function camelizeComponentName(newName: string) {
 	return camelize('-' + newName);
 }
 
-function getRenameApply(oldName: string) {
-	return oldName === hyphenate(oldName) ? hyphenate : noEditApply;
+function getTagRenameApply(oldName: string) {
+	return oldName === hyphenateTag(oldName) ? hyphenateTag : noEditApply;
+}
+
+function getPropRenameApply(oldName: string) {
+	return oldName === hyphenateAttr(oldName) ? hyphenateAttr : noEditApply;
 }
 
 function noEditApply(n: string) {
@@ -1965,7 +1970,7 @@ function getModelValuePropName(node: CompilerDOM.ElementNode, vueVersion: number
 	for (const modelName in vueCompilerOptions.experimentalModelPropName) {
 		const tags = vueCompilerOptions.experimentalModelPropName[modelName];
 		for (const tag in tags) {
-			if (node.tag === tag || node.tag === hyphenate(tag)) {
+			if (node.tag === tag || node.tag === hyphenateTag(tag)) {
 				const v = tags[tag];
 				if (typeof v === 'object') {
 					const arr = Array.isArray(v) ? v : [v];
@@ -1991,7 +1996,7 @@ function getModelValuePropName(node: CompilerDOM.ElementNode, vueVersion: number
 	for (const modelName in vueCompilerOptions.experimentalModelPropName) {
 		const tags = vueCompilerOptions.experimentalModelPropName[modelName];
 		for (const tag in tags) {
-			if (node.tag === tag || node.tag === hyphenate(tag)) {
+			if (node.tag === tag || node.tag === hyphenateTag(tag)) {
 				const attrs = tags[tag];
 				if (attrs === true) {
 					return modelName || undefined;

packages/vue-language-core/src/index.ts

@@ -9,6 +9,7 @@ export * from './utils/parseSfc';
 
 export * as scriptRanges from './parsers/scriptRanges';
 export * as sharedTypes from './utils/globalTypes';
+export * from './utils/shared';
 export { tsCodegen } from './plugins/vue-tsx';
 
 export * from '@volar/language-core';

packages/vue-language-core/src/languageModule.ts

@@ -115,7 +115,7 @@ export function createVueLanguage(
 }
 
 /**
- * @deprecated planed to remove in 2.0, please use getOrCreateVueLanguage instead of
+ * @deprecated planed to remove in 2.0, please use createVueLanguage instead of
  */
 export function createLanguages(
 	compilerOptions: ts.CompilerOptions = {},

packages/vue-language-core/src/types.ts

@@ -1,8 +1,7 @@
-import type { SFCParseResult } from '@vue/compiler-sfc';
-
 import type * as CompilerDOM from '@vue/compiler-dom';
+import type { SFCParseResult } from '@vue/compiler-sfc';
 import type * as ts from 'typescript/lib/tsserverlibrary';
-import { VueEmbeddedFile } from './sourceFile';
+import type { VueEmbeddedFile } from './sourceFile';
 
 export type { SFCParseResult } from '@vue/compiler-sfc';
 
@@ -23,11 +22,11 @@ export interface VueCompilerOptions {
 	htmlAttributes: string[];
 	optionsWrapper: [string, string] | [];
 	macros: {
-		defineProps: string[],
-		defineSlots: string[],
-		defineEmits: string[],
-		defineExpose: string[],
-		withDefaults: string[],
+		defineProps: string[];
+		defineSlots: string[];
+		defineEmits: string[];
+		defineExpose: string[];
+		withDefaults: string[];
 	};
 	plugins: VueLanguagePlugin[];
 	hooks: string[];
@@ -107,6 +106,6 @@ export interface Sfc {
 }
 
 export interface TextRange {
-	start: number,
-	end: number,
+	start: number;
+	end: number;
 }

packages/vue-language-core/src/utils/shared.ts

@@ -1,3 +1,16 @@
+import { hyphenate } from '@vue/shared';
+
 export function getSlotsPropertyName(vueVersion: number) {
 	return vueVersion < 3 ? '$scopedSlots' : '$slots';
 }
+
+export { hyphenate as hyphenateTag } from '@vue/shared';
+
+export function hyphenateAttr(str: string) {
+	let hyphencase = hyphenate(str);
+	// fix https://github.com/vuejs/core/issues/8811
+	if (str.length && str[0] !== str[0].toLowerCase()) {
+		hyphencase = '-' + hyphencase;
+	}
+	return hyphencase;
+}

packages/vue-language-core/src/utils/ts.ts

@@ -11,10 +11,11 @@ export function createParsedCommandLineByJson(
 	parseConfigHost: ts.ParseConfigHost,
 	rootDir: string,
 	json: any,
+	configFileName = rootDir + '/jsconfig.json'
 ): ParsedCommandLine {
 
 	const proxyHost = proxyParseConfigHostForExtendConfigPaths(parseConfigHost);
-	ts.parseJsonConfigFileContent(json, proxyHost.host, rootDir, {}, rootDir + '/jsconfig.json');
+	ts.parseJsonConfigFileContent(json, proxyHost.host, rootDir, {}, configFileName);
 
 	let vueOptions: Partial<VueCompilerOptions> = {};
 
@@ -32,7 +33,7 @@ export function createParsedCommandLineByJson(
 		proxyHost.host,
 		rootDir,
 		{},
-		rootDir + '/jsconfig.json',
+		configFileName,
 		undefined,
 		(vueOptions.extensions ?? ['.vue']).map(extension => ({
 			extension: extension.slice(1),
@@ -158,7 +159,7 @@ function getPartialVueCompilerOptions(
 	}
 	if (rawOptions.plugins) {
 		const plugins = rawOptions.plugins
-			.map<VueLanguagePlugin | undefined>((pluginPath: string) => {
+			.map<VueLanguagePlugin[] | VueLanguagePlugin>((pluginPath: string) => {
 				try {
 					const resolvedPath = resolvePath(pluginPath);
 					if (resolvedPath) {
@@ -167,9 +168,10 @@ function getPartialVueCompilerOptions(
 				}
 				catch (error) {
 					console.warn('Load plugin failed', pluginPath, error);
+					return [];
 				}
 			})
-			.filter((plugin): plugin is NonNullable<typeof plugin> => !!plugin);
+			.flat(Infinity as 1);
 
 		result.plugins = plugins;
 	}