wip(ls): filter html elements when extending html complitions

fix uri interpretation causing crashes
feat surface new completion types

Author: chuckjaz

client/package.json

@@ -2,7 +2,7 @@
   "name": "ng-template",
   "displayName": "Angular Template",
   "description": "Angular Template Service",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "publisher": "Google",
   "engines": {
     "vscode": "^1.4.0"

server/src/documents.ts

@@ -100,19 +100,28 @@ class ProjectLoggerImpl implements ProjectLogger {
   }
 }
 
+function removePrefix(value: string, ...prefixes: string[]): string {
+  for (const prefix of prefixes) {
+    if (value && value.startsWith(prefix)) {
+      return value.substr(prefix.length);
+    }
+  }
+  return value;
+}
+
+const privateProtocol = "private:";
 const fileProtocol = "file://";
 function uriToFileName(uri: string): string {
-  if (uri && uri.startsWith(fileProtocol)) {
-    return uri.substr(fileProtocol.length);
-  }
-  return uri;
+  return removePrefix(decodeURI(uri), fileProtocol, privateProtocol);
 }
+
 function fileNameToUri(fileName: string): string {
-  return fileProtocol + fileName;
+  return encodeURI(fileProtocol + fileName);
 }
 
 export interface NgServiceInfo {
   fileName: string;
+  languageId?: string;
   service?: LanguageService;
   offset?: number;
 }
@@ -126,6 +135,7 @@ export class TextDocuments {
   private projectService: ProjectService;
   private logger: ProjectLoggerImpl;
   private host: ProjectServiceHostImpl;
+  private languageIds = new Map<string, string>();
   private changeNumber = 0;
 
   constructor(private event?: (event: TextDocumentEvent) => void) {
@@ -150,6 +160,7 @@ export class TextDocuments {
         // TODO: Report errors
         this.logger.msg(`Config errors encountered and need to be reported: ${configFileErrors.length}\n  ${configFileErrors.map(error => error.messageText).join('\n  ')}`);
       }
+      this.languageIds.set(event.textDocument.uri, event.textDocument.languageId);
     });
 
     connection.onDidCloseTextDocument(event => {
@@ -203,16 +214,17 @@ export class TextDocuments {
   public getServiceInfo(document: TextDocumentIdentifier, position?: Position): NgServiceInfo {
     const fileName = uriToFileName(document.uri);
     const project = this.projectService.getProjectForFile(fileName);
+    const languageId = this.languageIds.get(document.uri);
     if (project) {
       const service = project.compilerService.ngService;
       if (position) {
         // VSCode is 0 based, editor services are 1 based.
         const offset = this.projectService.lineOffsetsToPositions(fileName, [{line: position.line + 1, col: position.character + 1}])[0];
-        return {fileName, service, offset};
+        return {fileName, service, offset, languageId};
       }
-      return {fileName, service};
+      return {fileName, service, languageId};
     }
-    return {fileName};
+    return {fileName, languageId};
   }
 
   public ifUnchanged(f: () => void): () => void {

server/src/server.ts

@@ -64,20 +64,32 @@ connection.onInitialize((params): InitializeResult => {
 
 function compiletionKindToCompletionItemKind(kind: string): number {
   switch (kind) {
+  case 'attribute': return CompletionItemKind.Property;
+  case 'html attribute': return CompletionItemKind.Property;
+  case 'component': return CompletionItemKind.Class;
   case 'element': return CompletionItemKind.Class;
-  case 'attribute': return CompletionItemKind.Field;
   case 'entity': return CompletionItemKind.Text;
-  case 'member': return CompletionItemKind.Property;
+  case 'key': return CompletionItemKind.Class;
+  case 'method': return CompletionItemKind.Method;
+  case 'pipe': return CompletionItemKind.Function;
+  case 'property': return CompletionItemKind.Property;
+  case 'type': return CompletionItemKind.Interface;
+  case 'reference': return CompletionItemKind.Variable;
+  case 'variable': return CompletionItemKind.Variable;
   }
   return CompletionItemKind.Text;
 }
 
 // This handler provides the initial list of the completion items.
 connection.onCompletion((textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
-  const {fileName, service, offset} = documents.getServiceInfo(textDocumentPosition.textDocument,
+  const {fileName, service, offset, languageId} = documents.getServiceInfo(textDocumentPosition.textDocument,
     textDocumentPosition.position)
-  if (service) {
-    const result = service.getCompletionsAt(fileName, offset);
+  if (service && offset != null) {
+    let result = service.getCompletionsAt(fileName, offset);
+    if (result && languageId == 'html') {
+      // The HTML elements are provided by the HTML service when the text type is 'html'.
+      result = result.filter(completion => completion.kind != 'element');
+    }
     if (result) {
       return result.map(completion => ({
         label: completion.name,

server/tsconfig.json

@@ -5,7 +5,8 @@
 		"moduleResolution": "node",
 		"sourceMap": true,
 		"outDir": "../client/server",
-		"lib": ["es5", "es2015.core", "es2015.promise", "es2015.collection", "es2015.iterable", "dom"]
+		"lib": ["es5", "es2015.core", "es2015.promise", "es2015.collection", "es2015.iterable", "dom"],
+		"types": []
 	},
 	"exclude": [
 		"node_modules"