fix(language-service): re-implement twoslash queries in script

Author: KazariEX

packages/language-service/index.ts

@@ -4,21 +4,18 @@ export * from '@volar/language-service';
 // for @vue/language-server usage
 export * from '@volar/language-service/lib/utils/featureWorkers';
 
-import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
 import type { VueCompilerOptions } from '@vue/language-core';
 import type * as ts from 'typescript';
 
 import { create as createEmmetPlugin } from 'volar-service-emmet';
 import { create as createJsonPlugin } from 'volar-service-json';
 import { create as createPugFormatPlugin } from 'volar-service-pug-beautify';
-import { create as createTypeScriptTwoslashQueriesPlugin } from 'volar-service-typescript-twoslash-queries';
 import { create as createTypeScriptDocCommentTemplatePlugin } from 'volar-service-typescript/lib/plugins/docCommentTemplate';
 import { create as createTypeScriptSyntacticPlugin } from 'volar-service-typescript/lib/plugins/syntactic';
 import { create as createCssPlugin } from './lib/plugins/css';
 import { create as createVueAutoDotValuePlugin } from './lib/plugins/vue-autoinsert-dotvalue';
 import { create as createVueAutoAddSpacePlugin } from './lib/plugins/vue-autoinsert-space';
 import { create as createVueCompilerDomErrorsPlugin } from './lib/plugins/vue-compiler-dom-errors';
-import { create as createVueCompleteDefineAssignmentPlugin } from './lib/plugins/vue-complete-define-assignment';
 import { create as createVueDirectiveCommentsPlugin } from './lib/plugins/vue-directive-comments';
 import { create as createVueDocumentDropPlugin } from './lib/plugins/vue-document-drop';
 import { create as createVueDocumentHighlightsPlugin } from './lib/plugins/vue-document-highlights';
@@ -28,6 +25,7 @@ import { create as createVueGlobalTypesErrorPlugin } from './lib/plugins/vue-glo
 import { create as createVueInlayHintsPlugin } from './lib/plugins/vue-inlayhints';
 import { create as createVueMissingPropsHintsPlugin } from './lib/plugins/vue-missing-props-hints';
 import { create as createVueSfcPlugin } from './lib/plugins/vue-sfc';
+import { create as createVueSuggestDefineAssignmentPlugin } from './lib/plugins/vue-suggest-define-assignment';
 import { create as createVueTemplatePlugin } from './lib/plugins/vue-template';
 import { create as createVueTwoslashQueriesPlugin } from './lib/plugins/vue-twoslash-queries';
 
