refactor(language-service): Cleanup diagnostics (#32152)

PR Close #32152
This commit is contained in:
Keen Yee Liau 2019-08-15 10:42:00 -07:00 committed by Andrew Kushnir
parent 6a0b1d58ba
commit 69ce1c2d41
1 changed files with 94 additions and 67 deletions

View File

@ -6,42 +6,43 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {NgAnalyzedModules, StaticSymbol} from '@angular/compiler'; import {NgAnalyzedModules} from '@angular/compiler';
import {DiagnosticTemplateInfo, getTemplateExpressionDiagnostics} from '@angular/compiler-cli/src/language_services'; import {getTemplateExpressionDiagnostics} from '@angular/compiler-cli/src/language_services';
import * as ts from 'typescript'; import * as ts from 'typescript';
import {AstResult} from './common'; import {AstResult} from './common';
import {Declarations, Diagnostic, DiagnosticKind, DiagnosticMessageChain, Diagnostics, Span, TemplateSource} from './types'; import * as ng from './types';
import {offsetSpan, spanOf} from './utils'; import {offsetSpan, spanOf} from './utils';
export interface AstProvider { /**
getTemplateAst(template: TemplateSource, fileName: string): AstResult; * Return diagnostic information for the parsed AST of the template.
} * @param template source of the template and class information
* @param ast contains HTML and template AST
export function getTemplateDiagnostics(template: TemplateSource, ast: AstResult): Diagnostics { */
const results: Diagnostics = []; export function getTemplateDiagnostics(
template: ng.TemplateSource, ast: AstResult): ng.Diagnostic[] {
const results: ng.Diagnostic[] = [];
if (ast.parseErrors && ast.parseErrors.length) { if (ast.parseErrors && ast.parseErrors.length) {
results.push(...ast.parseErrors.map<Diagnostic>(e => { results.push(...ast.parseErrors.map(e => {
return { return {
kind: DiagnosticKind.Error, kind: ng.DiagnosticKind.Error,
span: offsetSpan(spanOf(e.span), template.span.start), span: offsetSpan(spanOf(e.span), template.span.start),
message: e.msg, message: e.msg,
}; };
})); }));
} else if (ast.templateAst && ast.htmlAst) { } else if (ast.templateAst && ast.htmlAst) {
const info: DiagnosticTemplateInfo = { const expressionDiagnostics = getTemplateExpressionDiagnostics({
templateAst: ast.templateAst, templateAst: ast.templateAst,
htmlAst: ast.htmlAst, htmlAst: ast.htmlAst,
offset: template.span.start, offset: template.span.start,
query: template.query, query: template.query,
members: template.members, members: template.members,
}; });
const expressionDiagnostics = getTemplateExpressionDiagnostics(info);
results.push(...expressionDiagnostics); results.push(...expressionDiagnostics);
} }
if (ast.errors) { if (ast.errors) {
results.push(...ast.errors.map<Diagnostic>(e => { results.push(...ast.errors.map(e => {
return { return {
kind: e.kind, kind: e.kind,
span: e.span || template.span, span: e.span || template.span,
@ -53,85 +54,111 @@ export function getTemplateDiagnostics(template: TemplateSource, ast: AstResult)
return results; return results;
} }
export function getDeclarationDiagnostics( /**
declarations: Declarations, modules: NgAnalyzedModules): Diagnostics { * Generate an error message that indicates a directive is not part of any
const results: Diagnostics = []; * NgModule.
* @param name class name
* @param isComponent true if directive is an Angular Component
*/
function missingDirective(name: string, isComponent: boolean) {
const type = isComponent ? 'Component' : 'Directive';
return `${type} '${name}' is not included in a module and will not be ` +
'available inside a template. Consider adding it to a NgModule declaration.';
}
export function getDeclarationDiagnostics(
declarations: ng.Declaration[], modules: NgAnalyzedModules): ng.Diagnostic[] {
const directives = new Set<ng.StaticSymbol>();
for (const ngModule of modules.ngModules) {
for (const directive of ngModule.declaredDirectives) {
directives.add(directive.reference);
}
}
const results: ng.Diagnostic[] = [];
let directives: Set<StaticSymbol>|undefined = undefined;
for (const declaration of declarations) { for (const declaration of declarations) {
const report = (message: string | DiagnosticMessageChain, span?: Span) => { const {errors, metadata, type, declarationSpan} = declaration;
results.push(<Diagnostic>{ for (const error of errors) {
kind: DiagnosticKind.Error, results.push({
span: span || declaration.declarationSpan, message kind: ng.DiagnosticKind.Error,
message: error.message,
span: error.span,
}); });
};
for (const error of declaration.errors) {
report(error.message, error.span);
} }
if (declaration.metadata) { if (!metadata) {
if (declaration.metadata.isComponent) { continue; // declaration is not an Angular directive
}
if (metadata.isComponent) {
if (!modules.ngModuleByPipeOrDirective.has(declaration.type)) { if (!modules.ngModuleByPipeOrDirective.has(declaration.type)) {
report( results.push({
`Component '${declaration.type.name}' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration`); kind: ng.DiagnosticKind.Error,
} message: missingDirective(type.name, metadata.isComponent),
const {template, templateUrl} = declaration.metadata.template !; span: declarationSpan,
if (template === null && !templateUrl) {
report(`Component '${declaration.type.name}' must have a template or templateUrl`);
} else if (template && templateUrl) {
report(
`Component '${declaration.type.name}' must not have both template and templateUrl`);
}
} else {
if (!directives) {
directives = new Set();
modules.ngModules.forEach(module => {
module.declaredDirectives.forEach(
directive => { directives !.add(directive.reference); });
}); });
} }
if (!directives.has(declaration.type)) { const {template, templateUrl} = metadata.template !;
report( if (template === null && !templateUrl) {
`Directive '${declaration.type.name}' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration`); results.push({
} kind: ng.DiagnosticKind.Error,
message: `Component '${type.name}' must have a template or templateUrl`,
span: declarationSpan,
});
} else if (template && templateUrl) {
results.push({
kind: ng.DiagnosticKind.Error,
message: `Component '${type.name}' must not have both template and templateUrl`,
span: declarationSpan,
});
} }
} else if (!directives.has(declaration.type)) {
results.push({
kind: ng.DiagnosticKind.Error,
message: missingDirective(type.name, metadata.isComponent),
span: declarationSpan,
});
} }
} }
return results; return results;
} }
function diagnosticChainToDiagnosticChain(chain: DiagnosticMessageChain): /**
ts.DiagnosticMessageChain { * Return a recursive data structure that chains diagnostic messages.
* @param chain
*/
function chainDiagnostics(chain: ng.DiagnosticMessageChain): ts.DiagnosticMessageChain {
return { return {
messageText: chain.message, messageText: chain.message,
category: ts.DiagnosticCategory.Error, category: ts.DiagnosticCategory.Error,
code: 0, code: 0,
next: chain.next ? diagnosticChainToDiagnosticChain(chain.next) : undefined next: chain.next ? chainDiagnostics(chain.next) : undefined
}; };
} }
function diagnosticMessageToDiagnosticMessageText(message: string | DiagnosticMessageChain): string| /**
ts.DiagnosticMessageChain { * Convert ng.Diagnostic to ts.Diagnostic.
if (typeof message === 'string') { * @param d diagnostic
return message; * @param file
} */
return diagnosticChainToDiagnosticChain(message);
}
export function ngDiagnosticToTsDiagnostic( export function ngDiagnosticToTsDiagnostic(
d: Diagnostic, file: ts.SourceFile | undefined): ts.Diagnostic { d: ng.Diagnostic, file: ts.SourceFile | undefined): ts.Diagnostic {
return { return {
file, file,
start: d.span.start, start: d.span.start,
length: d.span.end - d.span.start, length: d.span.end - d.span.start,
messageText: diagnosticMessageToDiagnosticMessageText(d.message), messageText: typeof d.message === 'string' ? d.message : chainDiagnostics(d.message),
category: ts.DiagnosticCategory.Error, category: ts.DiagnosticCategory.Error,
code: 0, code: 0,
source: 'ng', source: 'ng',
}; };
} }
export function uniqueBySpan<T extends{span: Span}>(elements: T[]): T[] { /**
* Return elements filtered by unique span.
* @param elements
*/
export function uniqueBySpan<T extends{span: ng.Span}>(elements: T[]): T[] {
const result: T[] = []; const result: T[] = [];
const map = new Map<number, Set<number>>(); const map = new Map<number, Set<number>>();
for (const element of elements) { for (const element of elements) {