feat(typescript-plugin): create script setup block when auto import if needed

Author: johnsoncodehk

packages/language-core/lib/types.ts

@@ -123,19 +123,6 @@ export interface Sfc {
 	customBlocks: readonly (SfcBlock & {
 		type: string;
 	})[];
-
-	/**
-	 * @deprecated use `template.ast` instead
-	 */
-	templateAst: CompilerDOM.RootNode | undefined;
-	/**
-	 * @deprecated use `script.ast` instead
-	 */
-	scriptAst: ts.SourceFile | undefined;
-	/**
-	 * @deprecated use `scriptSetup.ast` instead
-	 */
-	scriptSetupAst: ts.SourceFile | undefined;
 }
 
 export interface TextRange {

packages/language-core/lib/virtualFile/computedSfc.ts

@@ -126,9 +126,6 @@ export function computedSfc(
 		get scriptSetup() { return scriptSetup(); },
 		get styles() { return styles; },
 		get customBlocks() { return customBlocks; },
-		get templateAst() { return template()?.ast; },
-		get scriptAst() { return script()?.ast; },
-		get scriptSetupAst() { return scriptSetup()?.ast; },
 	};
 
 	function computedTemplateAst(base: SfcBlock) {

packages/language-service/index.ts

@@ -55,7 +55,7 @@ export function getVueLanguageServicePlugins(
 						}
 						const languageService = (created.provide as import('volar-service-typescript').Provide)['typescript/languageService']();
 						const vueOptions = getVueOptions(context.env);
-						decorateLanguageServiceForVue(context.language, languageService, vueOptions, ts, false);
+						decorateLanguageServiceForVue(context.language, languageService, vueOptions, ts, false, fileName => context.env.typescript!.fileNameToUri(fileName));
 						return created;
 					},
 				};

packages/typescript-plugin/index.ts

@@ -64,7 +64,7 @@ function createLanguageServicePlugin(): ts.server.PluginModuleFactory {
 					projects.set(info.project, { info, language, vueOptions });
 
 					decorateLanguageService(language, info.languageService);
-					decorateLanguageServiceForVue(language, info.languageService, vueOptions, ts, true);
+					decorateLanguageServiceForVue(language, info.languageService, vueOptions, ts, true, fileName => fileName);
 					decorateLanguageServiceHost(ts, language, info.languageServiceHost);
 					startNamedPipeServer(ts, info.project.projectKind, info.project.getCurrentDirectory());
 

packages/typescript-plugin/lib/common.ts

@@ -9,6 +9,7 @@ export function decorateLanguageServiceForVue(
 	vueOptions: vue.VueCompilerOptions,
 	ts: typeof import('typescript'),
 	isTsPlugin: boolean,
+	getScriptId: (fileName: string) => string,
 ) {
 	const {
 		getCompletionsAtPosition,
@@ -49,6 +50,12 @@ export function decorateLanguageServiceForVue(
 							break;
 						}
 					}
+					if (item.data) {
+						// @ts-expect-error
+						item.data.__isAutoImport = {
+							fileName,
+						};
+					}
 				}
 			}
 		}
@@ -69,6 +76,27 @@ export function decorateLanguageServiceForVue(
 				}
 			}
 		}
+		// @ts-expect-error
+		if (args[6]?.__isAutoImport) {
+			// @ts-expect-error
+			const { fileName } = args[6]?.__isAutoImport;
+			const sourceScript = language.scripts.get(getScriptId(fileName));
+			if (sourceScript?.generated?.root instanceof vue.VueVirtualCode) {
+				const sfc = sourceScript.generated.root.getVueSfc();
+				if (!sfc?.descriptor.script && !sfc?.descriptor.scriptSetup) {
+					for (const codeAction of details?.codeActions ?? []) {
+						for (const change of codeAction.changes) {
+							for (const textChange of change.textChanges) {
+								textChange.newText = `<script setup lang="ts">${textChange.newText}</script>\n\n`;
+								break;
+							}
+							break;
+						}
+						break;
+					}
+				}
+			}
+		}
 		return details;
 	};
 	languageService.getCodeFixesAtPosition = (...args) => {
@@ -80,7 +108,7 @@ export function decorateLanguageServiceForVue(
 	if (isTsPlugin) {
 		languageService.getEncodedSemanticClassifications = (fileName, span, format) => {
 			const result = getEncodedSemanticClassifications(fileName, span, format);
-			const file = language.scripts.get(fileName);
+			const file = language.scripts.get(getScriptId(fileName));
 			if (file?.generated?.root instanceof vue.VueVirtualCode) {
 				const { template } = file.generated.root.sfc;
 				if (template) {