fix(typescript-plugin): TS not working in template when tsconfig missing (vuejs#4452)

Author: johnsoncodehk

packages/component-meta/lib/base.ts

@@ -161,9 +161,14 @@ export function baseCreate(
 	const vueLanguagePlugin = createVueLanguagePlugin<string>(
 		ts,
 		id => id,
-		ts.sys.useCaseSensitiveFileNames,
 		() => projectHost.getProjectVersion?.() ?? '',
-		() => projectHost.getScriptFileNames(),
+		fileName => {
+			const fileMap = new FileMap(ts.sys.useCaseSensitiveFileNames);
+			for (const vueFileName of projectHost.getScriptFileNames()) {
+				fileMap.set(vueFileName, undefined);
+			}
+			return fileMap.has(fileName);
+		},
 		projectHost.getCompilationSettings(),
 		vueCompilerOptions,
 	);

packages/language-core/lib/languageModule.ts

@@ -53,20 +53,14 @@ function getFileRegistryKey(
 	return JSON.stringify(values);
 }
 
-export interface _Plugin<T> extends LanguagePlugin<T, VueVirtualCode> {
-	getCanonicalFileName: (fileName: string) => string;
-	pluginContext: Parameters<VueLanguagePlugin>[0];
-}
-
 export function createVueLanguagePlugin<T>(
 	ts: typeof import('typescript'),
 	asFileName: (scriptId: T) => string,
-	useCaseSensitiveFileNames: boolean,
 	getProjectVersion: () => string,
-	getScriptFileNames: () => string[] | Set<string>,
+	isRootFile: (fileName: string) => boolean,
 	compilerOptions: ts.CompilerOptions,
-	vueCompilerOptions: VueCompilerOptions,
-): _Plugin<T> {
+	vueCompilerOptions: VueCompilerOptions
+): LanguagePlugin<T, VueVirtualCode> {
 	const pluginContext: Parameters<VueLanguagePlugin>[0] = {
 		modules: {
 			'@vue/compiler-dom': vueCompilerOptions.target < 3
@@ -85,16 +79,10 @@ export function createVueLanguagePlugin<T>(
 	const vueSfcPlugin = useVueFilePlugin(pluginContext);
 	const vitePressSfcPlugin = useMdFilePlugin(pluginContext);
 	const petiteVueSfcPlugin = useHtmlFilePlugin(pluginContext);
-	const getCanonicalFileName = useCaseSensitiveFileNames
-		? (fileName: string) => fileName
-		: (fileName: string) => fileName.toLowerCase();
 
-	let canonicalRootFileNames = new Set<string>();
 	let canonicalRootFileNamesVersion: string | undefined;
 
 	return {
-		getCanonicalFileName,
-		pluginContext,
 		getLanguageId(scriptId) {
 			if (vueCompilerOptions.extensions.some(ext => asFileName(scriptId).endsWith(ext))) {
 				return 'vue';
@@ -109,13 +97,11 @@ export function createVueLanguagePlugin<T>(
 		createVirtualCode(scriptId, languageId, snapshot) {
 			if (languageId === 'vue' || languageId === 'markdown' || languageId === 'html' || languageId === 'typescriptreact-vtx') {
 				const fileName = asFileName(scriptId);
-				const projectVersion = getProjectVersion();
-				if (projectVersion !== canonicalRootFileNamesVersion) {
-					canonicalRootFileNames = new Set([...getScriptFileNames()].map(getCanonicalFileName));
-					canonicalRootFileNamesVersion = projectVersion;
-				}
-				if (!pluginContext.globalTypesHolder && canonicalRootFileNames.has(getCanonicalFileName(fileName))) {
-					pluginContext.globalTypesHolder = fileName;
+				if (!pluginContext.globalTypesHolder && getProjectVersion() !== canonicalRootFileNamesVersion) {
+					canonicalRootFileNamesVersion = getProjectVersion();
+					if (isRootFile(fileName)) {
+						pluginContext.globalTypesHolder = fileName;
+					}
 				}
 				const fileRegistry = getFileRegistry(pluginContext.globalTypesHolder === fileName);
 				const code = fileRegistry.get(fileName);

packages/language-server/node.ts

@@ -9,6 +9,7 @@ import { GetLanguagePlugin, createHybridModeProjectFacade } from './lib/hybridMo
 import { DetectNameCasingRequest, GetConnectedNamedPipeServerRequest, GetConvertAttrCasingEditsRequest, GetConvertTagCasingEditsRequest, ParseSFCRequest } from './lib/protocol';
 import type { VueInitializationOptions } from './lib/types';
 import { createTypeScriptProjectFacade, type LanguagePluginProvider } from '@volar/language-server/lib/project/typescriptProjectFacade';
+import { FileMap } from '@volar/language-core/lib/utils';
 
 
 
@@ -135,11 +136,16 @@ const getLanguagePlugins: GetLanguagePlugin<URI> = async ({ serviceEnv, configFi
 	const vueLanguagePlugin = createVueLanguagePlugin(
 		tsdk.typescript,
 		asFileName,
-		sys?.useCaseSensitiveFileNames ?? false,
 		() => projectHost?.getProjectVersion?.() ?? '',
-		() => projectHost?.getScriptFileNames() ?? [],
+		fileName => {
+			const fileMap = new FileMap(sys?.useCaseSensitiveFileNames ?? false);
+			for (const vueFileName of projectHost?.getScriptFileNames() ?? []) {
+				fileMap.set(vueFileName, undefined);
+			}
+			return fileMap.has(fileName);
+		},
 		commandLine?.options ?? {},
-		vueOptions,
+		vueOptions
 	);
 	if (!hybridMode) {
 		const extensions = [

packages/language-service/tests/utils/createTester.ts

@@ -1,4 +1,4 @@
-import { createLanguage, createLanguageService, createUriMap } from '@volar/language-service';
+import { FileMap, createLanguage, createLanguageService, createUriMap } from '@volar/language-service';
 import { TypeScriptProjectHost, createLanguageServiceHost, resolveFileLanguageId } from '@volar/typescript';
 import * as path from 'path';
 import * as ts from 'typescript';
@@ -27,11 +27,16 @@ function createTester(rootUri: URI) {
 	const vueLanguagePlugin = createVueLanguagePlugin(
 		ts,
 		uriToFileName,
-		ts.sys.useCaseSensitiveFileNames,
 		() => projectHost.getProjectVersion?.() ?? '',
-		() => projectHost.getScriptFileNames(),
+		fileName => {
+			const fileMap = new FileMap(ts.sys.useCaseSensitiveFileNames);
+			for (const vueFileName of projectHost.getScriptFileNames()) {
+				fileMap.set(vueFileName, undefined);
+			}
+			return fileMap.has(fileName);
+		},
 		parsedCommandLine.options,
-		parsedCommandLine.vueOptions,
+		parsedCommandLine.vueOptions
 	);
 	const vueServicePlugins = getVueLanguageServicePlugins(ts, () => parsedCommandLine.vueOptions);
 	const defaultVSCodeSettings: any = {
@@ -60,7 +65,7 @@ function createTester(rootUri: URI) {
 			else {
 				language.scripts.delete(uri);
 			}
-		},
+		}
 	);
 	language.typescript = {
 		configFileName: realTsConfig,

packages/language-service/tests/utils/format.ts

@@ -8,9 +8,8 @@ const resolvedVueOptions = resolveVueCompilerOptions({});
 const vueLanguagePlugin = createVueLanguagePlugin<URI>(
 	ts,
 	() => '',
-	false,
 	() => '',
-	() => [],
+	() => false,
 	{},
 	resolvedVueOptions,
 );

packages/tsc/index.ts

@@ -1,5 +1,6 @@
 import { runTsc } from '@volar/typescript/lib/quickstart/runTsc';
 import * as vue from '@vue/language-core';
+import { FileMap } from '@volar/language-core/lib/utils';
 
 const windowsPathReg = /\\/g;
 
@@ -32,9 +33,14 @@ export function run() {
 				const vueLanguagePlugin = vue.createVueLanguagePlugin<string>(
 					ts,
 					id => id,
-					options.host?.useCaseSensitiveFileNames?.() ?? false,
 					() => '',
-					() => options.rootNames.map(rootName => rootName.replace(windowsPathReg, '/')),
+					fileName => {
+						const fileMap = new FileMap(options.host?.useCaseSensitiveFileNames?.() ?? false);
+						for (const vueFileName of options.rootNames.map(rootName => rootName.replace(windowsPathReg, '/'))) {
+							fileMap.set(vueFileName, undefined);
+						}
+						return fileMap.has(fileName);
+					},
 					options.options,
 					vueOptions,
 				);

packages/tsc/tests/dts.spec.ts

@@ -34,11 +34,16 @@ describe('vue-tsc-dts', () => {
 		const vueLanguagePlugin = vue.createVueLanguagePlugin<string>(
 			ts,
 			id => id,
-			options.host?.useCaseSensitiveFileNames?.() ?? false,
 			() => '',
-			() => options.rootNames.map(rootName => rootName.replace(windowsPathReg, '/')),
+			fileName => {
+				const fileMap = new vue.FileMap(options.host?.useCaseSensitiveFileNames?.() ?? false);
+				for (const vueFileName of options.rootNames.map(rootName => rootName.replace(windowsPathReg, '/'))) {
+					fileMap.set(vueFileName, undefined);
+				}
+				return fileMap.has(fileName);
+			},
 			options.options,
-			vueOptions,
+			vueOptions
 		);
 		return [vueLanguagePlugin];
 	});
@@ -62,7 +67,7 @@ describe('vue-tsc-dts', () => {
 					outputText = text;
 				},
 				undefined,
-				true,
+				true
 			);
 			expect(outputText ? normalizeNewline(outputText) : undefined).toMatchSnapshot();
 		});

packages/typescript-plugin/index.ts

@@ -2,6 +2,7 @@ import { createLanguageServicePlugin, externalFiles } from '@volar/typescript/li
 import * as vue from '@vue/language-core';
 import { decorateLanguageServiceForVue } from './lib/common';
 import { projects, startNamedPipeServer } from './lib/server';
+import { FileMap } from '@volar/language-core/lib/utils';
 
 const windowsPathReg = /\\/g;
 
@@ -11,9 +12,16 @@ const plugin = createLanguageServicePlugin(
 		const languagePlugin = vue.createVueLanguagePlugin<string>(
 			ts,
 			id => id,
-			info.languageServiceHost.useCaseSensitiveFileNames?.() ?? false,
 			() => info.languageServiceHost.getProjectVersion?.() ?? '',
-			() => externalFiles.get(info.project) ?? [],
+			info.project.projectKind === ts.server.ProjectKind.Inferred
+				? () => true
+				: fileName => {
+					const fileMap = new FileMap(info.languageServiceHost.useCaseSensitiveFileNames?.() ?? false);
+					for (const vueFileName of externalFiles.get(info.project) ?? []) {
+						fileMap.set(vueFileName, undefined);
+					}
+					return fileMap.has(fileName);
+				},
 			info.languageServiceHost.getCompilationSettings(),
 			vueOptions
 		);