Merge pull request #63958 from Microsoft/octref/web-component

html.experimental.custom.tags/attributes for #62976

extensions/html-language-features/client/src/htmlMain.ts

@@ -8,7 +8,7 @@ import * as fs from 'fs';
 import * as nls from 'vscode-nls';
 const localize = nls.loadMessageBundle();
 
-import { languages, ExtensionContext, IndentAction, Position, TextDocument, Range, CompletionItem, CompletionItemKind, SnippetString } from 'vscode';
+import { languages, ExtensionContext, IndentAction, Position, TextDocument, Range, CompletionItem, CompletionItemKind, SnippetString, workspace } from 'vscode';
 import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, TextDocumentPositionParams } from 'vscode-languageclient';
 import { EMPTY_ELEMENTS } from './htmlEmptyTagsShared';
 import { activateTagClosing } from './tagClosing';
@@ -49,14 +49,26 @@ export function activate(context: ExtensionContext) {
 	let documentSelector = ['html', 'handlebars', 'razor'];
 	let embeddedLanguages = { css: true, javascript: true };
 
+	let tagPaths: string[] = workspace.getConfiguration('html').get('experimental.custom.tags', []);
+	let attributePaths: string[] = workspace.getConfiguration('html').get('experimental.custom.attributes', []);
+
+	if (tagPaths) {
+		const workspaceRoot = workspace.workspaceFolders![0].uri.fsPath;
+		tagPaths = tagPaths.map(d => {
+			return path.resolve(workspaceRoot, d);
+		});
+	}
+
 	// Options to control the language client
 	let clientOptions: LanguageClientOptions = {
 		documentSelector,
 		synchronize: {
 			configurationSection: ['html', 'css', 'javascript'], // the settings to synchronize
 		},
 		initializationOptions: {
-			embeddedLanguages
+			embeddedLanguages,
+			tagPaths,
+			attributePaths
 		}
 	};
 

extensions/html-language-features/package.json

@@ -31,6 +31,14 @@
       "type": "object",
       "title": "HTML",
       "properties": {
+        "html.experimental.custom.tags": {
+          "type": "array",
+          "description": "A list of JSON file paths that define custom tags"
+        },
+        "html.experimental.custom.attributes": {
+          "type": "array",
+          "description": "A list of JSON file paths that define custom attributes"
+        },
         "html.format.enable": {
           "type": "boolean",
           "scope": "window",
@@ -124,12 +132,14 @@
           "description": "%html.format.wrapAttributes.desc%"
         },
         "html.suggest.angular1": {
+          "deprecationMessage": "Angular 1 is obsolete and Angular completion will be removed.",
           "type": "boolean",
           "scope": "resource",
           "default": false,
           "description": "%html.suggest.angular1.desc%"
         },
         "html.suggest.ionic": {
+          "deprecationMessage": "Ionic 1 is obsolete and Ionic completion will be removed.",
           "type": "boolean",
           "scope": "resource",
           "default": false,

extensions/html-language-features/server/package.json

@@ -9,8 +9,8 @@
   },
   "main": "./out/htmlServerMain",
   "dependencies": {
-    "vscode-css-languageservice": "^3.0.12",
-    "vscode-html-languageservice": "^2.1.10",
+    "vscode-css-languageservice": "^3.0.13-next.3",
+    "vscode-html-languageservice": "^2.1.11-next.1",
     "vscode-languageserver": "^5.1.0",
     "vscode-languageserver-types": "^3.13.0",
     "vscode-nls": "^4.0.0",

extensions/html-language-features/server/src/htmlServerMain.ts

@@ -11,6 +11,7 @@ import {
 } from 'vscode-languageserver';
 import { TextDocument, Diagnostic, DocumentLink, SymbolInformation } from 'vscode-languageserver-types';
 import { getLanguageModes, LanguageModes, Settings } from './modes/languageModes';
+import * as fs from 'fs';
 
 import { format } from './modes/formatting';
 import { pushAll } from './utils/arrays';
@@ -19,6 +20,8 @@ import uri from 'vscode-uri';
 import { formatError, runSafe, runSafeAsync } from './utils/runner';
 
 import { getFoldingRanges } from './modes/htmlFolding';
+import { parseTagSet, parseAttributes } from './utils/tagDefinitions';
+import { ITagSet, IAttributeSet } from 'vscode-html-languageservice';
 
 namespace TagCloseRequest {
 	export const type: RequestType<TextDocumentPositionParams, string | null, any, any> = new RequestType('html/tag');
@@ -88,11 +91,47 @@ connection.onInitialize((params: InitializeParams): InitializeResult => {
 		}
 	}
 
+	const tagPaths: string[] = params.initializationOptions.tagPaths;
+	const attributePaths: string[] = params.initializationOptions.attributePaths;
+	const htmlTags: ITagSet = {};
+	const htmlAttributes: IAttributeSet = {};
+
+	if (tagPaths) {
+		tagPaths.forEach(path => {
+			try {
+				if (fs.existsSync(path)) {
+					const tagSet = parseTagSet(fs.readFileSync(path, 'utf-8'));
+					for (let tag in tagSet) {
+						htmlTags[tag] = tagSet[tag];
+					}
+				}
+			} catch (err) {
+				console.log(`Failed to laod tag from ${path}`);
+			}
+		});
+	}
+	if (htmlAttributes) {
+		attributePaths.forEach(path => {
+			try {
+				if (fs.existsSync(path)) {
+					const attributeSet = parseAttributes(fs.readFileSync(path, 'utf-8'));
+					for (let ga in attributeSet) {
+						htmlAttributes[ga] = attributeSet[ga];
+					}
+				}
+			} catch (err) {
+				console.log(`Failed to load attributes from ${path}`);
+			}
+		});
+	}
+
 	const workspace = {
 		get settings() { return globalSettings; },
 		get folders() { return workspaceFolders; }
 	};
-	languageModes = getLanguageModes(initializationOptions ? initializationOptions.embeddedLanguages : { css: true, javascript: true }, workspace);
+
+	languageModes = getLanguageModes(initializationOptions ? initializationOptions.embeddedLanguages : { css: true, javascript: true }, workspace, htmlTags, htmlAttributes);
+
 	documents.onDidClose(e => {
 		languageModes.onDocumentRemoved(e.document);
 	});

extensions/html-language-features/server/src/modes/languageModes.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { getLanguageService as getHTMLLanguageService, DocumentContext } from 'vscode-html-languageservice';
+import { getLanguageService as getHTMLLanguageService, DocumentContext, ITagSet, IAttributeSet } from 'vscode-html-languageservice';
 import {
 	CompletionItem, Location, SignatureHelp, Definition, TextEdit, TextDocument, Diagnostic, DocumentLink, Range,
 	Hover, DocumentHighlight, CompletionList, Position, FormattingOptions, SymbolInformation, FoldingRange
@@ -65,9 +65,13 @@ export interface LanguageModeRange extends Range {
 	attributeValue?: boolean;
 }
 
-export function getLanguageModes(supportedLanguages: { [languageId: string]: boolean; }, workspace: Workspace): LanguageModes {
+export function getLanguageModes(supportedLanguages: { [languageId: string]: boolean; }, workspace: Workspace, customTags?: ITagSet, customAttributes?: IAttributeSet): LanguageModes {
+
+	var htmlLanguageService = getHTMLLanguageService({
+		customTags,
+		customAttributes
+	});
 
-	var htmlLanguageService = getHTMLLanguageService();
 	let documentRegions = getLanguageModelCache<HTMLDocumentRegions>(10, 60, document => getDocumentRegions(htmlLanguageService, document));
 
 	let modelCaches: LanguageModelCache<any>[] = [];

extensions/html-language-features/server/src/utils/tagDefinitions.ts

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ITagSet, IAttributeSet, HTMLTagSpecification } from 'vscode-html-languageservice';
+
+interface Tag {
+	label: string;
+	description: string;
+	attributes: Attribute[];
+}
+interface Attribute {
+	label: string;
+	description: string;
+}
+interface RawTagSet {
+	tags: Tag[];
+}
+interface RawAttributeSet {
+	attributes: Attribute[];
+}
+
+export function parseTagSet(source: string): ITagSet {
+	const tagSet: ITagSet = {};
+
+	let rawTagSet: RawTagSet;
+	try {
+		rawTagSet = JSON.parse(source);
+	} catch (err) {
+		return {};
+	}
+
+	rawTagSet.tags.forEach(c => {
+		tagSet[c.label] = new HTMLTagSpecification(c.description, c.attributes.map(a => a.label));
+	});
+
+	return tagSet;
+}
+
+export function parseAttributes(source: string): IAttributeSet {
+	const attributeSet: IAttributeSet = {};
+
+	let rawAttributeSet: RawAttributeSet;
+	try {
+		rawAttributeSet = JSON.parse(source);
+	} catch (err) {
+		return {};
+	}
+
+	rawAttributeSet.attributes.forEach(ag => {
+		attributeSet[ag.label] = {
+			...ag
+		};
+	});
+
+	return attributeSet;
+}

extensions/html-language-features/server/yarn.lock

@@ -229,18 +229,18 @@ supports-color@5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
-vscode-css-languageservice@^3.0.12:
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-3.0.12.tgz#fb4aac5ae3c5b761b1db1d7224b78ff824284dc3"
-  integrity sha512-+FLQ9LcukIhnxaGTjDOqb3Nb1hesz9BLXf5yeoZxUsuK7joADPLPdxLwlZugFcMAvgmtnaFIGnzkQhGOVqf5yw==
+vscode-css-languageservice@^3.0.13-next.3:
+  version "3.0.13-next.3"
+  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-3.0.13-next.3.tgz#b9e6f253cace52fbb749d2fe194ae4b196f3543e"
+  integrity sha512-7+7JddZRt8zFRLbqygxJw+GHtbQ5o2YvgEFvi4ixvbUAX6KlY3Yw6CgUUbg9dmBla7h+GbtoDjwiLFV6Oy+SBQ==
   dependencies:
     vscode-languageserver-types "^3.13.0"
     vscode-nls "^4.0.0"
 
-vscode-html-languageservice@^2.1.10:
-  version "2.1.10"
-  resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-2.1.10.tgz#3433fd53e188cb25d5ea190b61a148fe9965ff91"
-  integrity sha512-nuzLd7a3J+Ttvk/9Pg2H0vS7rV2oZRfsQYPRheHnUNJNqivkcieSI8ZCGvZjmr3NDBG2QQaRFambnCtceYAj3A==
+vscode-html-languageservice@^2.1.11-next.1:
+  version "2.1.11-next.1"
+  resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-2.1.11-next.1.tgz#a26719e717a9fc6f246e93746bf5b86f7e8b9f49"
+  integrity sha512-R7Q3pmK5ZP7ZHpUbZOD6dGHkGDmA4TgS+ErAXsxNWaHrmh+petZmRIsdgzddk0KtoOD3NHDubXeF44i46gaIyw==
   dependencies:
     vscode-languageserver-types "^3.13.0"
     vscode-nls "^4.0.0"