Skip to content

Commit

Permalink
feat(language-service): Add "find references" capability to Ivy integ…
Browse files Browse the repository at this point in the history
…rated LS (#39768)

This commit adds "find references" functionality to the Ivy integrated
language service. The basic approach is as follows:

1. Generate shims for all files to ensure we find references in shims
throughout the entire program
2. Determine if the position for the reference request is within a
template.
  * Yes, it is in a template: Find which node in the template AST the
  position refers to. Then find the position in the shim file for that
  template node. Pass the shim file and position in the shim file along
  to step 3.
  * No, the request for references was made outside a template: Forward
  the file and position to step 3.
3. (`getReferencesAtTypescriptPosition`): Call the native TypeScript LS
`getReferencesAtPosition`. For each reference that is in a shim file, map those
back to a template location, otherwise return it as-is.

PR Close #39768
  • Loading branch information
atscott authored and mhevery committed Dec 2, 2020
1 parent c69e67c commit 06a782a
Show file tree
Hide file tree
Showing 12 changed files with 997 additions and 28 deletions.
26 changes: 22 additions & 4 deletions packages/compiler-cli/src/ngtsc/testing/fake_common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ import {NgIterable, TemplateRef, ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMe
export interface NgForOfContext<T, U extends NgIterable<T>> {
$implicit: T;
ngForOf: U;
odd: boolean;
event: boolean;
first: boolean;
last: boolean;
count: number;
index: number;
}

export interface TrackByFunction<T> {
Expand Down Expand Up @@ -54,6 +60,19 @@ export declare class NgIf<T = unknown> {
ctx is NgIfContext<Exclude<T, false|0|''|null|undefined>>;
}

export declare class NgTemplateOutlet {
ngTemplateOutlet: TemplateRef<any>|null;
ngTemplateOutletContext: Object|null;

static ɵdir: ɵɵDirectiveDefWithMeta < NgTemplateOutlet, '[ngTemplateOutlet]', never, {
'ngTemplateOutlet': 'ngTemplateOutlet';
'ngTemplateOutletContext': 'ngTemplateOutletContext';
}
, {}, never > ;
static ngTemplateContextGuard<T>(dir: NgIf<T>, ctx: any):
ctx is NgIfContext<Exclude<T, false|0|''|null|undefined>>;
}

export declare class DatePipe {
transform(value: Date|string|number, format?: string, timezone?: string, locale?: string): string
|null;
Expand All @@ -65,8 +84,7 @@ export declare class DatePipe {
}

export declare class CommonModule {
static ɵmod:
ɵɵNgModuleDefWithMeta<CommonModule, [typeof NgForOf, typeof NgIf, typeof DatePipe], never, [
typeof NgForOf, typeof NgIf, typeof DatePipe
]>;
static ɵmod: ɵɵNgModuleDefWithMeta<
CommonModule, [typeof NgForOf, typeof NgIf, typeof DatePipe, typeof NgTemplateOutlet], never,
[typeof NgForOf, typeof NgIf, typeof DatePipe, typeof NgTemplateOutlet]>;
}
7 changes: 7 additions & 0 deletions packages/compiler-cli/src/ngtsc/typecheck/api/checker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,13 @@ export interface TemplateTypeChecker {
*/
getDiagnosticsForComponent(component: ts.ClassDeclaration): ts.Diagnostic[];

/**
* Ensures shims for the whole program are generated. This type of operation would be required by
* operations like "find references" and "refactor/rename" because references may appear in type
* check blocks generated from templates anywhere in the program.
*/
generateAllTypeCheckBlocks(): void;

/**
* Retrieve the top-level node representing the TCB for the given component.
*
Expand Down
4 changes: 4 additions & 0 deletions packages/compiler-cli/src/ngtsc/typecheck/src/checker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,10 @@ export class TemplateTypeCheckerImpl implements TemplateTypeChecker {
return getTemplateMapping(shimSf, positionInShimFile, fileRecord.sourceManager);
}

generateAllTypeCheckBlocks() {
this.ensureAllShimsForAllFiles();
}

/**
* Retrieve type-checking diagnostics from the given `ts.SourceFile` using the most recent
* type-checking program.
Expand Down
2 changes: 2 additions & 0 deletions packages/compiler-cli/src/ngtsc/typecheck/src/tcb_util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,8 @@ export function getTemplateMapping(
if (span === null) {
return null;
}
// TODO(atscott): Consider adding a context span by walking up from `node` until we get a
// different span.
return {sourceLocation, templateSourceMapping: mapping, span};
}

Expand Down
10 changes: 9 additions & 1 deletion packages/language-service/ivy/language_service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {CompilerOptions, ConfigurationHost, readConfiguration} from '@angular/co
import {absoluteFromSourceFile, AbsoluteFsPath} from '@angular/compiler-cli/src/ngtsc/file_system';
import {TypeCheckShimGenerator} from '@angular/compiler-cli/src/ngtsc/typecheck';
import {OptimizeFor, TypeCheckingProgramStrategy} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
import {ReferenceBuilder} from '@angular/language-service/ivy/references';
import * as ts from 'typescript/lib/tsserverlibrary';

import {LanguageServiceAdapter, LSParseConfigHost} from './adapters';
Expand Down Expand Up @@ -80,7 +81,6 @@ export class LanguageService {
}

getQuickInfoAtPosition(fileName: string, position: number): ts.QuickInfo|undefined {
const program = this.strategy.getProgram();
const compiler = this.compilerFactory.getOrCreateWithChangedFile(fileName);
const templateInfo = getTemplateInfoAtPosition(fileName, position, compiler);
if (templateInfo === undefined) {
Expand All @@ -97,6 +97,14 @@ export class LanguageService {
return results;
}

getReferencesAtPosition(fileName: string, position: number): ts.ReferenceEntry[]|undefined {
const compiler = this.compilerFactory.getOrCreateWithChangedFile(fileName);
const results =
new ReferenceBuilder(this.strategy, this.tsLS, compiler).get(fileName, position);
this.compilerFactory.registerLastKnownProgram();
return results;
}

private watchConfigFile(project: ts.server.Project) {
// TODO: Check the case when the project is disposed. An InferredProject
// could be disposed when a tsconfig.json is added to the workspace,
Expand Down
152 changes: 152 additions & 0 deletions packages/language-service/ivy/references.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
/**
* @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 {TmplAstVariable} from '@angular/compiler';
import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
import {absoluteFrom, absoluteFromSourceFile, AbsoluteFsPath} from '@angular/compiler-cli/src/ngtsc/file_system';
import {SymbolKind, TemplateTypeChecker, TypeCheckingProgramStrategy} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
import * as ts from 'typescript';

import {getTargetAtPosition} from './template_target';
import {getTemplateInfoAtPosition, isWithin, TemplateInfo, toTextSpan} from './utils';

export class ReferenceBuilder {
private readonly ttc = this.compiler.getTemplateTypeChecker();

constructor(
private readonly strategy: TypeCheckingProgramStrategy,
private readonly tsLS: ts.LanguageService, private readonly compiler: NgCompiler) {}

get(filePath: string, position: number): ts.ReferenceEntry[]|undefined {
this.ttc.generateAllTypeCheckBlocks();
const templateInfo = getTemplateInfoAtPosition(filePath, position, this.compiler);
return templateInfo !== undefined ?
this.getReferencesAtTemplatePosition(templateInfo, position) :
this.getReferencesAtTypescriptPosition(filePath, position);
}

private getReferencesAtTemplatePosition({template, component}: TemplateInfo, position: number):
ts.ReferenceEntry[]|undefined {
// Find the AST node in the template at the position.
const positionDetails = getTargetAtPosition(template, position);
if (positionDetails === null) {
return undefined;
}

// Get the information about the TCB at the template position.
const symbol = this.ttc.getSymbolOfNode(positionDetails.node, component);
if (symbol === null) {
return undefined;
}
switch (symbol.kind) {
case SymbolKind.Element:
case SymbolKind.Directive:
case SymbolKind.Template:
case SymbolKind.DomBinding:
// References to elements, templates, and directives will be through template references
// (#ref). They shouldn't be used directly for a Language Service reference request.
//
// Dom bindings aren't currently type-checked (see `checkTypeOfDomBindings`) so they don't
// have a shim location and so we cannot find references for them.
//
// TODO(atscott): Consider finding references for elements that are components as well as
// when the position is on an element attribute that directly maps to a directive.
return undefined;
case SymbolKind.Reference: {
const {shimPath, positionInShimFile} = symbol.referenceVarLocation;
return this.getReferencesAtTypescriptPosition(shimPath, positionInShimFile);
}
case SymbolKind.Variable: {
const {positionInShimFile: initializerPosition, shimPath} = symbol.initializerLocation;
const localVarPosition = symbol.localVarLocation.positionInShimFile;
const templateNode = positionDetails.node;

if ((templateNode instanceof TmplAstVariable)) {
if (templateNode.valueSpan !== undefined && isWithin(position, templateNode.valueSpan)) {
// In the valueSpan of the variable, we want to get the reference of the initializer.
return this.getReferencesAtTypescriptPosition(shimPath, initializerPosition);
} else if (isWithin(position, templateNode.keySpan)) {
// In the keySpan of the variable, we want to get the reference of the local variable.
return this.getReferencesAtTypescriptPosition(shimPath, localVarPosition);
} else {
return undefined;
}
}

// If the templateNode is not the `TmplAstVariable`, it must be a usage of the variable
// somewhere in the template.
return this.getReferencesAtTypescriptPosition(shimPath, localVarPosition);
}
case SymbolKind.Input:
case SymbolKind.Output: {
// TODO(atscott): Determine how to handle when the binding maps to several inputs/outputs
const {shimPath, positionInShimFile} = symbol.bindings[0].shimLocation;
return this.getReferencesAtTypescriptPosition(shimPath, positionInShimFile);
}
case SymbolKind.Expression: {
const {shimPath, positionInShimFile} = symbol.shimLocation;
return this.getReferencesAtTypescriptPosition(shimPath, positionInShimFile);
}
}
}

private getReferencesAtTypescriptPosition(fileName: string, position: number):
ts.ReferenceEntry[]|undefined {
const refs = this.tsLS.getReferencesAtPosition(fileName, position);
if (refs === undefined) {
return undefined;
}

const entries: ts.ReferenceEntry[] = [];
for (const ref of refs) {
// TODO(atscott): Determine if a file is a shim file in a more robust way and make the API
// available in an appropriate location.
if (ref.fileName.endsWith('ngtypecheck.ts')) {
const entry = convertToTemplateReferenceEntry(ref, this.ttc);
if (entry !== null) {
entries.push(entry);
}
} else {
entries.push(ref);
}
}
return entries;
}
}

function convertToTemplateReferenceEntry(
shimReferenceEntry: ts.ReferenceEntry,
templateTypeChecker: TemplateTypeChecker): ts.ReferenceEntry|null {
// TODO(atscott): Determine how to consistently resolve paths. i.e. with the project serverHost or
// LSParseConfigHost in the adapter. We should have a better defined way to normalize paths.
const mapping = templateTypeChecker.getTemplateMappingAtShimLocation({
shimPath: absoluteFrom(shimReferenceEntry.fileName),
positionInShimFile: shimReferenceEntry.textSpan.start,
});
if (mapping === null) {
return null;
}
const {templateSourceMapping, span} = mapping;

let templateUrl: AbsoluteFsPath;
if (templateSourceMapping.type === 'direct') {
templateUrl = absoluteFromSourceFile(templateSourceMapping.node.getSourceFile());
} else if (templateSourceMapping.type === 'external') {
templateUrl = absoluteFrom(templateSourceMapping.templateUrl);
} else {
// This includes indirect mappings, which are difficult to map directly to the code location.
// Diagnostics similarly return a synthetic template string for this case rather than a real
// location.
return null;
}

return {
...shimReferenceEntry,
fileName: templateUrl,
textSpan: toTextSpan(span),
};
}
17 changes: 1 addition & 16 deletions packages/language-service/ivy/template_target.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/

import {AbsoluteSourceSpan, ParseSourceSpan} from '@angular/compiler';
import * as e from '@angular/compiler/src/expression_parser/ast'; // e for expression AST
import * as t from '@angular/compiler/src/render3/r3_ast'; // t for template AST

import {isTemplateNode, isTemplateNodeWithKeyAndValue} from './utils';
import {isTemplateNode, isTemplateNodeWithKeyAndValue, isWithin} from './utils';

/**
* Contextual information for a target position within the template.
Expand Down Expand Up @@ -238,17 +237,3 @@ function getSpanIncludingEndTag(ast: t.Node) {
}
return result;
}

function isWithin(position: number, span: AbsoluteSourceSpan|ParseSourceSpan): boolean {
let start: number, end: number;
if (span instanceof ParseSourceSpan) {
start = span.start.offset;
end = span.end.offset;
} else {
start = span.start;
end = span.end;
}
// Note both start and end are inclusive because we want to match conditions
// like ¦start and end¦ where ¦ is the cursor.
return start <= position && position <= end;
}
17 changes: 13 additions & 4 deletions packages/language-service/ivy/test/env.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,17 @@ function writeTsconfig(

export type TestableOptions = StrictTemplateOptions;

export interface TemplateOverwriteResult {
cursor: number;
nodes: TmplAstNode[];
component: ts.ClassDeclaration;
text: string;
}

export class LanguageServiceTestEnvironment {
private constructor(private tsLS: ts.LanguageService, readonly ngLS: LanguageService) {}
private constructor(
private tsLS: ts.LanguageService, readonly ngLS: LanguageService,
readonly host: MockServerHost) {}

static setup(files: TestFile[], options: TestableOptions = {}): LanguageServiceTestEnvironment {
const fs = getFileSystem();
Expand Down Expand Up @@ -97,7 +106,7 @@ export class LanguageServiceTestEnvironment {
const tsLS = project.getLanguageService();

const ngLS = new LanguageService(project, tsLS);
return new LanguageServiceTestEnvironment(tsLS, ngLS);
return new LanguageServiceTestEnvironment(tsLS, ngLS, host);
}

getClass(fileName: AbsoluteFsPath, className: string): ts.ClassDeclaration {
Expand All @@ -110,7 +119,7 @@ export class LanguageServiceTestEnvironment {
}

overrideTemplateWithCursor(fileName: AbsoluteFsPath, className: string, contents: string):
{cursor: number, nodes: TmplAstNode[], component: ts.ClassDeclaration, text: string} {
TemplateOverwriteResult {
const program = this.tsLS.getProgram();
if (program === undefined) {
throw new Error(`Expected to get a ts.Program`);
Expand Down Expand Up @@ -206,7 +215,7 @@ function getClassOrError(sf: ts.SourceFile, name: string): ts.ClassDeclaration {
throw new Error(`Class ${name} not found in file: ${sf.fileName}: ${sf.text}`);
}

function extractCursorInfo(textWithCursor: string): {cursor: number, text: string} {
export function extractCursorInfo(textWithCursor: string): {cursor: number, text: string} {
const cursor = textWithCursor.indexOf('¦');
if (cursor === -1) {
throw new Error(`Expected to find cursor symbol '¦'`);
Expand Down

0 comments on commit 06a782a

Please sign in to comment.