2020-09-30 11:47:36 -04:00
|
|
|
/**
|
|
|
|
* @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
|
|
|
|
*/
|
|
|
|
|
2020-10-12 15:48:56 -04:00
|
|
|
import {AST, TmplAstBoundAttribute, TmplAstBoundEvent, TmplAstElement, TmplAstNode, TmplAstTemplate, TmplAstTextAttribute} from '@angular/compiler';
|
2020-09-30 11:47:36 -04:00
|
|
|
import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
|
2020-10-21 14:01:10 -04:00
|
|
|
import {isExternalResource} from '@angular/compiler-cli/src/ngtsc/metadata';
|
2020-10-09 13:58:16 -04:00
|
|
|
import {DirectiveSymbol, DomBindingSymbol, ElementSymbol, ShimLocation, Symbol, SymbolKind, TemplateSymbol} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
|
2020-09-30 11:47:36 -04:00
|
|
|
import * as ts from 'typescript';
|
2020-10-12 15:51:43 -04:00
|
|
|
|
2020-10-21 14:01:10 -04:00
|
|
|
import {getTargetAtPosition} from './template_target';
|
|
|
|
import {findTightestNode, getParentClassDeclaration} from './ts_utils';
|
|
|
|
import {flatMap, getDirectiveMatchesForAttribute, getDirectiveMatchesForElementTag, getTemplateInfoAtPosition, getTextSpanOfNode, isDollarEvent, isTypeScriptFile, TemplateInfo, toTextSpan} from './utils';
|
2020-10-12 15:51:43 -04:00
|
|
|
|
2020-10-02 16:54:18 -04:00
|
|
|
interface DefinitionMeta {
|
|
|
|
node: AST|TmplAstNode;
|
2020-10-13 13:28:15 -04:00
|
|
|
parent: AST|TmplAstNode|null;
|
2020-10-02 16:54:18 -04:00
|
|
|
symbol: Symbol;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface HasShimLocation {
|
|
|
|
shimLocation: ShimLocation;
|
|
|
|
}
|
2020-09-30 11:47:36 -04:00
|
|
|
|
|
|
|
export class DefinitionBuilder {
|
2020-10-21 14:01:10 -04:00
|
|
|
constructor(private readonly tsLS: ts.LanguageService, private readonly compiler: NgCompiler) {}
|
2020-09-30 11:47:36 -04:00
|
|
|
|
|
|
|
getDefinitionAndBoundSpan(fileName: string, position: number): ts.DefinitionInfoAndBoundSpan
|
|
|
|
|undefined {
|
|
|
|
const templateInfo = getTemplateInfoAtPosition(fileName, position, this.compiler);
|
|
|
|
if (templateInfo === undefined) {
|
2020-10-09 14:22:03 -04:00
|
|
|
// We were unable to get a template at the given position. If we are in a TS file, instead
|
|
|
|
// attempt to get an Angular definition at the location inside a TS file (examples of this
|
|
|
|
// would be templateUrl or a url in styleUrls).
|
|
|
|
if (!isTypeScriptFile(fileName)) {
|
|
|
|
return;
|
|
|
|
}
|
2020-10-21 14:01:10 -04:00
|
|
|
return getDefinitionForExpressionAtPosition(fileName, position, this.compiler);
|
2020-09-30 11:47:36 -04:00
|
|
|
}
|
2020-10-02 16:54:18 -04:00
|
|
|
const definitionMeta = this.getDefinitionMetaAtPosition(templateInfo, position);
|
2020-09-30 11:47:36 -04:00
|
|
|
// The `$event` of event handlers would point to the $event parameter in the shim file, as in
|
|
|
|
// `_outputHelper(_t3["x"]).subscribe(function ($event): any { $event }) ;`
|
|
|
|
// If we wanted to return something for this, it would be more appropriate for something like
|
|
|
|
// `getTypeDefinition`.
|
2020-10-02 16:54:18 -04:00
|
|
|
if (definitionMeta === undefined || isDollarEvent(definitionMeta.node)) {
|
2020-09-30 11:47:36 -04:00
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
2020-10-12 15:48:56 -04:00
|
|
|
const definitions = this.getDefinitionsForSymbol({...definitionMeta, ...templateInfo});
|
2020-10-02 16:54:18 -04:00
|
|
|
return {definitions, textSpan: getTextSpanOfNode(definitionMeta.node)};
|
2020-09-30 11:47:36 -04:00
|
|
|
}
|
|
|
|
|
2020-10-13 13:28:15 -04:00
|
|
|
private getDefinitionsForSymbol({symbol, node, parent, component}: DefinitionMeta&
|
2020-10-12 15:48:56 -04:00
|
|
|
TemplateInfo): readonly ts.DefinitionInfo[]|undefined {
|
2020-09-30 11:47:36 -04:00
|
|
|
switch (symbol.kind) {
|
|
|
|
case SymbolKind.Directive:
|
|
|
|
case SymbolKind.Element:
|
|
|
|
case SymbolKind.Template:
|
|
|
|
case SymbolKind.DomBinding:
|
2020-10-09 13:58:16 -04:00
|
|
|
// Though it is generally more appropriate for the above symbol definitions to be
|
|
|
|
// associated with "type definitions" since the location in the template is the
|
|
|
|
// actual definition location, the better user experience would be to allow
|
|
|
|
// LS users to "go to definition" on an item in the template that maps to a class and be
|
|
|
|
// taken to the directive or HTML class.
|
|
|
|
return this.getTypeDefinitionsForTemplateInstance(symbol, node);
|
2020-11-03 19:49:30 -05:00
|
|
|
case SymbolKind.Pipe: {
|
|
|
|
if (symbol.tsSymbol !== null) {
|
|
|
|
return this.getDefinitionsForSymbols(symbol);
|
|
|
|
} else {
|
|
|
|
// If there is no `ts.Symbol` for the pipe transform, we want to return the
|
|
|
|
// type definition (the pipe class).
|
|
|
|
return this.getTypeDefinitionsForSymbols(symbol.classSymbol);
|
|
|
|
}
|
|
|
|
}
|
2020-09-30 11:47:36 -04:00
|
|
|
case SymbolKind.Output:
|
2020-10-12 15:48:56 -04:00
|
|
|
case SymbolKind.Input: {
|
|
|
|
const bindingDefs = this.getDefinitionsForSymbols(...symbol.bindings);
|
|
|
|
// Also attempt to get directive matches for the input name. If there is a directive that
|
|
|
|
// has the input name as part of the selector, we want to return that as well.
|
2020-10-13 13:28:15 -04:00
|
|
|
const directiveDefs = this.getDirectiveTypeDefsForBindingNode(node, parent, component);
|
2020-10-12 15:48:56 -04:00
|
|
|
return [...bindingDefs, ...directiveDefs];
|
|
|
|
}
|
2020-09-30 11:47:36 -04:00
|
|
|
case SymbolKind.Variable:
|
|
|
|
case SymbolKind.Reference: {
|
|
|
|
const definitions: ts.DefinitionInfo[] = [];
|
|
|
|
if (symbol.declaration !== node) {
|
|
|
|
definitions.push({
|
|
|
|
name: symbol.declaration.name,
|
|
|
|
containerName: '',
|
|
|
|
containerKind: ts.ScriptElementKind.unknown,
|
|
|
|
kind: ts.ScriptElementKind.variableElement,
|
|
|
|
textSpan: getTextSpanOfNode(symbol.declaration),
|
|
|
|
contextSpan: toTextSpan(symbol.declaration.sourceSpan),
|
|
|
|
fileName: symbol.declaration.sourceSpan.start.file.url,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (symbol.kind === SymbolKind.Variable) {
|
2020-11-16 14:22:11 -05:00
|
|
|
definitions.push(
|
|
|
|
...this.getDefinitionsForSymbols({shimLocation: symbol.initializerLocation}));
|
2020-09-30 11:47:36 -04:00
|
|
|
}
|
|
|
|
return definitions;
|
|
|
|
}
|
|
|
|
case SymbolKind.Expression: {
|
2020-10-02 16:54:18 -04:00
|
|
|
return this.getDefinitionsForSymbols(symbol);
|
2020-09-30 11:47:36 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-02 16:54:18 -04:00
|
|
|
private getDefinitionsForSymbols(...symbols: HasShimLocation[]): ts.DefinitionInfo[] {
|
|
|
|
return flatMap(symbols, ({shimLocation}) => {
|
|
|
|
const {shimPath, positionInShimFile} = shimLocation;
|
|
|
|
return this.tsLS.getDefinitionAtPosition(shimPath, positionInShimFile) ?? [];
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
getTypeDefinitionsAtPosition(fileName: string, position: number):
|
|
|
|
readonly ts.DefinitionInfo[]|undefined {
|
|
|
|
const templateInfo = getTemplateInfoAtPosition(fileName, position, this.compiler);
|
|
|
|
if (templateInfo === undefined) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const definitionMeta = this.getDefinitionMetaAtPosition(templateInfo, position);
|
|
|
|
if (definitionMeta === undefined) {
|
|
|
|
return undefined;
|
2020-09-30 11:47:36 -04:00
|
|
|
}
|
2020-10-02 16:54:18 -04:00
|
|
|
|
|
|
|
const {symbol, node} = definitionMeta;
|
2020-10-09 13:58:16 -04:00
|
|
|
switch (symbol.kind) {
|
|
|
|
case SymbolKind.Directive:
|
|
|
|
case SymbolKind.DomBinding:
|
|
|
|
case SymbolKind.Element:
|
|
|
|
case SymbolKind.Template:
|
|
|
|
return this.getTypeDefinitionsForTemplateInstance(symbol, node);
|
|
|
|
case SymbolKind.Output:
|
2020-10-12 15:48:56 -04:00
|
|
|
case SymbolKind.Input: {
|
|
|
|
const bindingDefs = this.getTypeDefinitionsForSymbols(...symbol.bindings);
|
|
|
|
// Also attempt to get directive matches for the input name. If there is a directive that
|
|
|
|
// has the input name as part of the selector, we want to return that as well.
|
|
|
|
const directiveDefs = this.getDirectiveTypeDefsForBindingNode(
|
2020-10-13 13:28:15 -04:00
|
|
|
node, definitionMeta.parent, templateInfo.component);
|
2020-10-12 15:48:56 -04:00
|
|
|
return [...bindingDefs, ...directiveDefs];
|
|
|
|
}
|
2020-11-03 19:49:30 -05:00
|
|
|
case SymbolKind.Pipe: {
|
|
|
|
if (symbol.tsSymbol !== null) {
|
|
|
|
return this.getTypeDefinitionsForSymbols(symbol);
|
|
|
|
} else {
|
|
|
|
// If there is no `ts.Symbol` for the pipe transform, we want to return the
|
|
|
|
// type definition (the pipe class).
|
|
|
|
return this.getTypeDefinitionsForSymbols(symbol.classSymbol);
|
|
|
|
}
|
|
|
|
}
|
2020-10-09 13:58:16 -04:00
|
|
|
case SymbolKind.Reference:
|
2020-11-16 14:22:11 -05:00
|
|
|
return this.getTypeDefinitionsForSymbols({shimLocation: symbol.targetLocation});
|
2020-10-09 13:58:16 -04:00
|
|
|
case SymbolKind.Expression:
|
|
|
|
return this.getTypeDefinitionsForSymbols(symbol);
|
2020-11-16 14:22:11 -05:00
|
|
|
case SymbolKind.Variable:
|
|
|
|
return this.getTypeDefinitionsForSymbols({shimLocation: symbol.initializerLocation});
|
2020-10-09 13:58:16 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private getTypeDefinitionsForTemplateInstance(
|
|
|
|
symbol: TemplateSymbol|ElementSymbol|DomBindingSymbol|DirectiveSymbol,
|
|
|
|
node: AST|TmplAstNode): ts.DefinitionInfo[] {
|
2020-10-02 16:54:18 -04:00
|
|
|
switch (symbol.kind) {
|
|
|
|
case SymbolKind.Template: {
|
|
|
|
const matches = getDirectiveMatchesForElementTag(symbol.templateNode, symbol.directives);
|
|
|
|
return this.getTypeDefinitionsForSymbols(...matches);
|
|
|
|
}
|
|
|
|
case SymbolKind.Element: {
|
2020-10-09 13:58:16 -04:00
|
|
|
const matches = getDirectiveMatchesForElementTag(symbol.templateNode, symbol.directives);
|
2020-10-02 16:54:18 -04:00
|
|
|
// If one of the directive matches is a component, we should not include the native element
|
|
|
|
// in the results because it is replaced by the component.
|
|
|
|
return Array.from(matches).some(dir => dir.isComponent) ?
|
|
|
|
this.getTypeDefinitionsForSymbols(...matches) :
|
|
|
|
this.getTypeDefinitionsForSymbols(...matches, symbol);
|
|
|
|
}
|
|
|
|
case SymbolKind.DomBinding: {
|
|
|
|
if (!(node instanceof TmplAstTextAttribute)) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
const dirs = getDirectiveMatchesForAttribute(
|
|
|
|
node.name, symbol.host.templateNode, symbol.host.directives);
|
|
|
|
return this.getTypeDefinitionsForSymbols(...dirs);
|
|
|
|
}
|
|
|
|
case SymbolKind.Directive:
|
|
|
|
return this.getTypeDefinitionsForSymbols(symbol);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-12 15:48:56 -04:00
|
|
|
private getDirectiveTypeDefsForBindingNode(
|
2020-10-13 13:28:15 -04:00
|
|
|
node: TmplAstNode|AST, parent: TmplAstNode|AST|null, component: ts.ClassDeclaration) {
|
2020-10-12 15:48:56 -04:00
|
|
|
if (!(node instanceof TmplAstBoundAttribute) && !(node instanceof TmplAstTextAttribute) &&
|
|
|
|
!(node instanceof TmplAstBoundEvent)) {
|
|
|
|
return [];
|
|
|
|
}
|
2020-10-13 13:28:15 -04:00
|
|
|
if (parent === null ||
|
|
|
|
!(parent instanceof TmplAstTemplate || parent instanceof TmplAstElement)) {
|
2020-10-12 15:48:56 -04:00
|
|
|
return [];
|
|
|
|
}
|
|
|
|
const templateOrElementSymbol =
|
|
|
|
this.compiler.getTemplateTypeChecker().getSymbolOfNode(parent, component);
|
|
|
|
if (templateOrElementSymbol === null ||
|
|
|
|
(templateOrElementSymbol.kind !== SymbolKind.Template &&
|
|
|
|
templateOrElementSymbol.kind !== SymbolKind.Element)) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
const dirs =
|
|
|
|
getDirectiveMatchesForAttribute(node.name, parent, templateOrElementSymbol.directives);
|
|
|
|
return this.getTypeDefinitionsForSymbols(...dirs);
|
|
|
|
}
|
|
|
|
|
2020-10-02 16:54:18 -04:00
|
|
|
private getTypeDefinitionsForSymbols(...symbols: HasShimLocation[]): ts.DefinitionInfo[] {
|
|
|
|
return flatMap(symbols, ({shimLocation}) => {
|
|
|
|
const {shimPath, positionInShimFile} = shimLocation;
|
|
|
|
return this.tsLS.getTypeDefinitionAtPosition(shimPath, positionInShimFile) ?? [];
|
|
|
|
});
|
2020-09-30 11:47:36 -04:00
|
|
|
}
|
|
|
|
|
2020-10-02 16:54:18 -04:00
|
|
|
private getDefinitionMetaAtPosition({template, component}: TemplateInfo, position: number):
|
|
|
|
DefinitionMeta|undefined {
|
2020-10-13 13:28:15 -04:00
|
|
|
const target = getTargetAtPosition(template, position);
|
|
|
|
if (target === null) {
|
|
|
|
return undefined;
|
2020-10-02 16:54:18 -04:00
|
|
|
}
|
2020-11-18 17:07:30 -05:00
|
|
|
const {nodeInContext, parent} = target;
|
2020-10-02 16:54:18 -04:00
|
|
|
|
2020-11-18 17:07:30 -05:00
|
|
|
const symbol =
|
|
|
|
this.compiler.getTemplateTypeChecker().getSymbolOfNode(nodeInContext.node, component);
|
2020-10-02 16:54:18 -04:00
|
|
|
if (symbol === null) {
|
2020-10-13 13:28:15 -04:00
|
|
|
return undefined;
|
2020-10-02 16:54:18 -04:00
|
|
|
}
|
2020-11-18 17:07:30 -05:00
|
|
|
return {node: nodeInContext.node, parent, symbol};
|
2020-09-30 11:47:36 -04:00
|
|
|
}
|
|
|
|
}
|
2020-10-21 14:01:10 -04:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Gets an Angular-specific definition in a TypeScript source file.
|
|
|
|
*/
|
|
|
|
function getDefinitionForExpressionAtPosition(
|
|
|
|
fileName: string, position: number, compiler: NgCompiler): ts.DefinitionInfoAndBoundSpan|
|
|
|
|
undefined {
|
|
|
|
const sf = compiler.getNextProgram().getSourceFile(fileName);
|
|
|
|
if (sf === undefined) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const expression = findTightestNode(sf, position);
|
|
|
|
if (expression === undefined) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const classDeclaration = getParentClassDeclaration(expression);
|
|
|
|
if (classDeclaration === undefined) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const componentResources = compiler.getComponentResources(classDeclaration);
|
|
|
|
if (componentResources === null) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const allResources = [...componentResources.styles, componentResources.template];
|
|
|
|
|
|
|
|
const resourceForExpression = allResources.find(resource => resource.expression === expression);
|
|
|
|
if (resourceForExpression === undefined || !isExternalResource(resourceForExpression)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const templateDefinitions: ts.DefinitionInfo[] = [{
|
|
|
|
kind: ts.ScriptElementKind.externalModuleName,
|
|
|
|
name: resourceForExpression.path,
|
|
|
|
containerKind: ts.ScriptElementKind.unknown,
|
|
|
|
containerName: '',
|
|
|
|
// Reading the template is expensive, so don't provide a preview.
|
|
|
|
// TODO(ayazhafiz): Consider providing an actual span:
|
|
|
|
// 1. We're likely to read the template anyway
|
|
|
|
// 2. We could show just the first 100 chars or so
|
|
|
|
textSpan: {start: 0, length: 0},
|
|
|
|
fileName: resourceForExpression.path,
|
|
|
|
}];
|
|
|
|
|
|
|
|
return {
|
|
|
|
definitions: templateDefinitions,
|
|
|
|
textSpan: {
|
|
|
|
// Exclude opening and closing quotes in the url span.
|
|
|
|
start: expression.getStart() + 1,
|
|
|
|
length: expression.getWidth() - 2,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|