feat: add semantic tokens

client/src/client.ts

@@ -171,6 +171,16 @@ export class AngularLanguageClient implements vscode.Disposable {
           }
           return next(document, context, token);
         },
+        provideDocumentSemanticTokens: async (document, token, next) => {
+          if (await this.isInAngularProject(document)) {
+            return next(document, token);
+          }
+        },
+        provideDocumentRangeSemanticTokens: async (document, range, token, next) => {
+          if (await this.isInAngularProject(document)) {
+            return next(document, range, token);
+          }
+        },
       }
     };
   }

server/src/semantic_tokens.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as ts from 'typescript/lib/tsserverlibrary';
+import * as lsp from 'vscode-languageserver/node';
+
+export enum TokenEncodingConsts {
+  typeOffset = 8,
+  modifierMask = (1 << typeOffset) - 1,
+}
+
+export function getSemanticTokens(
+    classifications: ts.Classifications, script: ts.server.ScriptInfo): lsp.SemanticTokens {
+  const spans = classifications.spans;
+  const builder = new lsp.SemanticTokensBuilder();
+
+  for (let i = 0; i < spans.length;) {
+    const offset = spans[i++];
+    const length = spans[i++];
+    const tsClassification = spans[i++];
+
+    const tokenType = getTokenTypeFromClassification(tsClassification);
+    if (tokenType === undefined) {
+      continue;
+    }
+
+    const tokenModifiers = getTokenModifierFromClassification(tsClassification);
+
+    const startPos = script.positionToLineOffset(offset);
+    startPos.line -= 1;
+    startPos.offset -= 1;
+
+    const endPos = script.positionToLineOffset(offset + length);
+    endPos.line -= 1;
+    endPos.offset -= 1;
+
+    for (let line = startPos.line; line <= endPos.line; line++) {
+      const startCharacter = line === startPos.line ? startPos.offset : 0;
+      const endCharacter =
+          line === endPos.line ? endPos.offset : script.lineToTextSpan(line - 1).length;
+      builder.push(line, startCharacter, endCharacter - startCharacter, tokenType, tokenModifiers);
+    }
+  }
+
+  return builder.build();
+}
+
+function getTokenTypeFromClassification(tsClassification: number): number|undefined {
+  if (tsClassification > TokenEncodingConsts.modifierMask) {
+    return (tsClassification >> TokenEncodingConsts.typeOffset) - 1;
+  }
+  return undefined;
+}
+
+function getTokenModifierFromClassification(tsClassification: number) {
+  return tsClassification & TokenEncodingConsts.modifierMask;
+}

server/src/session.ts

@@ -20,6 +20,7 @@ import {GetComponentsWithTemplateFile, GetTcbParams, GetTcbRequest, GetTcbRespon
 import {readNgCompletionData, tsCompletionEntryToLspCompletionItem} from './completion';
 import {tsDiagnosticToLspDiagnostic} from './diagnostic';
 import {getHTMLVirtualContent} from './embedded_support';
+import {getSemanticTokens} from './semantic_tokens';
 import {ServerHost} from './server_host';
 import {documentationToMarkdown} from './text_render';
 import {filePathToUri, getMappedDefinitionInfo, isConfiguredProject, isDebugMode, lspPositionToTsPosition, lspRangeToTsPositions, MruTracker, tsDisplayPartsToText, tsFileTextChangesToLspWorkspaceEdit, tsTextSpanToLspRange, uriToFilePath} from './utils';
@@ -217,8 +218,38 @@ export class Session {
     conn.onSignatureHelp(p => this.onSignatureHelp(p));
     conn.onCodeAction(p => this.onCodeAction(p));
     conn.onCodeActionResolve(async p => await this.onCodeActionResolve(p));
+    conn.onRequest(lsp.SemanticTokensRequest.type, p => this.onSemanticTokensRequest(p));
+    conn.onRequest(lsp.SemanticTokensRangeRequest.type, p => this.onSemanticTokensRangeRequest(p));
   }
 
+  private onSemanticTokensRequest(params: lsp.SemanticTokensParams): lsp.SemanticTokens|null {
+    const lsInfo = this.getLSAndScriptInfo(params.textDocument);
+    if (lsInfo === null) {
+      return null;
+    }
+    const {languageService, scriptInfo} = lsInfo;
+    const span = {start: 0, length: scriptInfo.getSnapshot().getLength()};
+    const classifications = languageService.getEncodedSemanticClassifications(
+        scriptInfo.fileName, span, ts.SemanticClassificationFormat.TwentyTwenty);
+    return getSemanticTokens(classifications, scriptInfo);
+  }
+
+  private onSemanticTokensRangeRequest(params: lsp.SemanticTokensRangeParams): lsp.SemanticTokens
+      |null {
+    const lsInfo = this.getLSAndScriptInfo(params.textDocument);
+    if (lsInfo === null) {
+      return null;
+    }
+    const {languageService, scriptInfo} = lsInfo;
+    const start = lspPositionToTsPosition(lsInfo.scriptInfo, params.range.start);
+    const end = lspPositionToTsPosition(lsInfo.scriptInfo, params.range.end);
+    const span = {start, length: end - start};
+    const classifications = languageService.getEncodedSemanticClassifications(
+        scriptInfo.fileName, span, ts.SemanticClassificationFormat.TwentyTwenty);
+    return getSemanticTokens(classifications, scriptInfo);
+  }
+
+
   private onCodeAction(params: lsp.CodeActionParams): lsp.CodeAction[]|null {
     const filePath = uriToFilePath(params.textDocument.uri);
     const lsInfo = this.getLSAndScriptInfo(params.textDocument);
@@ -809,6 +840,17 @@ export class Session {
           // [here](https://github.com/angular/vscode-ng-language-service/issues/1828)
           codeActionKinds: [lsp.CodeActionKind.QuickFix],
         },
+        semanticTokensProvider: {
+          documentSelector: null,
+          legend: {
+            tokenTypes: [
+              'class',
+            ],
+            tokenModifiers: [],
+          },
+          full: true,
+          range: true
+        }
       },
       serverOptions,
     };