feat: VitePress support (#1399)

vuejs · Jun 6, 2022 · 33c9c1c · 33c9c1c
1 parent 1630f5a
commit 33c9c1c
Show file tree

Hide file tree

Showing 33 changed files with 775 additions and 220 deletions.
diff --git a/extensions/vscode-vue-language-features/languages/markdown-language-configuration.json b/extensions/vscode-vue-language-features/languages/markdown-language-configuration.json
@@ -0,0 +1,55 @@
+{
+	"autoClosingPairs": [
+		// html
+		{
+			"open": "{",
+			"close": "}"
+		},
+		{
+			"open": "[",
+			"close": "]"
+		},
+		{
+			"open": "(",
+			"close": ")"
+		},
+		{
+			"open": "'",
+			"close": "'"
+		},
+		{
+			"open": "\"",
+			"close": "\""
+		},
+		{
+			"open": "<!--",
+			"close": "-->",
+			"notIn": [
+				"comment",
+				"string"
+			]
+		},
+		// javascript
+		{
+			"open": "`",
+			"close": "`",
+			"notIn": [
+				"string",
+				"comment"
+			]
+		},
+		{
+			"open": "/**",
+			"close": " */",
+			"notIn": [
+				"string"
+			]
+		}
+	],
+	"colorizedBracketPairs": [
+		[
+			"{{",
+			"}}"
+		],
+	]
+}
diff --git a/extensions/vscode-vue-language-features/package.json b/extensions/vscode-vue-language-features/package.json
@@ -25,6 +25,7 @@
 	],
 	"activationEvents": [
 		"onLanguage:vue",
+		"onLanguage:markdown",
 		"onLanguage:javascript",
 		"onLanguage:typescript",
 		"onLanguage:javascriptreact",
@@ -45,6 +46,11 @@
 		}
 	},
 	"contributes": {
+		"configurationDefaults": {
+			"[markdown]": {
+				"editor.quickSuggestions": true
+			}
+		},
 		"jsonValidation": [
 			{
 				"fileMatch": "tsconfig.json",
@@ -119,6 +125,10 @@
 				],
 				"configuration": "./languages/vue-language-configuration.json"
 			},
+			{
+				"id": "markdown",
+				"configuration": "./languages/markdown-language-configuration.json"
+			},
 			{
 				"id": "html",
 				"configuration": "./languages/sfc-template-language-configuration.json"
@@ -450,6 +460,38 @@
 						"support.class.component.vue"
 					]
 				}
