feat(language-service): auto insert const props = with props completion

Author: KazariEX

packages/language-core/lib/parsers/scriptSetupRanges.ts

@@ -27,7 +27,9 @@ export function parseScriptSetupRanges(
 	const slots: {
 		name?: string;
 		isObjectBindingPattern?: boolean;
-		define?: ReturnType<typeof parseDefineFunction>;
+		define?: ReturnType<typeof parseDefineFunction> & {
+			statement: TextRange;
+		};
 	} = {};
 	const emits: {
 		name?: string;
@@ -281,7 +283,10 @@ export function parseScriptSetupRanges(
 				});
 			}
 			else if (vueCompilerOptions.macros.defineSlots.includes(callText)) {
-				slots.define = parseDefineFunction(node);
+				slots.define = {
+					...parseDefineFunction(node),
+					statement: getStatementRange(ts, parents, node, ast)
+				};
 				if (ts.isVariableDeclaration(parent)) {
 					if (ts.isIdentifier(parent.name)) {
 						slots.name = getNodeText(ts, parent.name, ast);

packages/language-server/tests/completions.spec.ts

@@ -456,6 +456,20 @@ describe('Completions', async () => {
 		`);
 	});
 
+	// FIXME:
+	it.skip('Auto insert defines', async () => {
+		expect(
+			(await requestCompletionItem('tsconfigProject/fixture.vue', 'vue', `
+				<script lang="ts" setup>
+				defineProps<{
+					foo: string;
+				}>();
+				props|
+				</script>
+			`, 'props'))
+		).toMatchInlineSnapshot(``)
+	});
+
 	const openedDocuments: TextDocument[] = [];
 
 	afterEach(async () => {

packages/language-service/index.ts

@@ -16,6 +16,7 @@ import { create as createTypeScriptTwoslashQueriesPlugin } from 'volar-service-t
 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 createVueAutoDefinesPlugin } from './lib/plugins/vue-autoinsert-defines';
 import { create as createVueAutoDotValuePlugin } from './lib/plugins/vue-autoinsert-dotvalue';
 import { create as createVueAutoAddSpacePlugin } from './lib/plugins/vue-autoinsert-space';
 import { create as createVueDirectiveCommentsPlugin } from './lib/plugins/vue-directive-comments';
@@ -197,6 +198,7 @@ function getCommonLanguageServicePlugins(
 		createVueTwoslashQueriesPlugin(getTsPluginClient),
 		createVueDocumentLinksPlugin(),
 		createVueDocumentDropPlugin(ts, getTsPluginClient),
+		createVueAutoDefinesPlugin(),
 		createVueAutoDotValuePlugin(ts, getTsPluginClient),
 		createVueAutoAddSpacePlugin(),
 		createVueInlayHintsPlugin(ts),

packages/language-service/lib/plugins/vue-autoinsert-defines.ts

@@ -0,0 +1,93 @@
+import type { LanguageServicePlugin, LanguageServicePluginInstance } from '@volar/language-service';
+import * as vscode from 'vscode-languageserver-protocol';
+import { URI } from 'vscode-uri';
+import { TextRange, tsCodegen, VueVirtualCode } from '@vue/language-core';
+import { isTsDocument } from './vue-autoinsert-dotvalue';
+
+export function create(): LanguageServicePlugin {
+	return {
+		name: 'vue-autoinsert-defines',
+		capabilities: {
+			completionProvider: {
+				triggerCharacters: ['\\w']
+			}
+		},
+		create(context): LanguageServicePluginInstance {
+			return {
+				async provideCompletionItems(document) {
+					if (!isTsDocument(document)) {
+						return;
+					}
+
+					const uri = URI.parse(document.uri);
+					const result: vscode.CompletionItem[] = [];
+					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 || !virtualCode) {
+						return;
+					}
+
+					const root = sourceScript?.generated?.root;
+					if (!(root instanceof VueVirtualCode)) {
+						return;
+					}
+
+					const codegen = tsCodegen.get(root._sfc);
+					const scriptSetup = root._sfc.scriptSetup;
+					const scriptSetupRanges = codegen?.scriptSetupRanges.get();
+					if (!scriptSetup || !scriptSetupRanges) {
+						return;
+					}
+
+					const mappings = [...context.language.maps.forEach(virtualCode)];
+
+					addDefineCompletionItem(scriptSetupRanges.props.define, 'props');
+					addDefineCompletionItem(scriptSetupRanges.emits.define, 'emit');
+					addDefineCompletionItem(scriptSetupRanges.slots.define, 'slots');
+
+					return {
+						isIncomplete: false,
+						items: result
+					};
+
+					function addDefineCompletionItem(
+						define: {
+							exp: TextRange,
+							statement: TextRange
+						} | undefined,
+						name: string
+					) {
+						if (!define || define.exp.start !== define.statement?.start) {
+							return;
+						}
+
+						let offset;
+						for (const [, map] of mappings) {
+							for (const [generatedOffset] of map.toGeneratedLocation(scriptSetup!.startTagEnd + define.exp.start)) {
+								offset = generatedOffset;
+								break;
+							}
+						}
+						if (offset === undefined) {
+							return;
+						}
+
+						const pos = document.positionAt(offset);
+						result.push({
+							label: name,
+							kind: vscode.CompletionItemKind.Variable,
+							additionalTextEdits: [{
+								newText: `const ${name} = `,
+								range: {
+									start: pos,
+									end: pos
+								}
+							}]
+						});
+					}
+				},
+			};
+		},
+	};
+}

packages/language-service/lib/plugins/vue-autoinsert-dotvalue.ts

@@ -113,7 +113,7 @@ function sleep(ms: number) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-function isTsDocument(document: TextDocument) {
+export function isTsDocument(document: TextDocument) {
 	return document.languageId === 'javascript' ||
 		document.languageId === 'typescript' ||
 		document.languageId === 'javascriptreact' ||