Get emmet completions from css extension (#41652)

* Get emmet completions from html,css extensions

* Resolve extensionsPath, use emmet results even if empty

* Support css abbr with :

* Refactoring

* Add some basic emmet tests

* Refactoring

* More tests

extensions/html/server/src/htmlServerMain.ts

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import { createConnection, IConnection, TextDocuments, InitializeParams, InitializeResult, RequestType, DocumentRangeFormattingRequest, Disposable, DocumentSelector, TextDocumentPositionParams, ServerCapabilities, Position } from 'vscode-languageserver';
-import { TextDocument, Diagnostic, DocumentLink, SymbolInformation } from 'vscode-languageserver-types';
+import { createConnection, IConnection, TextDocuments, InitializeParams, InitializeResult, RequestType, DocumentRangeFormattingRequest, Disposable, DocumentSelector, TextDocumentPositionParams, ServerCapabilities, Position, CompletionTriggerKind } from 'vscode-languageserver';
+import { TextDocument, Diagnostic, DocumentLink, SymbolInformation, CompletionList } from 'vscode-languageserver-types';
 import { getLanguageModes, LanguageModes, Settings } from './modes/languageModes';
 
 import { ConfigurationRequest, ConfigurationParams } from 'vscode-languageserver-protocol/lib/protocol.configuration.proposed';
@@ -17,6 +17,7 @@ import { pushAll } from './utils/arrays';
 import { getDocumentContext } from './utils/documentContext';
 import uri from 'vscode-uri';
 import { formatError, runSafe } from './utils/errors';
+import { doComplete as emmetDoComplete, updateExtensionsPath as updateEmmetExtensionsPath, getEmmetCompletionParticipants } from 'vscode-emmet-helper';
 
 namespace TagCloseRequest {
 	export const type: RequestType<TextDocumentPositionParams, string | null, any, any> = new RequestType('html/tag');
@@ -69,6 +70,10 @@ function getDocumentSettings(textDocument: TextDocument, needsDocumentSettings:
 	return Promise.resolve(void 0);
 }
 
+let emmetSettings = {};
+let currentEmmetExtensionsPath: string;
+const emmetTriggerCharacters = ['!', '.', '}', ':', '*', '$', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
 // After the server has started the client sends an initilize request. The server receives
 // in the passed params the rootPath of the workspace plus the client capabilites
 connection.onInitialize((params: InitializeParams): InitializeResult => {
@@ -105,7 +110,7 @@ connection.onInitialize((params: InitializeParams): InitializeResult => {
 	let capabilities: ServerCapabilities & CPServerCapabilities = {
 		// Tell the client that the server works in FULL text document sync mode
 		textDocumentSync: documents.syncKind,
-		completionProvider: clientSnippetSupport ? { resolveProvider: true, triggerCharacters: ['.', ':', '<', '"', '=', '/'] } : undefined,
+		completionProvider: clientSnippetSupport ? { resolveProvider: true, triggerCharacters: [...emmetTriggerCharacters, '.', ':', '<', '"', '=', '/'] } : undefined,
 		hoverProvider: true,
 		documentHighlightProvider: true,
 		documentRangeFormattingProvider: false,
@@ -167,6 +172,12 @@ connection.onDidChangeConfiguration((change) => {
 		}
 	}
 
+	emmetSettings = globalSettings.emmet;
+	if (currentEmmetExtensionsPath !== emmetSettings['extensionsPath']) {
+		currentEmmetExtensionsPath = emmetSettings['extensionsPath'];
+		const workspaceUri = (workspaceFolders && workspaceFolders.length === 1) ? uri.parse(workspaceFolders[0].uri) : null;
+		updateEmmetExtensionsPath(currentEmmetExtensionsPath, workspaceUri ? workspaceUri.fsPath : null);
+	}
 });
 
 let pendingValidationRequests: { [uri: string]: NodeJS.Timer } = {};
@@ -226,19 +237,52 @@ async function validateTextDocument(textDocument: TextDocument) {
 	}
 }
 
+let cachedCompletionList: CompletionList;
 connection.onCompletion(async textDocumentPosition => {
 	return runSafe(async () => {
 		let document = documents.get(textDocumentPosition.textDocument.uri);
 		let mode = languageModes.getModeAtPosition(document, textDocumentPosition.position);
-		if (mode && mode.doComplete) {
-			let doComplete = mode.doComplete;
-			if (mode.getId() !== 'html') {
-				connection.telemetry.logEvent({ key: 'html.embbedded.complete', value: { languageId: mode.getId() } });
-			}
-			let settings = await getDocumentSettings(document, () => doComplete.length > 2);
-			return doComplete(document, textDocumentPosition.position, settings);
+		if (!mode || !mode.doComplete) {
+			return { isIncomplete: true, items: [] };
 		}
-		return { isIncomplete: true, items: [] };
+
+		if (cachedCompletionList
+			&& !cachedCompletionList.isIncomplete
+			&& (mode.getId() === 'html' || mode.getId() === 'css')
+			&& textDocumentPosition.context
+			&& textDocumentPosition.context.triggerKind === CompletionTriggerKind.TriggerForIncompleteCompletions
+		) {
+			let result: CompletionList = emmetDoComplete(document, textDocumentPosition.position, mode.getId(), emmetSettings);
+			if (result && result.items) {
+				result.items.push(...cachedCompletionList.items);
+			} else {
+				result = cachedCompletionList;
+				cachedCompletionList = null;
+			}
+			return result;
+		}
+
+		if (mode.getId() !== 'html') {
+			connection.telemetry.logEvent({ key: 'html.embbedded.complete', value: { languageId: mode.getId() } });
+		}
+
+		cachedCompletionList = null;
+		let emmetCompletionList: CompletionList = {
+			isIncomplete: true,
+			items: undefined
+		};
+		if (mode.setCompletionParticipants) {
+			const emmetCompletionParticipant = getEmmetCompletionParticipants(document, textDocumentPosition.position, mode.getId(), emmetSettings, emmetCompletionList);
+			mode.setCompletionParticipants([emmetCompletionParticipant]);
+		}
+
+		let settings = await getDocumentSettings(document, () => mode.doComplete.length > 2);
+		let result = mode.doComplete(document, textDocumentPosition.position, settings);
+		if (emmetCompletionList && emmetCompletionList.items) {
+			cachedCompletionList = result;
+			return { isIncomplete: true, items: [...emmetCompletionList.items, ...result.items] };
+		}
+		return result;
 	}, null, `Error while computing completions for ${textDocumentPosition.textDocument.uri}`);
 });
 

extensions/html/server/src/modes/cssMode.ts

@@ -6,7 +6,7 @@
 
 import { LanguageModelCache, getLanguageModelCache } from '../languageModelCache';
 import { TextDocument, Position, Range } from 'vscode-languageserver-types';
-import { getCSSLanguageService, Stylesheet } from 'vscode-css-languageservice';
+import { getCSSLanguageService, Stylesheet, ICompletionParticipant } from 'vscode-css-languageservice';
 import { LanguageMode, Settings } from './languageModes';
 import { HTMLDocumentRegions, CSS_STYLE_RULE } from './embeddedSupport';
 import { Color } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
@@ -31,6 +31,9 @@ export function getCSSMode(documentRegions: LanguageModelCache<HTMLDocumentRegio
 			let embedded = embeddedCSSDocuments.get(document);
 			return cssLanguageService.doComplete(embedded, position, cssStylesheets.get(embedded));
 		},
+		setCompletionParticipants(registeredCompletionParticipants: ICompletionParticipant[]) {
+			cssLanguageService.setCompletionParticipants(registeredCompletionParticipants);
+		},
 		doHover(document: TextDocument, position: Position) {
 			let embedded = embeddedCSSDocuments.get(document);
 			return cssLanguageService.doHover(embedded, position, cssStylesheets.get(embedded));

extensions/html/server/src/modes/htmlMode.ts

@@ -5,13 +5,14 @@
 'use strict';
 
 import { getLanguageModelCache } from '../languageModelCache';
-import { LanguageService as HTMLLanguageService, HTMLDocument, DocumentContext, FormattingOptions, HTMLFormatConfiguration } from 'vscode-html-languageservice';
+import { LanguageService as HTMLLanguageService, HTMLDocument, DocumentContext, FormattingOptions, HTMLFormatConfiguration, TokenType } from 'vscode-html-languageservice';
 import { TextDocument, Position, Range } from 'vscode-languageserver-types';
 import { LanguageMode, Settings } from './languageModes';
 
 export function getHTMLMode(htmlLanguageService: HTMLLanguageService): LanguageMode {
 	let globalSettings: Settings = {};
 	let htmlDocuments = getLanguageModelCache<HTMLDocument>(10, 60, document => htmlLanguageService.parseHTMLDocument(document));
+	let completionParticipants = [];
 	return {
 		getId() {
 			return 'html';
@@ -25,7 +26,23 @@ export function getHTMLMode(htmlLanguageService: HTMLLanguageService): LanguageM
 			if (doAutoComplete) {
 				options.hideAutoCompleteProposals = true;
 			}
-			return htmlLanguageService.doComplete(document, position, htmlDocuments.get(document), options);
+
+			const htmlDocument = htmlDocuments.get(document);
+			const offset = document.offsetAt(position);
+			const node = htmlDocument.findNodeBefore(offset);
+			const scanner = htmlLanguageService.createScanner(document.getText(), node.start);
+			let token = scanner.scan();
+			while (token !== TokenType.EOS && scanner.getTokenOffset() <= offset) {
+				if (token === TokenType.Content && offset <= scanner.getTokenEnd()) {
+					completionParticipants.forEach(participant => { if (participant.onHtmlContent) { participant.onHtmlContent(); } });
+					break;
+				}
+				token = scanner.scan();
+			}
+			return htmlLanguageService.doComplete(document, position, htmlDocument, options);
+		},
+		setCompletionParticipants(registeredCompletionParticipants: any[]) {
+			completionParticipants = registeredCompletionParticipants;
 		},
 		doHover(document: TextDocument, position: Position) {
 			return htmlLanguageService.doHover(document, position, htmlDocuments.get(document));

extensions/html/server/src/modes/languageModes.ts

@@ -24,6 +24,7 @@ export interface Settings {
 	css?: any;
 	html?: any;
 	javascript?: any;
+	emmet?: { [key: string]: any };
 }
 
 export interface SettingProvider {
@@ -35,6 +36,7 @@ export interface LanguageMode {
 	configure?: (options: Settings) => void;
 	doValidation?: (document: TextDocument, settings?: Settings) => Diagnostic[];
 	doComplete?: (document: TextDocument, position: Position, settings?: Settings) => CompletionList | null;
+	setCompletionParticipants?: (registeredCompletionParticipants: any[]) => void;
 	doResolve?: (document: TextDocument, item: CompletionItem) => CompletionItem | null;
 	doHover?: (document: TextDocument, position: Position) => Hover | null;
 	doSignatureHelp?: (document: TextDocument, position: Position) => SignatureHelp | null;

extensions/html/server/src/test/emmet.test.ts

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import 'mocha';
+import * as assert from 'assert';
+import { getHTMLMode } from '../modes/htmlMode';
+import { TextDocument, CompletionList } from 'vscode-languageserver-types';
+import { getLanguageModelCache } from '../languageModelCache';
+
+import { getLanguageService } from 'vscode-html-languageservice';
+import * as embeddedSupport from '../modes/embeddedSupport';
+import { getEmmetCompletionParticipants } from 'vscode-emmet-helper';
+import { getCSSMode } from '../modes/cssMode';
+
+suite('Emmet Support', () => {
+
+	const htmlLanguageService = getLanguageService();
+
+	function assertCompletions(syntax: string, value: string, expectedProposal: string, expectedProposalDoc: string): void {
+		const offset = value.indexOf('|');
+		value = value.substr(0, offset) + value.substr(offset + 1);
+
+		const document = TextDocument.create('test://test/test.' + syntax, syntax, 0, value);
+		const position = document.positionAt(offset);
+		const documentRegions = getLanguageModelCache<embeddedSupport.HTMLDocumentRegions>(10, 60, document => embeddedSupport.getDocumentRegions(htmlLanguageService, document));
+		const mode = syntax == 'html' ? getHTMLMode(htmlLanguageService) : getCSSMode(documentRegions);
+		const emmetCompletionList: CompletionList = {
+			isIncomplete: true,
+			items: undefined
+		}
+		mode.setCompletionParticipants([getEmmetCompletionParticipants(document, position, document.languageId, {}, emmetCompletionList)])
+
+		const list = mode.doComplete!(document, position);
+		assert.ok(list);
+		assert.ok(emmetCompletionList)
+
+
+		if (expectedProposal && expectedProposalDoc) {
+			let actualLabels = emmetCompletionList!.items.map(c => c.label).sort();
+			let actualDocs = emmetCompletionList!.items.map(c => c.documentation).sort();
+			assert.ok(actualLabels.indexOf(expectedProposal) !== -1, 'Not found:' + expectedProposal + ' is ' + actualLabels.join(', '));
+			assert.ok(actualDocs.indexOf(expectedProposalDoc) !== -1, 'Not found:' + expectedProposalDoc + ' is ' + actualDocs.join(', '));
+		} else {
+			assert.ok(!emmetCompletionList || !emmetCompletionList.items);
+		}
+
+	}
+
+	test('Html Emmet Completions', function (): any {
+		assertCompletions('html', 'ul|', 'ul', '<ul>|</ul>');
+		assertCompletions('html', '<ul|', null, null);
+		assertCompletions('html', '<html>ul|</html>', 'ul', '<ul>|</ul>');
+		assertCompletions('html', '<img src=|', null, null);
+		assertCompletions('html', '<div class=|/>', null, null);
+	});
+
+	test('Css Emmet Completions', function (): any {
+		assertCompletions('css', '<style>.foo { display: none; m10| }</style>', 'margin: 10px;', 'margin: 10px;');
+		assertCompletions('css', '<style>foo { display: none; pos:f| }</style>', 'position: fixed;', 'position: fixed;');
+		assertCompletions('css', '<style>foo { display: none; margin: a| }</style>', null, null);
+		assertCompletions('css', '<style>foo| { display: none; }</style>', null, null);
+		assertCompletions('css', '<style>foo {| display: none; }</style>', null, null);
+		assertCompletions('css', '<style>foo { display: none;| }</style>', null, null);
+		assertCompletions('css', '<style>foo { display: none|; }</style>', null, null);
+		assertCompletions('css', '<style>.foo { display: none; -m-m10| }</style>', 'margin: 10px;', '-moz-margin: 10px;\nmargin: 10px;');
+	});
+});