+			},
+			{
+				"language": "markdown",
+				"scopes": {
+					"property": [
+						"variable.other.property.vue"
+					],
+					"property.readonly": [
+						"variable.other.constant.property.vue"
+					],
+					"variable": [
+						"variable.other.readwrite.vue"
+					],
+					"variable.readonly": [
+						"variable.other.constant.object.vue"
+					],
+					"function": [
+						"entity.name.function.vue"
+					],
+					"namespace": [
+						"entity.name.type.module.vue"
+					],
+					"variable.defaultLibrary": [
+						"support.variable.vue"
+					],
+					"function.defaultLibrary": [
+						"support.function.vue"
+					],
+					"componentTag": [
+						"support.class.component.vue"
+					]
+				}
 			}
 		],
 		"commands": [

diff --git a/extensions/vscode-vue-language-features/src/browserClientMain.ts b/extensions/vscode-vue-language-features/src/browserClientMain.ts
@@ -17,7 +17,7 @@ export function activate(context: vscode.ExtensionContext) {
 			initializationOptions: initOptions,
 			progressOnInitialization: true,
 			synchronize: {
-				fileEvents: vscode.workspace.createFileSystemWatcher('{**/*.vue,**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.json}')
+				fileEvents: vscode.workspace.createFileSystemWatcher('{**/*.vue,**/*.md,**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.json}')
 			}
 		};
 		const client = new lsp.LanguageClient(

diff --git a/extensions/vscode-vue-language-features/src/common.ts b/extensions/vscode-vue-language-features/src/common.ts
@@ -45,7 +45,7 @@ export async function activate(context: vscode.ExtensionContext, createLc: Creat
 		}
 
 		const currentlangId = vscode.window.activeTextEditor.document.languageId;
-		if (currentlangId === 'vue') {
+		if (currentlangId === 'vue' || currentlangId === 'markdown') {
 			doActivate(context, createLc);
 			stopCheck.dispose();
 		}
@@ -66,23 +66,27 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	const languageFeaturesDocumentSelector: lsp.DocumentSelector = takeOverMode ?
 		[
 			{ scheme: 'file', language: 'vue' },
+			{ scheme: 'file', language: 'markdown' },
 			{ scheme: 'file', language: 'javascript' },
 			{ scheme: 'file', language: 'typescript' },
 			{ scheme: 'file', language: 'javascriptreact' },
 			{ scheme: 'file', language: 'typescriptreact' },
 			{ scheme: 'file', language: 'json' },
 		] : [
 			{ scheme: 'file', language: 'vue' },
+			{ scheme: 'file', language: 'markdown' },
 		];
 	const documentFeaturesDocumentSelector: lsp.DocumentSelector = takeOverMode ?
 		[
 			{ language: 'vue' },
+			{ language: 'markdown' },
 			{ language: 'javascript' },
 			{ language: 'typescript' },
 			{ language: 'javascriptreact' },
 			{ language: 'typescriptreact' },
 		] : [
 			{ language: 'vue' },
+			{ language: 'markdown' },
 		];
 	const _useSecondServer = useSecondServer();
 	const _serverMaxOldSpaceSize = serverMaxOldSpaceSize();

diff --git a/extensions/vscode-vue-language-features/src/features/attrNameCase.ts b/extensions/vscode-vue-language-features/src/features/attrNameCase.ts
@@ -67,7 +67,7 @@ export async function activate(context: vscode.ExtensionContext, languageClient:
 	};
 
 	async function onChangeDocument(newDoc: vscode.TextDocument | undefined) {
-		if (newDoc?.languageId === 'vue') {
+		if (newDoc?.languageId === 'vue' || newDoc?.languageId === 'markdown') {
 			let attrCase = attrCases.uriGet(newDoc.uri.toString());
 			if (!attrCase) {
 				const attrMode = vscode.workspace.getConfiguration('volar').get<'auto-kebab' | 'auto-camel' | 'kebab' | 'camel'>('completion.preferredAttrNameCase');

diff --git a/extensions/vscode-vue-language-features/src/features/autoInsertion.ts b/extensions/vscode-vue-language-features/src/features/autoInsertion.ts
@@ -6,6 +6,7 @@ export async function activate(context: vscode.ExtensionContext, htmlClient: Bas
 
 	const supportedLanguages: Record<string, boolean> = {
 		vue: true,
+		markdown: true,
 		javascript: true,
 		typescript: true,
 		javascriptreact: true,

diff --git a/extensions/vscode-vue-language-features/src/features/tagNameCase.ts b/extensions/vscode-vue-language-features/src/features/tagNameCase.ts
@@ -97,7 +97,7 @@ export async function activate(context: vscode.ExtensionContext, languageClient:
 	};
 
 	async function onChangeDocument(newDoc: vscode.TextDocument | undefined) {
-		if (newDoc?.languageId === 'vue') {
+		if (newDoc?.languageId === 'vue' || newDoc?.languageId === 'markdown') {
 			let tagCase = tagCases.uriGet(newDoc.uri.toString());
 			if (!tagCase) {
 				const tagMode = vscode.workspace.getConfiguration('volar').get<'auto' | 'both' | 'kebab' | 'pascal'>('completion.preferredTagNameCase');

diff --git a/extensions/vscode-vue-language-features/src/features/tsVersion.ts b/extensions/vscode-vue-language-features/src/features/tsVersion.ts
@@ -87,6 +87,7 @@ export async function activate(context: vscode.ExtensionContext, clients: BaseLa
 	function updateStatusBar() {
 		if (
 			vscode.window.activeTextEditor?.document.languageId !== 'vue'
+			&& vscode.window.activeTextEditor?.document.languageId !== 'markdown'
 			&& !(
 				takeOverModeEnabled()
 				&& vscode.window.activeTextEditor

diff --git a/extensions/vscode-vue-language-features/src/features/tsconfig.ts b/extensions/vscode-vue-language-features/src/features/tsconfig.ts
@@ -20,6 +20,7 @@ export async function activate(context: vscode.ExtensionContext, languageClient:
 	async function updateStatusBar() {
 		if (
 			vscode.window.activeTextEditor?.document.languageId !== 'vue'
+			&& vscode.window.activeTextEditor?.document.languageId !== 'markdown'
 			&& !(
 				takeOverModeEnabled()
 				&& vscode.window.activeTextEditor

diff --git a/extensions/vscode-vue-language-features/src/nodeClientMain.ts b/extensions/vscode-vue-language-features/src/nodeClientMain.ts
@@ -35,7 +35,7 @@ export function activate(context: vscode.ExtensionContext) {
 			initializationOptions: initOptions,
 			progressOnInitialization: true,
 			synchronize: {
-				fileEvents: vscode.workspace.createFileSystemWatcher('{**/*.vue,**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.json}')
+				fileEvents: vscode.workspace.createFileSystemWatcher('{**/*.vue,**/*.md,**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.json}')
 			}
 		};
 		const client = new lsp.LanguageClient(

diff --git a/packages/shared/src/common.ts b/packages/shared/src/common.ts
@@ -13,6 +13,7 @@ export function syntaxToLanguageId(syntax: string) {
 		case 'jsx': return 'javascriptreact';
 		case 'tsx': return 'typescriptreact';
 		case 'pug': return 'jade';
+		case 'md': return 'markdown';
 	}
 	return syntax;
 }
@@ -24,6 +25,7 @@ export function languageIdToSyntax(languageId: string) {
 		case 'javascriptreact': return 'jsx';
 		case 'typescriptreact': return 'tsx';
 		case 'jade': return 'pug';
+		case 'markdown': return 'md';
 	}
 	return languageId;
 }

diff --git a/packages/typescript-vue-plugin/src/index.ts b/packages/typescript-vue-plugin/src/index.ts
@@ -19,6 +19,7 @@ const init: ts.server.PluginModuleFactory = (modules) => {
 			info.project.getScriptKind = fileName => {
 				switch (path.extname(fileName)) {
 					case '.vue': return ts.ScriptKind.TSX; // can't use External, Unknown
+					case '.md': return ts.ScriptKind.TSX; // can't use External, Unknown
 					case '.js': return ts.ScriptKind.JS;
 					case '.jsx': return ts.ScriptKind.JSX;
 					case '.ts': return ts.ScriptKind.TS;
@@ -158,7 +159,7 @@ function createProxyHost(ts: typeof import('typescript/lib/tsserverlibrary'), in
 	};
 
 	async function onAnyDriveFileUpdated(fileName: string) {
-		if (fileName.endsWith('.vue') && info.project.fileExists(fileName) && !vueFiles.has(fileName)) {
+		if ((fileName.endsWith('.vue') || fileName.endsWith('.md')) && info.project.fileExists(fileName) && !vueFiles.has(fileName)) {
 			onConfigUpdated();
 		}
 	}
@@ -202,7 +203,7 @@ function createProxyHost(ts: typeof import('typescript/lib/tsserverlibrary'), in
 		const parseConfigHost: ts.ParseConfigHost = {
 			useCaseSensitiveFileNames: info.project.useCaseSensitiveFileNames(),
 			readDirectory: (path, extensions, exclude, include, depth) => {
-				return info.project.readDirectory(path, ['.vue'], exclude, include, depth);
+				return info.project.readDirectory(path, ['.vue', '.md'], exclude, include, depth);
 			},
 			fileExists: fileName => info.project.fileExists(fileName),
 			readFile: fileName => info.project.readFile(fileName),

diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -65,7 +65,7 @@ export function generate(
 	allowTypeNarrowingInEventExpressions: boolean,
 	hasScriptSetup: boolean,
 	cssScopedClasses: string[] = [],
-	htmlToTemplate: (htmlStart: number, htmlEnd: number) => { start: number, end: number; } | undefined,
+	htmlToTemplate: (htmlRange: { start: number, end: number; }) => { start: number, end: number; } | undefined,
 	searchTexts: {
 		getEmitCompletion(tag: string): string,
 		getPropsCompletion(tag: string): string,
@@ -228,7 +228,7 @@ export function generate(
 		tagResolves[tagName] = {
 			component: var_rawComponent,
 			emit: var_emit,
-			offsets: tagOffsets.map(offset => htmlToTemplate(offset, offset)?.start).filter(notEmpty),
+			offsets: tagOffsets.map(offset => htmlToTemplate({ start: offset, end: offset })?.start).filter(notEmpty),
 		};
 	}
 
@@ -1182,7 +1182,7 @@ export function generate(
 					end: prop.arg.loc.start.offset + end,
 				};
 
-				const newStart = htmlToTemplate(sourceRange.start, sourceRange.end)?.start;
+				const newStart = htmlToTemplate({ start: sourceRange.start, end: sourceRange.end })?.start;
 				if (newStart === undefined) continue;
 				const offset = newStart - sourceRange.start;
 				sourceRange.start += offset;
@@ -1847,7 +1847,7 @@ export function generate(
 	function addMapping(gen: typeof tsCodeGen, mapping: SourceMaps.Mapping<EmbeddedFileMappingData>) {
 		const newMapping = { ...mapping };
 
-		const templateStart = htmlToTemplate(mapping.sourceRange.start, mapping.sourceRange.end)?.start;
+		const templateStart = htmlToTemplate(mapping.sourceRange)?.start;
 		if (templateStart === undefined) return; // not found
 		const offset = templateStart - mapping.sourceRange.start;
 		newMapping.sourceRange = {
@@ -1858,7 +1858,7 @@ export function generate(
 		if (mapping.additional) {
 			newMapping.additional = [];
 			for (const other of mapping.additional) {
-				let otherTemplateStart = htmlToTemplate(other.sourceRange.start, other.sourceRange.end)?.start;
+				let otherTemplateStart = htmlToTemplate(other.sourceRange)?.start;
 				if (otherTemplateStart === undefined) continue;
 				const otherOffset = otherTemplateStart - other.sourceRange.start;
 				newMapping.additional.push({

diff --git a/packages/vue-language-server/src/features/languageFeatures.ts b/packages/vue-language-server/src/features/languageFeatures.ts
@@ -279,7 +279,7 @@ export function register(
 	});
 	connection.workspace.onWillRenameFiles(async handler => {
 
-		const hasTsFile = handler.files.some(file => file.newUri.endsWith('.vue') || file.newUri.endsWith('.ts') || file.newUri.endsWith('.tsx'));
+		const hasTsFile = handler.files.some(file => file.newUri.endsWith('.vue') || file.newUri.endsWith('.md') || file.newUri.endsWith('.ts') || file.newUri.endsWith('.tsx'));
 		const config: 'prompt' | 'always' | 'never' | null | undefined = await connection.workspace.getConfiguration(hasTsFile ? 'typescript.updateImportsOnFileMove.enabled' : 'javascript.updateImportsOnFileMove.enabled');
 
 		if (config === 'always') {

diff --git a/packages/vue-language-server/src/project.ts b/packages/vue-language-server/src/project.ts
@@ -243,7 +243,7 @@ export async function createProject(
 		const parseConfigHost: ts.ParseConfigHost = {
 			useCaseSensitiveFileNames: projectSys.useCaseSensitiveFileNames,
 			readDirectory: (path, extensions, exclude, include, depth) => {
-				return projectSys.readDirectory(path, [...extensions, '.vue'], exclude, include, depth);
+				return projectSys.readDirectory(path, [...extensions, '.vue', '.md'], exclude, include, depth);
 			},
 			fileExists: projectSys.fileExists,
 			readFile: projectSys.readFile,

diff --git a/packages/vue-language-server/src/registers/registerlanguageFeatures.ts b/packages/vue-language-server/src/registers/registerlanguageFeatures.ts
@@ -36,6 +36,7 @@ export function register(
 				willRename: {
 					filters: [
 						{ pattern: { glob: '**/*.vue' } },
+						{ pattern: { glob: '**/*.md' } },
 						{ pattern: { glob: '**/*.js' } },
 						{ pattern: { glob: '**/*.ts' } },
 						{ pattern: { glob: '**/*.jsx' } },

diff --git a/packages/vue-language-service/src/documentService.ts b/packages/vue-language-service/src/documentService.ts
@@ -116,7 +116,7 @@ export function getDocumentService(
 
 	function getVueDocument(document: TextDocument) {
 
-		if (document.languageId !== 'vue')
+		if (document.languageId !== 'vue' && document.languageId !== 'markdown')
 			return;
 
 		let vueDoc = vueDocuments.get(document);

diff --git a/packages/vue-language-service/src/languageService.ts b/packages/vue-language-service/src/languageService.ts
@@ -327,7 +327,7 @@ export function createLanguageService(
 
 				document = TextDocument.create(
 					uri,
-					uri.endsWith('.vue') ? 'vue' : 'typescript', // TODO
+					shared.syntaxToLanguageId(upath.extname(uri).slice(1)),
 					newVersion,
 					scriptSnapshot.getText(0, scriptSnapshot.getLength()),
 				);

diff --git a/packages/vue-language-service/src/plugins/vue-convert-htmlpug.ts b/packages/vue-language-service/src/plugins/vue-convert-htmlpug.ts
@@ -95,7 +95,7 @@ export default function (options: {
 	function worker<T>(uri: string, callback: (vueDocument: VueDocument) => T) {
 
 		const vueDocument = options.getVueDocument(uri);
-		if (!vueDocument)
+		if (!vueDocument || vueDocument.file.fileName.endsWith('.md'))
 			return;
 
 		return callback(vueDocument);