@@ -47,52 +45,41 @@ export function createVueLanguageServicePlugins(
 		}
 		| undefined,
 ) {
+	const getTsPluginClient = () => tsPluginClient;
 	const plugins = [
-		createTypeScriptSyntacticPlugin(ts),
-		createTypeScriptDocCommentTemplatePlugin(ts),
-		...getCommonLanguageServicePlugins(ts, () => tsPluginClient),
-	];
-	if (tsPluginClient) {
-		plugins.push(createVueDocumentHighlightsPlugin(tsPluginClient.getDocumentHighlights));
-	}
-	for (const plugin of plugins) {
-		// avoid affecting TS plugin
-		delete plugin.capabilities.semanticTokensProvider;
-	}
-	return plugins;
-}
-
-function getCommonLanguageServicePlugins(
-	ts: typeof import('typescript'),
-	getTsPluginClient: (
-		context: LanguageServiceContext,
-	) => import('@vue/typescript-plugin/lib/requests').Requests | undefined,
-): LanguageServicePlugin[] {
-	return [
-		createTypeScriptTwoslashQueriesPlugin(ts),
 		createCssPlugin(),
-		createPugFormatPlugin(),
 		createJsonPlugin(),
-		createVueTemplatePlugin('html', getTsPluginClient),
-		createVueTemplatePlugin('pug', getTsPluginClient),
-		createVueMissingPropsHintsPlugin(getTsPluginClient),
+		createPugFormatPlugin(),
+		createTypeScriptDocCommentTemplatePlugin(ts),
+		createTypeScriptSyntacticPlugin(ts),
+		createVueAutoAddSpacePlugin(),
+		createVueAutoDotValuePlugin(ts, getTsPluginClient),
 		createVueCompilerDomErrorsPlugin(),
-		createVueSfcPlugin(),
-		createVueTwoslashQueriesPlugin(getTsPluginClient),
 		createVueDocumentDropPlugin(ts, getTsPluginClient),
 		createVueDocumentLinksPlugin(),
-		createVueCompleteDefineAssignmentPlugin(),
-		createVueAutoDotValuePlugin(ts, getTsPluginClient),
-		createVueAutoAddSpacePlugin(),
-		createVueInlayHintsPlugin(ts),
 		createVueDirectiveCommentsPlugin(),
 		createVueExtractFilePlugin(ts, getTsPluginClient),
 		createVueGlobalTypesErrorPlugin(),
+		createVueInlayHintsPlugin(ts),
+		createVueMissingPropsHintsPlugin(getTsPluginClient),
+		createVueSfcPlugin(),
+		createVueSuggestDefineAssignmentPlugin(),
+		createVueTemplatePlugin('html', getTsPluginClient),
+		createVueTemplatePlugin('pug', getTsPluginClient),
+		createVueTwoslashQueriesPlugin(getTsPluginClient),
 		createEmmetPlugin({
 			mappedLanguages: {
 				'vue-root-tags': 'html',
 				'postcss': 'scss',
 			},
 		}),
 	];
+	if (tsPluginClient) {
+		plugins.push(createVueDocumentHighlightsPlugin(tsPluginClient.getDocumentHighlights));
+	}
+	for (const plugin of plugins) {
+		// avoid affecting TS plugin
+		delete plugin.capabilities.semanticTokensProvider;
+	}
+	return plugins;
 }

packages/language-service/lib/plugins/vue-complete-define-assignment.ts renamed to packages/language-service/lib/plugins/vue-suggest-define-assignment.ts

@@ -5,7 +5,7 @@ import { isTsDocument } from './utils';
 
 export function create(): LanguageServicePlugin {
 	return {
-		name: 'vue-complete-define-assignment',
+		name: 'vue-suggest-define-assignment',
 		capabilities: {
 			completionProvider: {},
 		},

packages/language-service/lib/plugins/vue-twoslash-queries.ts

@@ -2,7 +2,8 @@ import type { InlayHint, LanguageServiceContext, LanguageServicePlugin, Position
 import { VueVirtualCode } from '@vue/language-core';
 import { URI } from 'vscode-uri';
 
-const twoslashReg = /<!--\s*\^\?\s*-->/g;
+const twoslashTemplateReg = /<!--\s*\^\?\s*-->/g;
+const twoslashScriptReg = /(?<=^|\n)\s*\/\/\s*\^\?/g;
 
 export function create(
 	getTsPluginClient?: (
@@ -22,7 +23,10 @@ export function create(
 					const decoded = context.decodeEmbeddedDocumentUri(uri);
 					const sourceScript = decoded && context.language.scripts.get(decoded[0]);
 					const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
-					if (!sourceScript?.generated || virtualCode?.id !== 'template') {
+					if (
+						!sourceScript?.generated
+						|| (virtualCode?.id !== 'template' && !virtualCode?.id.startsWith('script_'))
+					) {
 						return;
 					}
 
@@ -34,6 +38,7 @@ export function create(
 					const hoverOffsets: [Position, number][] = [];
 					const inlayHints: InlayHint[] = [];
 
+					const twoslashReg = virtualCode.id === 'template' ? twoslashTemplateReg : twoslashScriptReg;
 					for (const pointer of document.getText(range).matchAll(twoslashReg)) {
 						const offset = pointer.index + pointer[0].indexOf('^?') + document.offsetAt(range.start);
 						const position = document.positionAt(offset);

packages/language-service/package.json

@@ -28,7 +28,6 @@
 		"volar-service-pug": "0.0.64",
 		"volar-service-pug-beautify": "0.0.64",
 		"volar-service-typescript": "0.0.64",
-		"volar-service-typescript-twoslash-queries": "0.0.64",
 		"vscode-html-languageservice": "^5.2.0",
 		"vscode-uri": "^3.0.8"
 	},