angular-cn/packages/compiler-cli/ngcc/test/analysis/ngcc_trait_compiler_spec.ts
JoostK fed6a7ce7d perf(compiler-cli): detect semantic changes and their effect on an incremental rebuild (#40947)
In Angular programs, changing a file may require other files to be
emitted as well due to implicit NgModule dependencies. For example, if
the selector of a directive is changed then all components that have
that directive in their compilation scope need to be recompiled, as the
change of selector may affect the directive matching results.

Until now, the compiler solved this problem using a single dependency
graph. The implicit NgModule dependencies were represented in this
graph, such that a changed file would correctly also cause other files
to be re-emitted. This approach is limited in a few ways:

1. The file dependency graph is used to determine whether it is safe to
   reuse the analysis data of an Angular decorated class. This analysis
   data is invariant to unrelated changes to the NgModule scope, but
   because the single dependency graph also tracked the implicit
   NgModule dependencies the compiler had to consider analysis data as
   stale far more often than necessary.
2. It is typical for a change to e.g. a directive to not affect its
   public API—its selector, inputs, outputs, or exportAs clause—in which
   case there is no need to re-emit all declarations in scope, as their
   compilation output wouldn't have changed.

This commit implements a mechanism by which the compiler is able to
determine the impact of a change by comparing it to the prior
compilation. To achieve this, a new graph is maintained that tracks all
public API information of all Angular decorated symbols. During an
incremental compilation this information is compared to the information
that was captured in the most recently succeeded compilation. This
determines the exact impact of the changes to the public API, which
is then used to determine which files need to be re-emitted.

Note that the file dependency graph remains, as it is still used to
track the dependencies of analysis data. This graph does no longer track
the implicit NgModule dependencies, which allows for better reuse of
analysis data.

These changes also fix a bug where template type-checking would fail to
incorporate changes made to a transitive base class of a
directive/component. This used to be a problem because transitive base
classes were not recorded as a transitive dependency in the file
dependency graph, such that prior type-check blocks would erroneously
be reused.

This commit also fixes an incorrectness where a change to a declaration
in NgModule `A` would not cause the declarations in NgModules that
import from NgModule `A` to be re-emitted. This was intentionally
incorrect as otherwise the performance of incremental rebuilds would
have been far worse. This is no longer a concern, as the compiler is now
able to only re-emit when actually necessary.

Fixes #34867
Fixes #40635
Closes #40728

PR Close #40947
2021-03-08 08:41:19 -08:00

357 lines
15 KiB
TypeScript

/**
* @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 {ErrorCode, makeDiagnostic, ngErrorCode} from '../../../src/ngtsc/diagnostics';
import {absoluteFrom} from '../../../src/ngtsc/file_system';
import {runInEachFileSystem} from '../../../src/ngtsc/file_system/testing';
import {SemanticSymbol} from '../../../src/ngtsc/incremental/semantic_graph';
import {MockLogger} from '../../../src/ngtsc/logging/testing';
import {ClassDeclaration, Decorator, isNamedClassDeclaration} from '../../../src/ngtsc/reflection';
import {getDeclaration, loadTestFiles} from '../../../src/ngtsc/testing';
import {AnalysisOutput, CompileResult, DecoratorHandler, DetectResult, HandlerPrecedence, TraitState} from '../../../src/ngtsc/transform';
import {NgccTraitCompiler} from '../../src/analysis/ngcc_trait_compiler';
import {Esm2015ReflectionHost} from '../../src/host/esm2015_host';
import {createComponentDecorator} from '../../src/migrations/utils';
import {EntryPointBundle} from '../../src/packages/entry_point_bundle';
import {makeTestEntryPointBundle} from '../helpers/utils';
import {getTraitDiagnostics} from '../host/util';
runInEachFileSystem(() => {
describe('NgccTraitCompiler', () => {
let _: typeof absoluteFrom;
let mockClazz: any;
let injectedDecorator: any = {name: 'InjectedDecorator'};
beforeEach(() => {
_ = absoluteFrom;
const mockSourceFile: any = {
fileName: _('/node_modules/some-package/entry-point/test-file.js'),
};
mockClazz = {
name: {text: 'MockClazz'},
getSourceFile: () => mockSourceFile,
getStart: () => 0,
getWidth: () => 0,
};
});
function createCompiler({entryPoint, handlers}: {
entryPoint: EntryPointBundle;
handlers: DecoratorHandler<unknown, unknown, SemanticSymbol|null, unknown>[]
}) {
const reflectionHost = new Esm2015ReflectionHost(new MockLogger(), false, entryPoint.src);
return new NgccTraitCompiler(handlers, reflectionHost);
}
describe('injectSyntheticDecorator()', () => {
it('should call `detect()` on each of the provided handlers', () => {
const log: string[] = [];
const handler1 = new TestHandler('handler1', log);
const handler2 = new TestHandler('handler2', log);
loadTestFiles([{name: _('/node_modules/test/index.js'), contents: ``}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler = createCompiler({entryPoint, handlers: [handler1, handler2]});
compiler.injectSyntheticDecorator(mockClazz, injectedDecorator);
expect(log).toEqual([
`handler1:detect:MockClazz:InjectedDecorator`,
`handler2:detect:MockClazz:InjectedDecorator`,
]);
});
it('should call `analyze()` on each of the provided handlers whose `detect()` call returns a result',
() => {
const log: string[] = [];
const handler1 = new TestHandler('handler1', log);
const handler2 = new AlwaysDetectHandler('handler2', log);
const handler3 = new TestHandler('handler3', log);
loadTestFiles([{name: _('/node_modules/test/index.js'), contents: ``}]);
const entryPoint = makeTestEntryPointBundle(
'test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler = createCompiler({entryPoint, handlers: [handler1, handler2, handler3]});
compiler.injectSyntheticDecorator(mockClazz, injectedDecorator);
expect(log).toEqual([
`handler1:detect:MockClazz:InjectedDecorator`,
`handler2:detect:MockClazz:InjectedDecorator`,
`handler3:detect:MockClazz:InjectedDecorator`,
'handler2:analyze:MockClazz',
]);
});
it('should inject a new class record into the compilation', () => {
const injectedHandler =
new DetectDecoratorHandler('InjectedDecorator', HandlerPrecedence.WEAK);
loadTestFiles([{name: _('/node_modules/test/index.js'), contents: ``}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler = createCompiler({entryPoint, handlers: [injectedHandler]});
compiler.injectSyntheticDecorator(mockClazz, injectedDecorator);
const record = compiler.recordFor(mockClazz);
expect(record).toBeDefined();
expect(record!.traits.length).toBe(1);
});
it('should add a new trait to an existing class record', () => {
const directiveHandler = new DetectDecoratorHandler('Directive', HandlerPrecedence.WEAK);
const injectedHandler =
new DetectDecoratorHandler('InjectedDecorator', HandlerPrecedence.WEAK);
loadTestFiles([{
name: _('/node_modules/test/index.js'),
contents: `
import {Directive} from '@angular/core';
export class MyClass {};
MyClass.decorators = [{ type: Directive }];
`
}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler =
createCompiler({entryPoint, handlers: [directiveHandler, injectedHandler]});
const myClass = getDeclaration(
entryPoint.src.program, _('/node_modules/test/index.js'), 'MyClass',
isNamedClassDeclaration);
compiler.analyzeFile(entryPoint.src.file);
compiler.injectSyntheticDecorator(myClass, injectedDecorator);
const record = compiler.recordFor(myClass)!;
expect(record).toBeDefined();
expect(record.traits.length).toBe(2);
expect(record.traits[0].detected.decorator!.name).toBe('Directive');
expect(record.traits[1].detected.decorator!.name).toBe('InjectedDecorator');
});
it('should not add a weak handler when a primary handler already exists', () => {
const directiveHandler = new DetectDecoratorHandler('Directive', HandlerPrecedence.PRIMARY);
const injectedHandler =
new DetectDecoratorHandler('InjectedDecorator', HandlerPrecedence.WEAK);
loadTestFiles([{
name: _('/node_modules/test/index.js'),
contents: `
import {Directive} from '@angular/core';
export class MyClass {};
MyClass.decorators = [{ type: Directive }];
`
}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler =
createCompiler({entryPoint, handlers: [directiveHandler, injectedHandler]});
const myClass = getDeclaration(
entryPoint.src.program, _('/node_modules/test/index.js'), 'MyClass',
isNamedClassDeclaration);
compiler.analyzeFile(entryPoint.src.file);
compiler.injectSyntheticDecorator(myClass, injectedDecorator);
const record = compiler.recordFor(myClass)!;
expect(record).toBeDefined();
expect(record.traits.length).toBe(1);
expect(record.traits[0].detected.decorator!.name).toBe('Directive');
});
it('should replace an existing weak handler when injecting a primary handler', () => {
const directiveHandler = new DetectDecoratorHandler('Directive', HandlerPrecedence.WEAK);
const injectedHandler =
new DetectDecoratorHandler('InjectedDecorator', HandlerPrecedence.PRIMARY);
loadTestFiles([{
name: _('/node_modules/test/index.js'),
contents: `
import {Directive} from '@angular/core';
export class MyClass {};
MyClass.decorators = [{ type: Directive }];
`
}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler =
createCompiler({entryPoint, handlers: [directiveHandler, injectedHandler]});
const myClass = getDeclaration(
entryPoint.src.program, _('/node_modules/test/index.js'), 'MyClass',
isNamedClassDeclaration);
compiler.analyzeFile(entryPoint.src.file);
compiler.injectSyntheticDecorator(myClass, injectedDecorator);
const record = compiler.recordFor(myClass)!;
expect(record).toBeDefined();
expect(record.traits.length).toBe(1);
expect(record.traits[0].detected.decorator!.name).toBe('InjectedDecorator');
});
it('should produce an error when a primary handler is added when a primary handler is already present',
() => {
const directiveHandler =
new DetectDecoratorHandler('Directive', HandlerPrecedence.PRIMARY);
const injectedHandler =
new DetectDecoratorHandler('InjectedDecorator', HandlerPrecedence.PRIMARY);
loadTestFiles([{
name: _('/node_modules/test/index.js'),
contents: `
import {Directive} from '@angular/core';
export class MyClass {};
MyClass.decorators = [{ type: Directive }];
`
}]);
const entryPoint = makeTestEntryPointBundle(
'test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler =
createCompiler({entryPoint, handlers: [directiveHandler, injectedHandler]});
const myClass = getDeclaration(
entryPoint.src.program, _('/node_modules/test/index.js'), 'MyClass',
isNamedClassDeclaration);
compiler.analyzeFile(entryPoint.src.file);
compiler.injectSyntheticDecorator(myClass, injectedDecorator);
const record = compiler.recordFor(myClass)!;
expect(record).toBeDefined();
expect(record.metaDiagnostics).toBeDefined();
expect(record.metaDiagnostics!.length).toBe(1);
expect(record.metaDiagnostics![0].code).toBe(ngErrorCode(ErrorCode.DECORATOR_COLLISION));
expect(record.traits.length).toBe(0);
});
it('should report diagnostics from handlers', () => {
const log: string[] = [];
const handler = new DiagnosticProducingHandler('handler', log);
loadTestFiles([{name: _('/node_modules/test/index.js'), contents: ``}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler = createCompiler({entryPoint, handlers: [handler]});
const decorator = createComponentDecorator(mockClazz, {selector: 'comp', exportAs: null});
compiler.injectSyntheticDecorator(mockClazz, decorator);
const record = compiler.recordFor(mockClazz)!;
const migratedTrait = record.traits[0];
const diagnostics = getTraitDiagnostics(migratedTrait);
if (diagnostics === null) {
return fail('Expected migrated class trait to be in an error state');
}
expect(diagnostics.length).toBe(1);
expect(diagnostics[0].messageText).toEqual(`test diagnostic`);
});
});
describe('getAllDecorators', () => {
it('should be null for classes without decorators', () => {
loadTestFiles(
[{name: _('/node_modules/test/index.js'), contents: `export class MyClass {};`}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler = createCompiler({entryPoint, handlers: []});
const myClass = getDeclaration(
entryPoint.src.program, _('/node_modules/test/index.js'), 'MyClass',
isNamedClassDeclaration);
const decorators = compiler.getAllDecorators(myClass);
expect(decorators).toBeNull();
});
it('should include injected decorators', () => {
const directiveHandler = new DetectDecoratorHandler('Directive', HandlerPrecedence.WEAK);
const injectedHandler =
new DetectDecoratorHandler('InjectedDecorator', HandlerPrecedence.WEAK);
loadTestFiles([{
name: _('/node_modules/test/index.js'),
contents: `
import {Directive} from '@angular/core';
export class MyClass {};
MyClass.decorators = [{ type: Directive }];
`
}]);
const entryPoint =
makeTestEntryPointBundle('test', 'esm2015', false, [_('/node_modules/test/index.js')]);
const compiler =
createCompiler({entryPoint, handlers: [directiveHandler, injectedHandler]});
const myClass = getDeclaration(
entryPoint.src.program, _('/node_modules/test/index.js'), 'MyClass',
isNamedClassDeclaration);
compiler.analyzeFile(entryPoint.src.file);
compiler.injectSyntheticDecorator(myClass, injectedDecorator);
const decorators = compiler.getAllDecorators(myClass)!;
expect(decorators.length).toBe(2);
expect(decorators[0].name).toBe('Directive');
expect(decorators[1].name).toBe('InjectedDecorator');
});
});
});
});
class TestHandler implements DecoratorHandler<unknown, unknown, null, unknown> {
constructor(readonly name: string, protected log: string[]) {}
precedence = HandlerPrecedence.PRIMARY;
detect(node: ClassDeclaration, decorators: Decorator[]|null): DetectResult<unknown>|undefined {
this.log.push(`${this.name}:detect:${node.name.text}:${decorators!.map(d => d.name)}`);
return undefined;
}
analyze(node: ClassDeclaration): AnalysisOutput<unknown> {
this.log.push(this.name + ':analyze:' + node.name.text);
return {};
}
symbol(node: ClassDeclaration, analysis: Readonly<unknown>): null {
return null;
}
compileFull(node: ClassDeclaration): CompileResult|CompileResult[] {
this.log.push(this.name + ':compile:' + node.name.text);
return [];
}
}
class AlwaysDetectHandler extends TestHandler {
detect(node: ClassDeclaration, decorators: Decorator[]|null): DetectResult<unknown>|undefined {
super.detect(node, decorators);
const decorator = decorators !== null ? decorators[0] : null;
return {trigger: node, decorator, metadata: {}};
}
}
class DetectDecoratorHandler extends TestHandler {
constructor(private decorator: string, readonly precedence: HandlerPrecedence) {
super(decorator, []);
}
detect(node: ClassDeclaration, decorators: Decorator[]|null): DetectResult<unknown>|undefined {
super.detect(node, decorators);
if (decorators === null) {
return undefined;
}
const decorator = decorators.find(decorator => decorator.name === this.decorator);
if (decorator === undefined) {
return undefined;
}
return {trigger: node, decorator, metadata: {}};
}
}
class DiagnosticProducingHandler extends AlwaysDetectHandler {
analyze(node: ClassDeclaration): AnalysisOutput<any> {
super.analyze(node);
return {diagnostics: [makeDiagnostic(9999, node, 'test diagnostic')]};
}
}