refactor(language-service): Cleanup diagnostics (#32152)
PR Close #32152
This commit is contained in:
parent
6a0b1d58ba
commit
69ce1c2d41
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue