feat: rfc suger support

vuejs/rfcs#222

Author: johnsoncodehk

README.md

@@ -6,8 +6,8 @@ https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
 
 ## Some interesting features:
 
+- [x] RFC #222 support (v0.15.2 added)
 - [x] Scoped CSS services (v0.15.1 added)
-- [x] JS support (v0.15.0 added)
 - [x] Format all scripts command (v0.13.5 added)
 - [x] Verify all scripts command (v0.13.3 added)
 - [x] v-slot Type-Checking (v0.12.1 added)

package.json

@@ -68,14 +68,23 @@
 			{
 				"language": "vue",
 				"scopes": {
-					"template/component": [
+					"componentTag": [
 						"support.class.component.vue"
 					],
-					"template/conditional": [
+					"conditionalDirective": [
 						"keyword.control.conditional.vue"
 					],
-					"template/loop": [
+					"loopDirective": [
 						"keyword.control.loop.vue"
+					],
+					"refLabel": [
+						"keyword.other"
+					],
+					"refVariable": [
+						"markup.underline"
+					],
+					"ref$": [
+						"punctuation.definition.tag"
 					]
 				}
 			}
@@ -111,6 +120,19 @@
 						"user-defined"
 					],
 					"description": "Formatter for <template>, <script>, <style> region"
+				},
+				"volar.scriptSetup.supportRfc": {
+					"type": "string",
+					"default": "#182",
+					"enum": [
+						"#182",
+						"#222"
+					],
+					"enumDescriptions": [
+						"SFC Improvements",
+						"New script setup and ref sugar"
+					],
+					"description": "<script setup> support RFC"
 				}
 			}
 		}

packages/client/src/extension.ts

@@ -125,6 +125,9 @@ function createLanguageService(context: vscode.ExtensionContext, script: string,
 			// Notify the server about file changes to '.clientrc files contained in the workspace
 			fileEvents: vscode.workspace.createFileSystemWatcher('**/.clientrc')
 		},
+		initializationOptions: {
+			scriptSetupRfc: vscode.workspace.getConfiguration().get('volar.scriptSetup.supportRfc'),
+		},
 	};
 
 

packages/server/src/documentServer.ts

