2018-08-23 14:34:55 -07:00
|
|
|
/**
|
|
|
|
|
* @license
|
|
|
|
|
* Copyright Google Inc. 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 * as ts from 'typescript';
|
|
|
|
|
|
feat(ivy): detect cycles and use remote scoping of components if needed (#28169)
By its nature, Ivy alters the import graph of a TS program, adding imports
where template dependencies exist. For example, if ComponentA uses PipeB
in its template, Ivy will insert an import of PipeB into the file in which
ComponentA is declared.
Any insertion of an import into a program has the potential to introduce a
cycle into the import graph. If for some reason the file in which PipeB is
declared imports the file in which ComponentA is declared (maybe it makes
use of a service or utility function that happens to be in the same file as
ComponentA) then this could create an import cycle. This turns out to
happen quite regularly in larger Angular codebases.
TypeScript and the Ivy runtime have no issues with such cycles. However,
other tools are not so accepting. In particular the Closure Compiler is
very anti-cycle.
To mitigate this problem, it's necessary to detect when the insertion of
an import would create a cycle. ngtsc can then use a different strategy,
known as "remote scoping", instead of directly writing a reference from
one component to another. Under remote scoping, a function
'setComponentScope' is called after the declaration of the component's
module, which does not require the addition of new imports.
FW-647 #resolve
PR Close #28169
2019-01-15 12:32:10 -08:00
|
|
|
import {CycleAnalyzer, ImportGraph} from '../../cycles';
|
2018-08-23 14:34:55 -07:00
|
|
|
import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
|
feat(ivy): detect cycles and use remote scoping of components if needed (#28169)
By its nature, Ivy alters the import graph of a TS program, adding imports
where template dependencies exist. For example, if ComponentA uses PipeB
in its template, Ivy will insert an import of PipeB into the file in which
ComponentA is declared.
Any insertion of an import into a program has the potential to introduce a
cycle into the import graph. If for some reason the file in which PipeB is
declared imports the file in which ComponentA is declared (maybe it makes
use of a service or utility function that happens to be in the same file as
ComponentA) then this could create an import cycle. This turns out to
happen quite regularly in larger Angular codebases.
TypeScript and the Ivy runtime have no issues with such cycles. However,
other tools are not so accepting. In particular the Closure Compiler is
very anti-cycle.
To mitigate this problem, it's necessary to detect when the insertion of
an import would create a cycle. ngtsc can then use a different strategy,
known as "remote scoping", instead of directly writing a reference from
one component to another. Under remote scoping, a function
'setComponentScope' is called after the declaration of the component's
module, which does not require the addition of new imports.
FW-647 #resolve
PR Close #28169
2019-01-15 12:32:10 -08:00
|
|
|
import {ModuleResolver, TsReferenceResolver} from '../../imports';
|
2018-12-18 09:48:15 -08:00
|
|
|
import {PartialEvaluator} from '../../partial_evaluator';
|
|
|
|
|
import {TypeScriptReflectionHost} from '../../reflection';
|
2018-08-23 14:34:55 -07:00
|
|
|
import {getDeclaration, makeProgram} from '../../testing/in_memory_typescript';
|
|
|
|
|
import {ResourceLoader} from '../src/api';
|
|
|
|
|
import {ComponentDecoratorHandler} from '../src/component';
|
|
|
|
|
import {SelectorScopeRegistry} from '../src/selector_scope';
|
|
|
|
|
|
|
|
|
|
export class NoopResourceLoader implements ResourceLoader {
|
2019-01-16 17:22:53 +00:00
|
|
|
resolve(): string { throw new Error('Not implemented.'); }
|
|
|
|
|
canPreload = false;
|
|
|
|
|
load(): string { throw new Error('Not implemented'); }
|
|
|
|
|
preload(): Promise<void>|undefined { throw new Error('Not implemented'); }
|
2018-08-23 14:34:55 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
describe('ComponentDecoratorHandler', () => {
|
|
|
|
|
it('should produce a diagnostic when @Component has non-literal argument', () => {
|
2018-12-18 11:09:21 -08:00
|
|
|
const {program, options, host} = makeProgram([
|
2018-08-23 14:34:55 -07:00
|
|
|
{
|
|
|
|
|
name: 'node_modules/@angular/core/index.d.ts',
|
|
|
|
|
contents: 'export const Component: any;',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'entry.ts',
|
|
|
|
|
contents: `
|
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
|
|
const TEST = '';
|
|
|
|
|
@Component(TEST) class TestCmp {}
|
|
|
|
|
`
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const checker = program.getTypeChecker();
|
2018-12-18 11:09:21 -08:00
|
|
|
const reflectionHost = new TypeScriptReflectionHost(checker);
|
|
|
|
|
const resolver = new TsReferenceResolver(program, checker, options, host);
|
|
|
|
|
const evaluator = new PartialEvaluator(reflectionHost, checker, resolver);
|
feat(ivy): detect cycles and use remote scoping of components if needed (#28169)
By its nature, Ivy alters the import graph of a TS program, adding imports
where template dependencies exist. For example, if ComponentA uses PipeB
in its template, Ivy will insert an import of PipeB into the file in which
ComponentA is declared.
Any insertion of an import into a program has the potential to introduce a
cycle into the import graph. If for some reason the file in which PipeB is
declared imports the file in which ComponentA is declared (maybe it makes
use of a service or utility function that happens to be in the same file as
ComponentA) then this could create an import cycle. This turns out to
happen quite regularly in larger Angular codebases.
TypeScript and the Ivy runtime have no issues with such cycles. However,
other tools are not so accepting. In particular the Closure Compiler is
very anti-cycle.
To mitigate this problem, it's necessary to detect when the insertion of
an import would create a cycle. ngtsc can then use a different strategy,
known as "remote scoping", instead of directly writing a reference from
one component to another. Under remote scoping, a function
'setComponentScope' is called after the declaration of the component's
module, which does not require the addition of new imports.
FW-647 #resolve
PR Close #28169
2019-01-15 12:32:10 -08:00
|
|
|
const moduleResolver = new ModuleResolver(program, options, host);
|
|
|
|
|
const importGraph = new ImportGraph(moduleResolver);
|
|
|
|
|
const cycleAnalyzer = new CycleAnalyzer(importGraph);
|
|
|
|
|
|
2018-08-23 14:34:55 -07:00
|
|
|
const handler = new ComponentDecoratorHandler(
|
2018-12-18 11:09:21 -08:00
|
|
|
reflectionHost, evaluator, new SelectorScopeRegistry(checker, reflectionHost, resolver),
|
feat(ivy): detect cycles and use remote scoping of components if needed (#28169)
By its nature, Ivy alters the import graph of a TS program, adding imports
where template dependencies exist. For example, if ComponentA uses PipeB
in its template, Ivy will insert an import of PipeB into the file in which
ComponentA is declared.
Any insertion of an import into a program has the potential to introduce a
cycle into the import graph. If for some reason the file in which PipeB is
declared imports the file in which ComponentA is declared (maybe it makes
use of a service or utility function that happens to be in the same file as
ComponentA) then this could create an import cycle. This turns out to
happen quite regularly in larger Angular codebases.
TypeScript and the Ivy runtime have no issues with such cycles. However,
other tools are not so accepting. In particular the Closure Compiler is
very anti-cycle.
To mitigate this problem, it's necessary to detect when the insertion of
an import would create a cycle. ngtsc can then use a different strategy,
known as "remote scoping", instead of directly writing a reference from
one component to another. Under remote scoping, a function
'setComponentScope' is called after the declaration of the component's
module, which does not require the addition of new imports.
FW-647 #resolve
PR Close #28169
2019-01-15 12:32:10 -08:00
|
|
|
false, new NoopResourceLoader(), [''], false, true, moduleResolver, cycleAnalyzer);
|
2018-08-23 14:34:55 -07:00
|
|
|
const TestCmp = getDeclaration(program, 'entry.ts', 'TestCmp', ts.isClassDeclaration);
|
2018-12-18 11:09:21 -08:00
|
|
|
const detected = handler.detect(TestCmp, reflectionHost.getDecoratorsOfDeclaration(TestCmp));
|
2018-08-23 14:34:55 -07:00
|
|
|
if (detected === undefined) {
|
|
|
|
|
return fail('Failed to recognize @Component');
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
handler.analyze(TestCmp, detected);
|
|
|
|
|
return fail('Analysis should have failed');
|
|
|
|
|
} catch (err) {
|
|
|
|
|
if (!(err instanceof FatalDiagnosticError)) {
|
|
|
|
|
return fail('Error should be a FatalDiagnosticError');
|
|
|
|
|
}
|
|
|
|
|
const diag = err.toDiagnostic();
|
|
|
|
|
expect(diag.code).toEqual(ivyCode(ErrorCode.DECORATOR_ARG_NOT_LITERAL));
|
|
|
|
|
expect(diag.file.fileName.endsWith('entry.ts')).toBe(true);
|
|
|
|
|
expect(diag.start).toBe(detected.args ![0].getStart());
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function ivyCode(code: ErrorCode): number {
|
|
|
|
|
return Number('-99' + code.valueOf());
|
|
|
|
|
}
|