feat(language-service): TS references from template items

packages/language-service/src/language_service.ts

@@ -98,4 +98,17 @@ class LanguageServiceImpl implements ng.LanguageService {
     const declarations = this.host.getDeclarations(fileName);
     return getTsHover(position, declarations, analyzedModules);
   }
+
+  getReferencesAtPosition(fileName: string, position: number): tss.ReferenceEntry[]|undefined {
+    const defAndSpan = this.getDefinitionAndBoundSpan(fileName, position);
+    if (!defAndSpan?.definitions) {
+      return;
+    }
+    const {definitions} = defAndSpan;
+    const tsDef = definitions.find(def => def.fileName.endsWith('.ts'));
+    if (!tsDef) {
+      return;
+    }
+    return this.host.tsLS.getReferencesAtPosition(tsDef.fileName, tsDef.textSpan.start);
+  }
 }

packages/language-service/src/types.ts

@@ -254,7 +254,7 @@ export interface Diagnostic {
 export type LanguageService = Pick<
     ts.LanguageService,
     'getCompletionsAtPosition'|'getDefinitionAndBoundSpan'|'getQuickInfoAtPosition'|
-    'getSemanticDiagnostics'>;
+    'getSemanticDiagnostics'|'getReferencesAtPosition'>;
 
 /** Information about an Angular template AST. */
 export interface AstResult {

packages/language-service/src/typescript_host.ts

@@ -72,8 +72,7 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
     ngModules: [],
   };
 
-  constructor(
-      readonly tsLsHost: tss.LanguageServiceHost, private readonly tsLS: tss.LanguageService) {
+  constructor(readonly tsLsHost: tss.LanguageServiceHost, readonly tsLS: tss.LanguageService) {
     this.summaryResolver = new AotSummaryResolver(
         {
           loadSummary(_filePath: string) {

packages/language-service/test/BUILD.bazel

@@ -29,6 +29,7 @@ ts_library(
         "definitions_spec.ts",
         "diagnostics_spec.ts",
         "hover_spec.ts",
+        "references_spec.ts",
     ],
     data = [":project"],
     deps = [

packages/language-service/test/definitions_spec.ts

@@ -71,7 +71,7 @@ describe('definitions', () => {
 
     const fileContent = mockHost.readFile(def.fileName);
     expect(fileContent!.substring(def.textSpan.start, def.textSpan.start + def.textSpan.length))
-        .toEqual(`title = 'Some title';`);
+        .toEqual(`title = 'Tour of Heroes';`);
   });
 
   it('should be able to find a method from a call', () => {

packages/language-service/test/project/app/app.component.ts

@@ -31,4 +31,7 @@ export class AppComponent {
   title = 'Tour of Heroes';
   hero: Hero = {id: 1, name: 'Windstorm'};
   private internal: string = 'internal';
+  setTitle(newTitle: string) {
+    this.title = newTitle;
+  }
 }

packages/language-service/test/project/app/parsing-cases.ts

@@ -88,7 +88,7 @@ export class TemplateReference {
   /**
    * This is the title of the `TemplateReference` Component.
    */
-  title = 'Some title';
+  title = 'Tour of Heroes';
   hero: Hero = {id: 1, name: 'Windstorm'};
   heroP = Promise.resolve(this.hero);
   heroes: Hero[] = [this.hero];
@@ -107,4 +107,7 @@ export class TemplateReference {
   constNames = [{name: 'name'}] as const;
   private myField = 'My Field';
   strOrNumber: string|number = '';
+  setTitle(newTitle: string) {
+    this.title = newTitle;
+  }
 }

packages/language-service/test/references_spec.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright Google LLC 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';
+
+import {createLanguageService} from '../src/language_service';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {MockTypescriptHost} from './test_utils';
+
+const APP_COMPONENT = '/app/app.component.ts';
+const TEST_TEMPLATE = '/app/test.ng';
+
+describe('references', () => {
+  const mockHost = new MockTypescriptHost(['/app/main.ts']);
+  const tsLS = ts.createLanguageService(mockHost);
+  const ngHost = new TypeScriptServiceHost(mockHost, tsLS);
+  const ngLS = createLanguageService(ngHost);
+
+  beforeEach(() => {
+    mockHost.reset();
+  });
+
+  for (const templateStrategy of ['inline', 'external'] as const) {
+    describe(`template: ${templateStrategy}`, () => {
+      describe('component members', () => {
+        it('should get TS references for a member in template', () => {
+          const fileName = overrideTemplate('{{«title»}}');
+          const marker = mockHost.getReferenceMarkerFor(fileName, 'title');
+          const references = ngLS.getReferencesAtPosition(fileName, marker.start)!;
+
+          expect(references).toBeDefined();
+          expect(references.length).toBe(2);
+
+          for (let i = 0; i < references.length; ++i) {
+            // The first reference is declared as a class member.
+            // The second is in `setTitle`.
+            const ref = references[i];
+            expect(getSource(ref)).toBe('title');
+            if (i == 0) {
+              // The first reference is the member declaration, so it should
+              // have a context span pointing to the whole declaration.
+              expect(getSource(ref, 'contextSpan')).toBe('title = \'Tour of Heroes\';');
+            }
+          }
+        });
+      });
+    });
+
+    // TODO: override parsing-cases#TemplateReference for inline templates.
+    const overrideTemplate = (template: string): string => {
+      if (templateStrategy === 'inline') {
+        mockHost.overrideInlineTemplate(APP_COMPONENT, template);
+        return APP_COMPONENT;
+      } else {
+        mockHost.override(TEST_TEMPLATE, template);
+        return TEST_TEMPLATE;
+      }
+    };
+  }
+
+  /**
+   * Gets the source code of a reference entry. By default the reference
+   * `textSpan` is checked, but this can be overridden by specifying `spanKind`.
+   */
+  function getSource(
+      reference: ts.ReferenceEntry, spanKind: 'textSpan'|'contextSpan' = 'textSpan'): string {
+    const span = reference[spanKind]!;
+    const fileName = reference.fileName;
+    const content = mockHost.readFile(fileName)!;
+    return content.substring(span.start, span.start + span.length);
+  }
+});