feat: upgrade to Volar 2.3 alpha (#4422)

Author: johnsoncodehk

extensions/vscode/package.json

@@ -244,11 +244,6 @@
 						"vue"
 					]
 				},
-				"vue.server.maxFileSize": {
-					"type": "number",
-					"default": 20971520,
-					"description": "Maximum file size for Vue Language Server to load. (default: 20MB)"
-				},
 				"vue.server.maxOldSpaceSize": {
 					"type": [
 						"number",
@@ -342,11 +337,6 @@
 					"default": "autoKebab",
 					"description": "Preferred attr name case."
 				},
-				"vue.autoInsert.parentheses": {
-					"type": "boolean",
-					"default": true,
-					"description": "Auto-wrap `()` to As Expression in interpolations for fix issue #520."
-				},
 				"vue.autoInsert.dotValue": {
 					"type": "boolean",
 					"default": false,
@@ -517,7 +507,7 @@
 	"devDependencies": {
 		"@types/semver": "^7.5.3",
 		"@types/vscode": "^1.82.0",
-		"@volar/vscode": "~2.2.4",
+		"@volar/vscode": "~2.3.0-alpha.0",
 		"@vue/language-core": "2.0.19",
 		"@vue/language-server": "2.0.19",
 		"@vue/typescript-plugin": "2.0.19",

extensions/vscode/src/common.ts

@@ -240,7 +240,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 
 	if (!enabledHybridMode) {
 		lsp.activateTsConfigStatusItem(selectors, 'vue.tsconfig', client);
-		lsp.activateTsVersionStatusItem(selectors, 'vue.tsversion', context, client, text => 'TS ' + text);
+		lsp.activateTsVersionStatusItem(selectors, 'vue.tsversion', context, text => 'TS ' + text);
 		lsp.activateFindFileReferences('vue.findAllFileReferences', client);
 	}
 
@@ -442,7 +442,6 @@ async function getInitializationOptions(
 ): Promise<VueInitializationOptions> {
 	return {
 		typescript: { tsdk: (await lsp.getTsdk(context)).tsdk },
-		maxFileSize: config.server.maxFileSize,
 		vue: {
 			hybridMode,
 		},

extensions/vscode/src/config.ts

@@ -19,7 +19,6 @@ export const config = {
 		includeLanguages: string[];
 		hybridMode: 'auto' | 'typeScriptPluginOnly' | boolean;
 		maxOldSpaceSize: number;
-		maxFileSize: number;
 	}> {
 		return _config().get('server')!;
 	},

package.json

@@ -22,7 +22,7 @@
 	"devDependencies": {
 		"@lerna-lite/cli": "latest",
 		"@lerna-lite/publish": "latest",
-		"@volar/language-service": "~2.2.4",
+		"@volar/language-service": "~2.3.0-alpha.0",
 		"@volar/tsl-config": "latest",
 		"tsl": "latest",
 		"typescript": "latest",

packages/component-meta/index.ts

@@ -10,7 +10,7 @@ export * from './lib/types';
 export const createComponentMetaCheckerByJsonConfig = createCheckerByJson;
 
 /**
- * @deprecated Use `createCheckerByJson` instead.
+ * @deprecated Use `createChecker` instead.
  */
 export const createComponentMetaChecker = createChecker;
 

packages/component-meta/lib/base.ts

@@ -3,7 +3,7 @@ import type * as ts from 'typescript';
 import * as path from 'path-browserify';
 import { code as typeHelpersCode } from 'vue-component-type-helpers';
 import { code as vue2TypeHelpersCode } from 'vue-component-type-helpers/vue2';
-import { createTypeScriptLanguage } from '@volar/typescript';
+import { TypeScriptProjectHost, createLanguageServiceHost, resolveFileLanguageId } from '@volar/typescript';
 
 import type {
 	MetaCheckerOptions,
@@ -71,9 +71,7 @@ function createCheckerWorker(
 	let projectVersion = 0;
 
 	const scriptSnapshots = new Map<string, ts.IScriptSnapshot>();
-	const projectHost: vue.TypeScriptProjectHost = {
-		...ts.sys,
-		configFileName,
+	const projectHost: TypeScriptProjectHost = {
 		getCurrentDirectory: () => rootPath,
 		getProjectVersion: () => projectVersion.toString(),
 		getCompilationSettings: () => parsedCommandLine.options,
@@ -88,12 +86,10 @@ function createCheckerWorker(
 			}
 			return scriptSnapshots.get(fileName);
 		},
-		scriptIdToFileName: id => id,
-		fileNameToScriptId: id => id,
 	};
 
 	return {
-		...baseCreate(ts, projectHost, parsedCommandLine.vueOptions, checkerOptions, globalComponentName),
+		...baseCreate(ts, configFileName, projectHost, parsedCommandLine.vueOptions, checkerOptions, globalComponentName),
 		updateFile(fileName: string, text: string) {
 			fileName = fileName.replace(windowsPathReg, '/');
 			scriptSnapshots.set(fileName, ts.ScriptSnapshot.fromString(text));
@@ -118,16 +114,17 @@ function createCheckerWorker(
 
 export function baseCreate(
 	ts: typeof import('typescript'),
-	host: vue.TypeScriptProjectHost,
+	configFileName: string | undefined,
+	projectHost: TypeScriptProjectHost,
 	vueCompilerOptions: vue.VueCompilerOptions,
 	checkerOptions: MetaCheckerOptions,
 	globalComponentName: string,
 ) {
 	const globalComponentSnapshot = ts.ScriptSnapshot.fromString('<script setup lang="ts"></script>');
 	const metaSnapshots: Record<string, ts.IScriptSnapshot> = {};
-	const getScriptFileNames = host.getScriptFileNames;
-	const getScriptSnapshot = host.getScriptSnapshot;
-	host.getScriptFileNames = () => {
+	const getScriptFileNames = projectHost.getScriptFileNames;
+	const getScriptSnapshot = projectHost.getScriptSnapshot;
+	projectHost.getScriptFileNames = () => {
 		const names = getScriptFileNames();
 		return [
 			...names,
@@ -136,7 +133,7 @@ export function baseCreate(
 			getMetaFileName(globalComponentName),
 		];
 	};
-	host.getScriptSnapshot = fileName => {
+	projectHost.getScriptSnapshot = fileName => {
 		if (isMetaFileName(fileName)) {
 			if (!metaSnapshots[fileName]) {
 				metaSnapshots[fileName] = ts.ScriptSnapshot.fromString(getMetaScriptContent(fileName));
@@ -151,20 +148,42 @@ export function baseCreate(
 		}
 	};
 
-	const vueLanguagePlugin = vue.createVueLanguagePlugin(
+	const vueLanguagePlugin = vue.createVueLanguagePlugin<string>(
 		ts,
 		id => id,
 		ts.sys.useCaseSensitiveFileNames,
-		() => host.getProjectVersion?.() ?? '',
-		() => host.getScriptFileNames(),
-		host.getCompilationSettings(),
+		() => projectHost.getProjectVersion?.() ?? '',
+		() => projectHost.getScriptFileNames(),
+		projectHost.getCompilationSettings(),
 		vueCompilerOptions,
 	);
-	const language = createTypeScriptLanguage(
-		ts,
-		[vueLanguagePlugin],
-		host,
+	const language = vue.createLanguage(
+		[
+			vueLanguagePlugin,
+			{
+				getLanguageId(fileName) {
+					return resolveFileLanguageId(fileName);
+				},
+			},
+		],
+		new vue.FileMap(ts.sys.useCaseSensitiveFileNames),
+		fileName => {
+			const snapshot = projectHost.getScriptSnapshot(fileName);
+			if (snapshot) {
+				language.scripts.set(fileName, snapshot);
+			}
+			else {
+				language.scripts.delete(fileName);
+			}
+		},
 	);
+	language.typescript = {
+		sys: ts.sys,
+		configFileName,
+		asFileName: s => s,
+		asScriptId: s => s,
+		...createLanguageServiceHost(ts, ts.sys, language, s => s, projectHost),
+	};
 	const { languageServiceHost } = language.typescript!;
 	const tsLs = ts.createLanguageService(languageServiceHost);
 
@@ -311,7 +330,7 @@ ${vueCompilerOptions.target < 3 ? vue2TypeHelpersCode : typeHelpersCode}
 
 			// fill defaults
 			const printer = ts.createPrinter(checkerOptions.printer);
-			const snapshot = host.getScriptSnapshot(componentPath)!;
+			const snapshot = projectHost.getScriptSnapshot(componentPath)!;
 
 			const vueFile = language.scripts.get(componentPath)?.generated?.root;
 			const vueDefaults = vueFile && exportName === 'default'
@@ -460,7 +479,7 @@ function createSchemaResolvers(
 	symbolNode: ts.Expression,
 	{ rawType, schema: options, noDeclarations }: MetaCheckerOptions,
 	ts: typeof import('typescript'),
-	language: vue.Language,
+	language: vue.Language<string>,
 ) {
 	const visited = new Set<ts.Type>();
 

packages/component-meta/lib/types.ts

@@ -1,6 +1,6 @@
 import type * as ts from 'typescript';
 
-export type ComponentMetaChecker = ReturnType<typeof import('./base')['baseCreate']>;
+export type ComponentMetaChecker = ReturnType<typeof import('./base')['createCheckerBase']>;
 
 export interface Declaration {
 	file: string;

packages/component-meta/package.json

@@ -12,7 +12,7 @@
 		"directory": "packages/component-meta"
 	},
 	"dependencies": {
-		"@volar/typescript": "~2.2.4",
+		"@volar/typescript": "~2.3.0-alpha.0",
 		"@vue/language-core": "2.0.19",
 		"path-browserify": "^1.0.1",
 		"vue-component-type-helpers": "2.0.19"

packages/component-meta/tests/index.spec.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 import { describe, expect, test } from 'vitest';
-import { createComponentMetaChecker, createComponentMetaCheckerByJsonConfig, MetaCheckerOptions, ComponentMetaChecker, TypeMeta } from '..';
+import { createChecker, createCheckerByJson, MetaCheckerOptions, ComponentMetaChecker, TypeMeta } from '..';
 
 const worker = (checker: ComponentMetaChecker, withTsconfig: boolean) => describe(`vue-component-meta ${withTsconfig ? 'with tsconfig' : 'without tsconfig'}`, () => {
 
@@ -856,11 +856,11 @@ const checkerOptions: MetaCheckerOptions = {
 	schema: { ignore: ['MyIgnoredNestedProps'] },
 	printer: { newLine: 1 },
 };
-const tsconfigChecker = createComponentMetaChecker(
+const tsconfigChecker = createChecker(
 	path.resolve(__dirname, '../../../test-workspace/component-meta/tsconfig.json'),
 	checkerOptions,
 );
-const noTsConfigChecker = createComponentMetaCheckerByJsonConfig(
+const noTsConfigChecker = createCheckerByJson(
 	path.resolve(__dirname, '../../../test-workspace/component-meta'),
 	{
 		"extends": "../tsconfig.json",

packages/language-core/lib/languageModule.ts

@@ -51,20 +51,20 @@ function getFileRegistryKey(
 	return JSON.stringify(values);
 }
 
-export interface _Plugin extends LanguagePlugin<VueVirtualCode> {
+export interface _Plugin<T> extends LanguagePlugin<T, VueVirtualCode> {
 	getCanonicalFileName: (fileName: string) => string;
 	pluginContext: Parameters<VueLanguagePlugin>[0];
 }
 
-export function createVueLanguagePlugin(
+export function createVueLanguagePlugin<T>(
 	ts: typeof import('typescript'),
-	getFileName: (scriptId: string) => string,
+	asFileName: (scriptId: T) => string,
 	useCaseSensitiveFileNames: boolean,
 	getProjectVersion: () => string,
 	getScriptFileNames: () => string[] | Set<string>,
 	compilerOptions: ts.CompilerOptions,
 	vueCompilerOptions: VueCompilerOptions,
-): _Plugin {
+): _Plugin<T> {
 	const pluginContext: Parameters<VueLanguagePlugin>[0] = {
 		modules: {
 			'@vue/compiler-dom': vueCompilerOptions.target < 3
@@ -94,19 +94,19 @@ export function createVueLanguagePlugin(
 		getCanonicalFileName,
 		pluginContext,
 		getLanguageId(scriptId) {
-			if (vueCompilerOptions.extensions.some(ext => scriptId.endsWith(ext))) {
+			if (vueCompilerOptions.extensions.some(ext => asFileName(scriptId).endsWith(ext))) {
 				return 'vue';
 			}
-			if (vueCompilerOptions.vitePressExtensions.some(ext => scriptId.endsWith(ext))) {
+			if (vueCompilerOptions.vitePressExtensions.some(ext => asFileName(scriptId).endsWith(ext))) {
 				return 'markdown';
 			}
-			if (vueCompilerOptions.petiteVueExtensions.some(ext => scriptId.endsWith(ext))) {
+			if (vueCompilerOptions.petiteVueExtensions.some(ext => asFileName(scriptId).endsWith(ext))) {
 				return 'html';
 			}
 		},
 		createVirtualCode(scriptId, languageId, snapshot) {
 			if (languageId === 'vue' || languageId === 'markdown' || languageId === 'html') {
-				const fileName = getFileName(scriptId);
+				const fileName = asFileName(scriptId);
 				const projectVersion = getProjectVersion();
 				if (projectVersion !== canonicalRootFileNamesVersion) {
 					canonicalRootFileNames = new Set([...getScriptFileNames()].map(getCanonicalFileName));
@@ -116,7 +116,7 @@ export function createVueLanguagePlugin(
 					pluginContext.globalTypesHolder = fileName;
 				}
 				const fileRegistry = getFileRegistry(pluginContext.globalTypesHolder === fileName);
-				const code = fileRegistry.get(scriptId);
+				const code = fileRegistry.get(fileName);
 				if (code) {
 					code.update(snapshot);
 					return code;
@@ -134,7 +134,7 @@ export function createVueLanguagePlugin(
 								: [vueSfcPlugin, ...basePlugins],
 						ts,
 					);
-					fileRegistry.set(scriptId, code);
+					fileRegistry.set(fileName, code);
 					return code;
 				}
 			}