feat(ivy): template type-checking for '#' references in templates (#29698)

Previously the template type-checking engine processed templates in a linear
manner, and could not handle '#' references within a template. One reason
for this is that '#' references are non-linear - a reference can be used
before its declaration. Consider the template:

```html
{{ref.value}}
<input #ref>
```

Accommodating this required refactoring the type-checking code generator to
be able to produce Type Check Block (TCB) code non-linearly. Now, each
template is processed and a list of TCB operations (`TcbOp`s) are created.
Non-linearity is modeled via dependencies between operations, with the
appropriate protection in place for circular dependencies.

Testing strategy: TCB tests included.

PR Close #29698
This commit is contained in:
Alex Rickabaugh 2019-04-01 13:07:30 -07:00 committed by Ben Lesh
parent 9f5288dad3
commit 073d258deb
3 changed files with 623 additions and 374 deletions

View File

@ -6,13 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Expression, ExternalExpr, R3TargetBinder, SelectorMatcher, parseTemplate} from '@angular/compiler';
import {CssSelector, Expression, ExternalExpr, R3TargetBinder, SelectorMatcher, parseTemplate} from '@angular/compiler';
import * as ts from 'typescript';
import {ImportMode, Reference, ReferenceEmitStrategy, ReferenceEmitter} from '../../imports';
import {ClassDeclaration, isNamedClassDeclaration} from '../../reflection';
import {ImportManager} from '../../translator';
import {TypeCheckBlockMetadata} from '../src/api';
import {TypeCheckBlockMetadata, TypeCheckableDirectiveMeta} from '../src/api';
import {generateTypeCheckBlock} from '../src/type_check_block';
@ -39,6 +39,67 @@ describe('type check blocks', () => {
const TEMPLATE = `{{a[b]}}`;
expect(tcb(TEMPLATE)).toContain('ctx.a[ctx.b];');
});
it('should generate a forward element reference correctly', () => {
const TEMPLATE = `
{{ i.value }}
<input #i>
`;
expect(tcb(TEMPLATE)).toContain('var _t1 = document.createElement("input"); _t1.value;');
});
it('should generate a forward directive reference correctly', () => {
const TEMPLATE = `
{{d.value}}
<div dir #d="dir"></div>
`;
const DIRECTIVES: TestDirective[] = [{
name: 'Dir',
selector: '[dir]',
exportAs: ['dir'],
}];
expect(tcb(TEMPLATE, DIRECTIVES))
.toContain(
'var _t1 = i0.Dir.ngTypeCtor({}); _t1.value; var _t2 = document.createElement("div");');
});
});
it('should generate a circular directive reference correctly', () => {
const TEMPLATE = `
<div dir #d="dir" [input]="d"></div>
`;
const DIRECTIVES: TestDirective[] = [{
name: 'Dir',
selector: '[dir]',
exportAs: ['dir'],
inputs: {input: 'input'},
}];
expect(tcb(TEMPLATE, DIRECTIVES)).toContain('var _t2 = i0.Dir.ngTypeCtor({ input: (null!) });');
});
it('should generate circular references between two directives correctly', () => {
const TEMPLATE = `
<div #a="dirA" dir-a [inputA]="b">A</div>
<div #b="dirB" dir-b [inputB]="a">B</div>
`;
const DIRECTIVES: TestDirective[] = [
{
name: 'DirA',
selector: '[dir-a]',
exportAs: ['dirA'],
inputs: {inputA: 'inputA'},
},
{
name: 'DirB',
selector: '[dir-b]',
exportAs: ['dirB'],
inputs: {inputA: 'inputB'},
}
];
expect(tcb(TEMPLATE, DIRECTIVES))
.toContain(
'var _t3 = i0.DirB.ngTypeCtor({ inputA: (null!) });' +
' var _t2 = i1.DirA.ngTypeCtor({ inputA: _t3 });');
});
function getClass(sf: ts.SourceFile, name: string): ClassDeclaration<ts.ClassDeclaration> {
@ -50,13 +111,36 @@ function getClass(sf: ts.SourceFile, name: string): ClassDeclaration<ts.ClassDec
throw new Error(`Class ${name} not found in file`);
}
// Remove 'ref' from TypeCheckableDirectiveMeta and add a 'selector' instead.
type TestDirective =
Partial<Pick<TypeCheckableDirectiveMeta, Exclude<keyof TypeCheckableDirectiveMeta, 'ref'>>>&
{selector: string, name: string};
function tcb(template: string): string {
const sf = ts.createSourceFile('synthetic.ts', 'class Test {}', ts.ScriptTarget.Latest, true);
function tcb(template: string, directives: TestDirective[] = []): string {
const classes = ['Test', ...directives.map(dir => dir.name)];
const code = classes.map(name => `class ${name} {}`).join('\n');
const sf = ts.createSourceFile('synthetic.ts', code, ts.ScriptTarget.Latest, true);
const clazz = getClass(sf, 'Test');
const {nodes} = parseTemplate(template, 'synthetic.html');
const matcher = new SelectorMatcher();
for (const dir of directives) {
const selector = CssSelector.parse(dir.selector);
const meta: TypeCheckableDirectiveMeta = {
name: dir.name,
ref: new Reference(getClass(sf, dir.name)),
exportAs: dir.exportAs || null,
hasNgTemplateContextGuard: dir.hasNgTemplateContextGuard || false,
inputs: dir.inputs || {},
isComponent: dir.isComponent || false,
ngTemplateGuards: dir.ngTemplateGuards || [],
outputs: dir.outputs || {},
queries: dir.queries || [],
};
matcher.addSelectables(selector, meta);
}
const binder = new R3TargetBinder(matcher);
const boundTarget = binder.bind({template: nodes});

View File

@ -76,7 +76,7 @@ export * from './ml_parser/interpolation_config';
export * from './ml_parser/tags';
export {LexerRange} from './ml_parser/lexer';
export {NgModuleCompiler} from './ng_module_compiler';
export {ArrayType, AssertNotNull, BinaryOperator, BinaryOperatorExpr, BuiltinMethod, BuiltinType, BuiltinTypeName, BuiltinVar, CastExpr, ClassField, ClassMethod, ClassStmt, CommaExpr, CommentStmt, ConditionalExpr, DeclareFunctionStmt, DeclareVarStmt, Expression, ExpressionStatement, ExpressionType, ExpressionVisitor, ExternalExpr, ExternalReference, literalMap, FunctionExpr, IfStmt, InstantiateExpr, InvokeFunctionExpr, InvokeMethodExpr, JSDocCommentStmt, LiteralArrayExpr, LiteralExpr, LiteralMapExpr, MapType, NotExpr, ReadKeyExpr, ReadPropExpr, ReadVarExpr, ReturnStatement, StatementVisitor, ThrowStmt, TryCatchStmt, Type, TypeVisitor, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, StmtModifier, Statement, TypeofExpr, collectExternalReferences} from './output/output_ast';
export {ArrayType, AssertNotNull, DYNAMIC_TYPE, BinaryOperator, BinaryOperatorExpr, BuiltinMethod, BuiltinType, BuiltinTypeName, BuiltinVar, CastExpr, ClassField, ClassMethod, ClassStmt, CommaExpr, CommentStmt, ConditionalExpr, DeclareFunctionStmt, DeclareVarStmt, Expression, ExpressionStatement, ExpressionType, ExpressionVisitor, ExternalExpr, ExternalReference, literalMap, FunctionExpr, IfStmt, InstantiateExpr, InvokeFunctionExpr, InvokeMethodExpr, JSDocCommentStmt, LiteralArrayExpr, LiteralExpr, LiteralMapExpr, MapType, NotExpr, ReadKeyExpr, ReadPropExpr, ReadVarExpr, ReturnStatement, StatementVisitor, ThrowStmt, TryCatchStmt, Type, TypeVisitor, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, StmtModifier, Statement, TypeofExpr, collectExternalReferences} from './output/output_ast';
export {EmitterVisitorContext} from './output/abstract_emitter';
export {JitEvaluator} from './output/output_jit';
export * from './output/ts_emitter';