feat: support inlayHints for optionsWrapper

vuejs · Apr 26, 2023 · 6032059 · 6032059
1 parent dadffc8
commit 6032059
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 29 deletions.
diff --git a/packages/vscode-vue/package.json b/packages/vscode-vue/package.json
@@ -581,6 +581,11 @@
 					"type": "boolean",
 					"default": false,
 					"description": "Show inlay hints for event argument in inline handlers."
+				},
+				"vue.inlayHints.optionsWrapper": {
+					"type": "boolean",
+					"default": true,
+					"description": "Show inlay hints for component options wrapper for type support."
 				}
 			}
 		},

diff --git a/packages/vscode-vue/src/common.ts b/packages/vscode-vue/src/common.ts
@@ -149,10 +149,10 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	}
 	function activateServerMaxOldSpaceSizeChange() {
 		vscode.workspace.onDidChangeConfiguration((e) => {
-			if (e.affectsConfiguration('volar.vueserver')) {
+			if (e.affectsConfiguration('vue.server')) {
 				requestReloadVscode();
 			}
-			if (e.affectsConfiguration('vue.features')) {
+			else if (e.affectsConfiguration('vue')) {
 				vscode.commands.executeCommand('volar.action.restartServer');
 			}
 		});

diff --git a/packages/vscode-vue/src/middleware.ts b/packages/vscode-vue/src/middleware.ts
@@ -8,10 +8,10 @@ export const middleware: lsp.Middleware = {
 	...baseMiddleware,
 	workspace: {
 		configuration(params, token, next) {
-			if (params.items.some(item => item.section === 'vue.features.complete.casing.props' || item.section === 'vue.features.complete.casing.tags')) {
+			if (params.items.some(item => item.section === 'vue.complete.casing.props' || item.section === 'vue.complete.casing.tags')) {
 				return params.items.map(item => {
 					if (item.scopeUri) {
-						if (item.section === 'vue.features.complete.casing.tags') {
+						if (item.section === 'vue.complete.casing.tags') {
 							const tagNameCasing = tagNameCasings.get(item.scopeUri);
 							if (tagNameCasing === TagNameCasing.Kebab) {
 								return 'kebab';
@@ -20,7 +20,7 @@ export const middleware: lsp.Middleware = {
 								return 'pascal';
 							}
 						}
-						if (item.section === 'vue.features.complete.casing.props') {
+						if (item.section === 'vue.complete.casing.props') {
 							const attrCase = attrNameCasings.get(item.scopeUri);
 							if (attrCase === AttrNameCasing.Kebab) {
 								return 'kebab';

diff --git a/packages/vscode-vue/src/nodeClientMain.ts b/packages/vscode-vue/src/nodeClientMain.ts
@@ -60,7 +60,7 @@ export function activate(context: vscode.ExtensionContext) {
 				vscode.window.showInformationMessage('Code Actions is disabled. (You can enable it in .vscode/settings.json)');
 			}
 			else if (result === 'Increase saveTimeLimit') {
-				vscode.commands.executeCommand('workbench.action.openSettings2', { query: 'vue.features.codeActions.savingTimeLimit' });
+				vscode.commands.executeCommand('workbench.action.openSettings2', { query: 'vue.codeActions.savingTimeLimit' });
 			}
 		}
 	});

diff --git a/packages/vue-language-core/src/generators/script.ts b/packages/vue-language-core/src/generators/script.ts
@@ -80,7 +80,7 @@ export function generate(
 		PropsChildren: false,
 	};
 
-	codes.push('/** __vue_virtual_code_placeholder */\n');
+	codes.push('/* __vue_virtual_code_placeholder__ */\n');
 
 	let generatedTemplate = false;
 
@@ -221,10 +221,29 @@ export function generate(
 			if (scriptRanges?.exportDefault) {
 				isExportRawObject = sfc.script.content.substring(scriptRanges.exportDefault.expression.start, scriptRanges.exportDefault.expression.end).startsWith('{');
 			}
-			if (isExportRawObject && vueCompilerOptions.optionsWrapper.length && scriptRanges?.exportDefault) {
+			if (isExportRawObject && vueCompilerOptions.optionsWrapper.length === 2 && scriptRanges?.exportDefault) {
 				addVirtualCode('script', 0, scriptRanges.exportDefault.expression.start);
 				codes.push(vueCompilerOptions.optionsWrapper[0]);
-				addVirtualCode('script', scriptRanges.exportDefault.expression.start, scriptRanges.exportDefault.expression.end);
+				{
+					codes.push(['', 'script', scriptRanges.exportDefault.expression.start, {
+						__hint: {
+							setting: 'vue.inlayHints.optionsWrapper',
+							label: vueCompilerOptions.optionsWrapper[0],
+							tooltip: [
+								'This is virtual code that is automatically wrapped for type support, it does not affect your runtime behavior, you can customize it via `vueCompilerOptions.optionsWrapper` option in tsconfig / jsconfig.',
+								'To hide it, you can set `"vue.inlayHints.optionsWrapper": false` in IDE settings.',
+							].join('\n\n'),
+						}
+					} as any]);
+					addVirtualCode('script', scriptRanges.exportDefault.expression.start, scriptRanges.exportDefault.expression.end);
+					codes.push(['', 'script', scriptRanges.exportDefault.expression.end, {
+						__hint: {
+							setting: 'vue.inlayHints.optionsWrapper',
+							label: vueCompilerOptions.optionsWrapper[1],
+							tooltip: '',
+						}
+					} as any]);
+				}
 				codes.push(vueCompilerOptions.optionsWrapper[1]);
 				addVirtualCode('script', scriptRanges.exportDefault.expression.end, sfc.script.content.length);
 			}

diff --git a/packages/vue-language-core/src/generators/template.ts b/packages/vue-language-core/src/generators/template.ts
@@ -10,7 +10,18 @@ import * as muggle from 'muggle-string';
 
 const capabilitiesPresets = {
 	all: FileRangeCapabilities.full,
-	allWithHiddenParam: { ...FileRangeCapabilities.full, __hiddenParam: true /* TODO */ } as FileRangeCapabilities,
+	allWithHiddenParam: {
+		...FileRangeCapabilities.full, __hint: {
+			setting: 'vue.inlayHints.inlineHandlerLeading',
+			label: '$event =>',
+			tooltip: [
+				'`$event` is a hidden parameter, you can use it in this callback.',
+				'To hide this hint, set `vue.inlayHints.inlineHandlerLeading` to `false` in IDE settings.',
+				'[More info](https://github.com/vuejs/language-tools/issues/2445#issuecomment-1444771420)',
+			].join('\n\n'),
+			paddingRight: true,
+		} /* TODO */
+	} as FileRangeCapabilities,
 	noDiagnostic: { ...FileRangeCapabilities.full, diagnostic: false } satisfies FileRangeCapabilities,
 	diagnosticOnly: { diagnostic: true } satisfies FileRangeCapabilities,
 	tagHover: { hover: true } satisfies FileRangeCapabilities,

diff --git a/packages/vue-language-service/src/ideFeatures/nameCasing.ts b/packages/vue-language-service/src/ideFeatures/nameCasing.ts
@@ -103,8 +103,8 @@ export async function getNameCasing(
 
 	const detected = detect(context, _ts, uri);
 	const [attr, tag] = await Promise.all([
-		context.configurationHost?.getConfiguration<'autoKebab' | 'autoCamel' | 'kebab' | 'camel'>('vue.features.complete.casing.props', uri),
-		context.configurationHost?.getConfiguration<'autoKebab' | 'autoPascal' | 'kebab' | 'pascal'>('vue.features.complete.casing.tags', uri),
+		context.configurationHost?.getConfiguration<'autoKebab' | 'autoCamel' | 'kebab' | 'camel'>('vue.complete.casing.props', uri),
+		context.configurationHost?.getConfiguration<'autoKebab' | 'autoPascal' | 'kebab' | 'pascal'>('vue.complete.casing.tags', uri),
 	]);
 	const tagNameCasing = detected.tag.length === 1 && (tag === 'autoPascal' || tag === 'autoKebab') ? detected.tag[0] : (tag === 'autoKebab' || tag === 'kebab') ? TagNameCasing.Kebab : TagNameCasing.Pascal;
 	const attrNameCasing = detected.attr.length === 1 && (attr === 'autoCamel' || attr === 'autoKebab') ? detected.attr[0] : (attr === 'autoCamel' || attr === 'camel') ? AttrNameCasing.Camel : AttrNameCasing.Kebab;

diff --git a/packages/vue-language-service/src/languageService.ts b/packages/vue-language-service/src/languageService.ts
@@ -124,7 +124,7 @@ function resolvePlugins(
 						&& _context.typescript
 						&& item.textEdit?.newText.endsWith(suffix)
 						&& item.additionalTextEdits?.length === 1 && item.additionalTextEdits[0].newText.indexOf('import ' + item.textEdit.newText + ' from ') >= 0
-						&& (await _context.configurationHost?.getConfiguration<boolean>('vue.features.complete.normalizeComponentImportName') ?? true)
+						&& (await _context.configurationHost?.getConfiguration<boolean>('vue.complete.normalizeComponentImportName') ?? true)
 					) {
 						let newName = item.textEdit.newText.slice(0, -suffix.length);
 						newName = newName[0].toUpperCase() + newName.substring(1);

diff --git a/packages/vue-language-service/src/plugins/vue-autoinsert-dotvalue.ts b/packages/vue-language-service/src/plugins/vue-autoinsert-dotvalue.ts
@@ -21,7 +21,7 @@ const plugin: LanguageServicePlugin = (context) => {
 			if (!isCharacterTyping(document, insertContext))
 				return;
 
-			const enabled = await context.configurationHost?.getConfiguration<boolean>('vue.features.autoInsert.dotValue') ?? true;
+			const enabled = await context.configurationHost?.getConfiguration<boolean>('vue.autoInsert.dotValue') ?? true;
 			if (!enabled)
 				return;
 

diff --git a/packages/vue-language-service/src/plugins/vue-autoinsert-parentheses.ts b/packages/vue-language-service/src/plugins/vue-autoinsert-parentheses.ts
@@ -17,7 +17,7 @@ const plugin: LanguageServicePlugin = (context) => {
 
 		async provideAutoInsertionEdit(document, position, options_2) {
 
-			const enabled = await context.configurationHost?.getConfiguration<boolean>('vue.features.autoInsert.parentheses') ?? false;
+			const enabled = await context.configurationHost?.getConfiguration<boolean>('vue.autoInsert.parentheses') ?? false;
 			if (!enabled)
 				return;
 

diff --git a/packages/vue-language-service/src/plugins/vue-autoinsert-space.ts b/packages/vue-language-service/src/plugins/vue-autoinsert-space.ts
@@ -11,7 +11,7 @@ const plugin: LanguageServicePlugin = (context): LanguageServicePluginInstance =
 
 			if (document.languageId === 'html' || document.languageId === 'jade') {
 
-				const enabled = await context.configurationHost?.getConfiguration<boolean>('vue.features.autoInsert.bracketSpacing') ?? true;
+				const enabled = await context.configurationHost?.getConfiguration<boolean>('vue.autoInsert.bracketSpacing') ?? true;
 				if (!enabled)
 					return;
 

diff --git a/packages/vue-language-service/src/plugins/vue-template.ts b/packages/vue-language-service/src/plugins/vue-template.ts
@@ -105,7 +105,7 @@ export default function useVueTemplateLanguagePlugin<T extends ReturnType<typeof
 				if (!options.isSupportedDocument(document))
 					return;
 
-				const enabled = await _context.configurationHost?.getConfiguration<boolean>('vue.features.inlayHints.missingProps') ?? false;
+				const enabled = await _context.configurationHost?.getConfiguration<boolean>('vue.inlayHints.missingProps') ?? false;
 				if (!enabled)
 					return;
 

diff --git a/packages/vue-language-service/src/plugins/vue-visualize-hidden-callback-param.ts b/packages/vue-language-service/src/plugins/vue-visualize-hidden-callback-param.ts
@@ -10,33 +10,42 @@ const plugin: LanguageServicePlugin = (context) => {
 
 		async provideInlayHints(document, range) {
 
-			const enabled = await context.configurationHost?.getConfiguration<boolean>('vue.features.inlayHints.inlineHandlerLeading') ?? false;
-			if (!enabled)
-				return;
-
+			const settings: Record<string, boolean> = {};
 			const result: vscode.InlayHint[] = [];
 			const [file] = context.documents.getVirtualFileByUri(document.uri);
 			if (file) {
 				const start = document.offsetAt(range.start);
 				const end = document.offsetAt(range.end);
 				for (const mapping of file.mappings) {
+
+					const hint: {
+						setting: string;
+						label: string;
+						tooltip: string;
+						paddingRight?: boolean;
+						paddingLeft?: boolean;
+					} | undefined = (mapping.data as any).__hint;
+
 					if (
 						mapping.generatedRange[0] >= start
 						&& mapping.generatedRange[1] <= end
-						&& (mapping.data as any).__hiddenParam
+						&& hint
 					) {
+
+						settings[hint.setting] ??= await context.configurationHost?.getConfiguration<boolean>(hint.setting) ?? false;
+
+						if (!settings[hint.setting])
+							continue;
+
 						result.push({
-							label: '$event =>',
-							paddingRight: true,
+							label: hint.label,
+							paddingRight: hint.paddingRight,
+							paddingLeft: hint.paddingLeft,
 							position: document.positionAt(mapping.generatedRange[0]),
 							kind: vscode.InlayHintKind.Parameter,
 							tooltip: {
 								kind: 'markdown',
-								value: [
-									'`$event` is a hidden parameter, you can use it in this callback.',
-									'To hide this hint, set `vue.features.inlayHints.inlineHandlerLeading` to `false` in IDE settings.',
-									'[More info](https://github.com/vuejs/language-tools/issues/2445#issuecomment-1444771420)',
-								].join('\n\n'),
+								value: hint.tooltip,
 							},
 						});
 					}