@@ -19,7 +19,7 @@ import {
 import { createLanguageServiceHost } from './languageServiceHost';
 import { TextDocuments } from 'vscode-languageserver';
 import { TextDocument } from 'vscode-languageserver-textdocument';
-import { getSemanticTokensLegend } from '@volar/vscode-vue-languageservice';
+import { getSemanticTokensLegend, setScriptSetupRfc } from '@volar/vscode-vue-languageservice';
 import {
 	uriToFsPath,
 	VerifyAllScriptsRequest,
@@ -39,6 +39,7 @@ connection.listen();
 
 function onInitialize(params: InitializeParams) {
 	if (params.rootPath) {
+		setScriptSetupRfc(params.initializationOptions.scriptSetupRfc);
 		initLanguageService(params.rootPath);
 	}
 	const result: InitializeResult = {

packages/server/src/languageServiceHost.ts

@@ -1,6 +1,6 @@
 import * as ts from 'typescript';
 import * as upath from 'upath';
-import { LanguageService, createLanguageService, LanguageServiceHost } from '@volar/vscode-vue-languageservice';
+import { LanguageService, createLanguageService, LanguageServiceHost, setScriptSetupRfc } from '@volar/vscode-vue-languageservice';
 import { uriToFsPath, fsPathToUri, sleep, SemanticTokensChangedNotification } from '@volar/shared';
 import type { TextDocument } from 'vscode-languageserver-textdocument';
 import type { Connection } from 'vscode-languageserver';
@@ -128,6 +128,7 @@ export function createLanguageServiceHost(
 			const realTsConfig = ts.sys.realpath!(tsConfig);
 			const config = ts.readJsonConfigFile(realTsConfig, ts.sys.readFile);
 			const content = ts.parseJsonSourceFileConfigFileContent(config, parseConfigHost, upath.dirname(realTsConfig), {}, upath.basename(realTsConfig));
+			content.options.allowJs = true;
 			return content;
 		}
 		async function onDidChangeContent(document: TextDocument) {

packages/server/src/server.ts

@@ -25,7 +25,7 @@ import {
 	CodeLensRequest,
 } from 'vscode-languageserver';
 import { createLanguageServiceHost } from './languageServiceHost';
-import { Commands, triggerCharacter, SourceMap, TsSourceMap } from '@volar/vscode-vue-languageservice';
+import { Commands, triggerCharacter, SourceMap, TsSourceMap, setScriptSetupRfc } from '@volar/vscode-vue-languageservice';
 import { TextDocuments } from 'vscode-languageserver';
 import { TextDocument } from 'vscode-languageserver-textdocument';
 import {
@@ -58,6 +58,7 @@ connection.listen();
 
 function onInitialize(params: InitializeParams) {
 	if (params.rootPath) {
+		setScriptSetupRfc(params.initializationOptions.scriptSetupRfc);
 		initLanguageService(params.rootPath);
 	}
 
@@ -263,7 +264,12 @@ function onInitialized() {
 		retriggerCharacters: [')'],
 	});
 	connection.client.register(ExecuteCommandRequest.type, {
-		commands: [Commands.HTML_TO_PUG, Commands.PUG_TO_HTML]
+		commands: [
+			Commands.HTML_TO_PUG,
+			Commands.PUG_TO_HTML,
+			Commands.UNUSE_REF_SUGER,
+			Commands.USE_REF_SUGER,
+		]
 	});
 	connection.client.register(CompletionRequest.type, {
 		documentSelector: vueOnly.documentSelector,

packages/shared/src/index.ts

@@ -1,18 +1,20 @@
 export * from './path';
 export * from './requests';
 
+const validScriptSyntaxs = new Set(['js', 'jsx', 'ts', 'tsx']);
+
 export function sleep(ms = 0) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
-export function syntaxToLanguageId(extName: string) {
-    switch (extName) {
+export function syntaxToLanguageId(syntax: string) {
+    switch (syntax) {
         case 'js': return 'javascript';
         case 'ts': return 'typescript';
         case 'jsx': return 'javascriptreact';
         case 'tsx': return 'typescriptreact';
         case 'pug': return 'jade';
     }
-    return extName;
+    return syntax;
 }
 export function languageIdToSyntax(languageId: string) {
     switch (languageId) {
@@ -24,6 +26,12 @@ export function languageIdToSyntax(languageId: string) {
     }
     return languageId;
 }
+export function getValidScriptSyntax(syntax: string) {
+    if (validScriptSyntaxs.has(syntax)) {
+        return syntax;
+    }
+    return 'js';
+}
 export function randomStr() {
     return [...Array(10)].map(i => (~~(Math.random() * 36)).toString(36)).join('');
 }

packages/vscode-typescript-languageservice/src/languageFeatures/diagnostics.ts

@@ -39,7 +39,7 @@ export function register(languageService: ts.LanguageService) {
 					message: typeof diag.messageText === 'string' ? diag.messageText : diag.messageText.messageText,
 				};
 
-				if (diagnostic.source === 'ts' && diagnostic.code === 6133) {
+				if (diagnostic.source === 'ts' && (diagnostic.code === 6133 || diagnostic.code === 7028)) {
 					if (diagnostic.tags === undefined) diagnostic.tags = [];
 					diagnostic.tags.push(DiagnosticTag.Unnecessary);
 				}

packages/vscode-vue-languageservice/src/commands.ts

@@ -1,4 +1,6 @@
 export enum Commands {
 	HTML_TO_PUG = 'volar.html-to-pug',
 	PUG_TO_HTML = 'volar.pug-to-html',
+	USE_REF_SUGER = 'volar.use-ref-suger',
+	UNUSE_REF_SUGER = 'volar.unuse-ref-suger',
 }

packages/vscode-vue-languageservice/src/index.ts

@@ -33,6 +33,7 @@ export type LanguageService = ReturnType<typeof createLanguageService>;
 export { triggerCharacter } from './languageFeatures/completions';
 export * from './utils/sourceMaps';
 export * from './commands';
+export { setScriptSetupRfc } from './virtuals/scriptSetup';
 
 export function getSemanticTokensLegend() {
 	return getSemanticTokens.semanticTokenLegend;