mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
09f589f000
Consider a template with a context variable `a`:
```
<ng-template let-a>{{this.a}}</ng-template>
```
t push -fAn interpolation inside that template to `this.a` should intuitively read the class variable `a`. However, today, it refers to the context variable `a`, both in the TCB and the generated code.
In this commit, the above interpolation now refers to the class field `a`.
BREAKING CHANGE: `this.foo` property reads no longer refer to template context variables. If you intended to read the template variable, do not use `this.`.
Fixes #55115
PR Close #55183
1018 lines
35 KiB
TypeScript
1018 lines
35 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.dev/license
|
|
*/
|
|
|
|
import * as e from '../../../src/expression_parser/ast';
|
|
import * as a from '../../../src/render3/r3_ast';
|
|
import {DirectiveMeta, InputOutputPropertySet} from '../../../src/render3/view/t2_api';
|
|
import {findMatchingDirectivesAndPipes, R3TargetBinder} from '../../../src/render3/view/t2_binder';
|
|
import {parseTemplate} from '../../../src/render3/view/template';
|
|
import {CssSelector, SelectorMatcher} from '../../../src/selector';
|
|
|
|
import {findExpression} from './util';
|
|
|
|
/**
|
|
* A `InputOutputPropertySet` which only uses an identity mapping for fields and properties.
|
|
*/
|
|
class IdentityInputMapping implements InputOutputPropertySet {
|
|
private names: Set<string>;
|
|
|
|
constructor(names: string[]) {
|
|
this.names = new Set(names);
|
|
}
|
|
|
|
hasBindingPropertyName(propertyName: string): boolean {
|
|
return this.names.has(propertyName);
|
|
}
|
|
}
|
|
|
|
function makeSelectorMatcher(): SelectorMatcher<DirectiveMeta[]> {
|
|
const matcher = new SelectorMatcher<DirectiveMeta[]>();
|
|
matcher.addSelectables(CssSelector.parse('[ngFor][ngForOf]'), [
|
|
{
|
|
name: 'NgFor',
|
|
exportAs: null,
|
|
inputs: new IdentityInputMapping(['ngForOf']),
|
|
outputs: new IdentityInputMapping([]),
|
|
isComponent: false,
|
|
isStructural: true,
|
|
selector: '[ngFor][ngForOf]',
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
matcher.addSelectables(CssSelector.parse('[dir]'), [
|
|
{
|
|
name: 'Dir',
|
|
exportAs: ['dir'],
|
|
inputs: new IdentityInputMapping([]),
|
|
outputs: new IdentityInputMapping([]),
|
|
isComponent: false,
|
|
isStructural: false,
|
|
selector: '[dir]',
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
matcher.addSelectables(CssSelector.parse('[hasOutput]'), [
|
|
{
|
|
name: 'HasOutput',
|
|
exportAs: null,
|
|
inputs: new IdentityInputMapping([]),
|
|
outputs: new IdentityInputMapping(['outputBinding']),
|
|
isComponent: false,
|
|
isStructural: false,
|
|
selector: '[hasOutput]',
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
matcher.addSelectables(CssSelector.parse('[hasInput]'), [
|
|
{
|
|
name: 'HasInput',
|
|
exportAs: null,
|
|
inputs: new IdentityInputMapping(['inputBinding']),
|
|
outputs: new IdentityInputMapping([]),
|
|
isComponent: false,
|
|
isStructural: false,
|
|
selector: '[hasInput]',
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
matcher.addSelectables(CssSelector.parse('[sameSelectorAsInput]'), [
|
|
{
|
|
name: 'SameSelectorAsInput',
|
|
exportAs: null,
|
|
inputs: new IdentityInputMapping(['sameSelectorAsInput']),
|
|
outputs: new IdentityInputMapping([]),
|
|
isComponent: false,
|
|
isStructural: false,
|
|
selector: '[sameSelectorAsInput]',
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
matcher.addSelectables(CssSelector.parse('comp'), [
|
|
{
|
|
name: 'Comp',
|
|
exportAs: null,
|
|
inputs: new IdentityInputMapping([]),
|
|
outputs: new IdentityInputMapping([]),
|
|
isComponent: true,
|
|
isStructural: false,
|
|
selector: 'comp',
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
|
|
const simpleDirectives = ['a', 'b', 'c', 'd', 'e', 'f'];
|
|
const deferBlockDirectives = ['loading', 'error', 'placeholder'];
|
|
for (const dir of [...simpleDirectives, ...deferBlockDirectives]) {
|
|
const name = dir[0].toUpperCase() + dir.slice(1).toLowerCase();
|
|
matcher.addSelectables(CssSelector.parse(`[${dir}]`), [
|
|
{
|
|
name: `Dir${name}`,
|
|
exportAs: null,
|
|
inputs: new IdentityInputMapping([]),
|
|
outputs: new IdentityInputMapping([]),
|
|
isComponent: false,
|
|
isStructural: true,
|
|
selector: `[${dir}]`,
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
}
|
|
|
|
return matcher;
|
|
}
|
|
|
|
describe('findMatchingDirectivesAndPipes', () => {
|
|
it('should match directives and detect pipes in eager and deferrable parts of a template', () => {
|
|
const template = `
|
|
<div [title]="abc | uppercase"></div>
|
|
@defer {
|
|
<my-defer-cmp [label]="abc | lowercase" />
|
|
} @placeholder {}
|
|
`;
|
|
const directiveSelectors = ['[title]', 'my-defer-cmp', 'not-matching'];
|
|
const result = findMatchingDirectivesAndPipes(template, directiveSelectors);
|
|
expect(result).toEqual({
|
|
directives: {
|
|
regular: ['[title]'],
|
|
deferCandidates: ['my-defer-cmp'],
|
|
},
|
|
pipes: {
|
|
regular: ['uppercase'],
|
|
deferCandidates: ['lowercase'],
|
|
},
|
|
});
|
|
});
|
|
|
|
it('should return empty directive list if no selectors are provided', () => {
|
|
const template = `
|
|
<div [title]="abc | uppercase"></div>
|
|
@defer {
|
|
<my-defer-cmp [label]="abc | lowercase" />
|
|
} @placeholder {}
|
|
`;
|
|
const directiveSelectors: string[] = [];
|
|
const result = findMatchingDirectivesAndPipes(template, directiveSelectors);
|
|
expect(result).toEqual({
|
|
directives: {
|
|
regular: [],
|
|
deferCandidates: [],
|
|
},
|
|
// Expect pipes to be present still.
|
|
pipes: {
|
|
regular: ['uppercase'],
|
|
deferCandidates: ['lowercase'],
|
|
},
|
|
});
|
|
});
|
|
|
|
it('should return a directive and a pipe only once (either as a regular or deferrable)', () => {
|
|
const template = `
|
|
<my-defer-cmp [label]="abc | lowercase" [title]="abc | uppercase" />
|
|
@defer {
|
|
<my-defer-cmp [label]="abc | lowercase" [title]="abc | uppercase" />
|
|
} @placeholder {}
|
|
`;
|
|
const directiveSelectors = ['[title]', 'my-defer-cmp', 'not-matching'];
|
|
const result = findMatchingDirectivesAndPipes(template, directiveSelectors);
|
|
expect(result).toEqual({
|
|
directives: {
|
|
regular: ['my-defer-cmp', '[title]'],
|
|
// All directives/components are used eagerly.
|
|
deferCandidates: [],
|
|
},
|
|
pipes: {
|
|
regular: ['lowercase', 'uppercase'],
|
|
// All pipes are used eagerly.
|
|
deferCandidates: [],
|
|
},
|
|
});
|
|
});
|
|
|
|
it('should handle directives on elements with local refs', () => {
|
|
const template = `
|
|
<input [(ngModel)]="name" #ctrl="ngModel" required />
|
|
@defer {
|
|
<my-defer-cmp [label]="abc | lowercase" [title]="abc | uppercase" />
|
|
<input [(ngModel)]="name" #ctrl="ngModel" required />
|
|
} @placeholder {}
|
|
`;
|
|
const directiveSelectors = [
|
|
'[ngModel]:not([formControlName]):not([formControl])',
|
|
'[title]',
|
|
'my-defer-cmp',
|
|
'not-matching',
|
|
];
|
|
const result = findMatchingDirectivesAndPipes(template, directiveSelectors);
|
|
expect(result).toEqual({
|
|
directives: {
|
|
// `ngModel` is used both eagerly and in a defer block, thus it's located
|
|
// in the "regular" (eager) bucket.
|
|
regular: ['[ngModel]:not([formControlName]):not([formControl])'],
|
|
deferCandidates: ['my-defer-cmp', '[title]'],
|
|
},
|
|
pipes: {
|
|
regular: [],
|
|
deferCandidates: ['lowercase', 'uppercase'],
|
|
},
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('t2 binding', () => {
|
|
it('should bind a simple template', () => {
|
|
const template = parseTemplate('<div *ngFor="let item of items">{{item.name}}</div>', '', {});
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
|
|
const itemBinding = (findExpression(template.nodes, '{{item.name}}')! as e.Interpolation)
|
|
.expressions[0] as e.PropertyRead;
|
|
const item = itemBinding.receiver;
|
|
const itemTarget = res.getExpressionTarget(item);
|
|
if (!(itemTarget instanceof a.Variable)) {
|
|
return fail('Expected item to point to a Variable');
|
|
}
|
|
expect(itemTarget.value).toBe('$implicit');
|
|
const itemTemplate = res.getDefinitionNodeOfSymbol(itemTarget);
|
|
expect(itemTemplate).not.toBeNull();
|
|
expect(res.getNestingLevel(itemTemplate!)).toBe(1);
|
|
});
|
|
|
|
it('should match directives when binding a simple template', () => {
|
|
const template = parseTemplate('<div *ngFor="let item of items">{{item.name}}</div>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const tmpl = template.nodes[0] as a.Template;
|
|
const directives = res.getDirectivesOfNode(tmpl)!;
|
|
expect(directives).not.toBeNull();
|
|
expect(directives.length).toBe(1);
|
|
expect(directives[0].name).toBe('NgFor');
|
|
});
|
|
|
|
it('should match directives on namespaced elements', () => {
|
|
const template = parseTemplate('<svg><text dir>SVG</text></svg>', '', {});
|
|
const matcher = new SelectorMatcher<DirectiveMeta[]>();
|
|
matcher.addSelectables(CssSelector.parse('text[dir]'), [
|
|
{
|
|
name: 'Dir',
|
|
exportAs: null,
|
|
inputs: new IdentityInputMapping([]),
|
|
outputs: new IdentityInputMapping([]),
|
|
isComponent: false,
|
|
isStructural: false,
|
|
selector: 'text[dir]',
|
|
animationTriggerNames: null,
|
|
ngContentSelectors: null,
|
|
preserveWhitespaces: false,
|
|
},
|
|
]);
|
|
const binder = new R3TargetBinder(matcher);
|
|
const res = binder.bind({template: template.nodes});
|
|
const svgNode = template.nodes[0] as a.Element;
|
|
const textNode = svgNode.children[0] as a.Element;
|
|
const directives = res.getDirectivesOfNode(textNode)!;
|
|
expect(directives).not.toBeNull();
|
|
expect(directives.length).toBe(1);
|
|
expect(directives[0].name).toBe('Dir');
|
|
});
|
|
|
|
it('should not match directives intended for an element on a microsyntax template', () => {
|
|
const template = parseTemplate('<div *ngFor="let item of items" dir></div>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const tmpl = template.nodes[0] as a.Template;
|
|
const tmplDirectives = res.getDirectivesOfNode(tmpl)!;
|
|
expect(tmplDirectives).not.toBeNull();
|
|
expect(tmplDirectives.length).toBe(1);
|
|
expect(tmplDirectives[0].name).toBe('NgFor');
|
|
const elDirectives = res.getDirectivesOfNode(tmpl.children[0] as a.Element)!;
|
|
expect(elDirectives).not.toBeNull();
|
|
expect(elDirectives.length).toBe(1);
|
|
expect(elDirectives[0].name).toBe('Dir');
|
|
});
|
|
|
|
it('should get @let declarations when resolving entities at the root', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@let one = 1;
|
|
@let two = 2;
|
|
@let sum = one + two;
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
const entities = Array.from(res.getEntitiesInScope(null));
|
|
|
|
expect(entities.map((entity) => entity.name)).toEqual(['one', 'two', 'sum']);
|
|
});
|
|
|
|
it('should scope @let declarations to their current view', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@let one = 1;
|
|
|
|
@if (true) {
|
|
@let two = 2;
|
|
}
|
|
|
|
@if (true) {
|
|
@let three = 3;
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
const rootEntities = Array.from(res.getEntitiesInScope(null));
|
|
const firstBranchEntities = Array.from(
|
|
res.getEntitiesInScope((template.nodes[1] as a.IfBlock).branches[0]),
|
|
);
|
|
const secondBranchEntities = Array.from(
|
|
res.getEntitiesInScope((template.nodes[2] as a.IfBlock).branches[0]),
|
|
);
|
|
|
|
expect(rootEntities.map((entity) => entity.name)).toEqual(['one']);
|
|
expect(firstBranchEntities.map((entity) => entity.name)).toEqual(['one', 'two']);
|
|
expect(secondBranchEntities.map((entity) => entity.name)).toEqual(['one', 'three']);
|
|
});
|
|
|
|
it('should resolve expressions to an @let declaration', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@let value = 1;
|
|
{{value}}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
const interpolationWrapper = (template.nodes[1] as a.BoundText).value as e.ASTWithSource;
|
|
const propertyRead = (interpolationWrapper.ast as e.Interpolation).expressions[0];
|
|
const target = res.getExpressionTarget(propertyRead);
|
|
|
|
expect(target instanceof a.LetDeclaration).toBe(true);
|
|
expect((target as a.LetDeclaration)?.name).toBe('value');
|
|
});
|
|
|
|
it('should not resolve a `this` access to a template reference', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<input #value>
|
|
{{this.value}}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
const interpolationWrapper = (template.nodes[1] as a.BoundText).value as e.ASTWithSource;
|
|
const propertyRead = (interpolationWrapper.ast as e.Interpolation).expressions[0];
|
|
const target = res.getExpressionTarget(propertyRead);
|
|
|
|
expect(target).toBe(null);
|
|
});
|
|
|
|
it('should not resolve a `this` access to a template variable', () => {
|
|
const template = parseTemplate(`<ng-template let-value>{{this.value}}</ng-template>`, '');
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
const templateNode = template.nodes[0] as a.Template;
|
|
const interpolationWrapper = (templateNode.children[0] as a.BoundText).value as e.ASTWithSource;
|
|
const propertyRead = (interpolationWrapper.ast as e.Interpolation).expressions[0];
|
|
const target = res.getExpressionTarget(propertyRead);
|
|
|
|
expect(target).toBe(null);
|
|
});
|
|
|
|
it('should not resolve a `this` access to a `@let` declaration', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@let value = 1;
|
|
{{this.value}}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
const interpolationWrapper = (template.nodes[1] as a.BoundText).value as e.ASTWithSource;
|
|
const propertyRead = (interpolationWrapper.ast as e.Interpolation).expressions[0];
|
|
const target = res.getExpressionTarget(propertyRead);
|
|
|
|
expect(target).toBe(null);
|
|
});
|
|
|
|
it('should resolve the definition node of let declarations', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@if (true) {
|
|
@let one = 1;
|
|
}
|
|
|
|
@if (true) {
|
|
@let two = 2;
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(new SelectorMatcher<DirectiveMeta[]>());
|
|
const res = binder.bind({template: template.nodes});
|
|
const firstBranch = (template.nodes[0] as a.IfBlock).branches[0];
|
|
const firstLet = firstBranch.children[0] as a.LetDeclaration;
|
|
const secondBranch = (template.nodes[1] as a.IfBlock).branches[0];
|
|
const secondLet = secondBranch.children[0] as a.LetDeclaration;
|
|
|
|
expect(res.getDefinitionNodeOfSymbol(firstLet)).toBe(firstBranch);
|
|
expect(res.getDefinitionNodeOfSymbol(secondLet)).toBe(secondBranch);
|
|
});
|
|
|
|
describe('matching inputs to consuming directives', () => {
|
|
it('should work for bound attributes', () => {
|
|
const template = parseTemplate('<div hasInput [inputBinding]="myValue"></div>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const el = template.nodes[0] as a.Element;
|
|
const attr = el.inputs[0];
|
|
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
|
|
expect(consumer.name).toBe('HasInput');
|
|
});
|
|
|
|
it('should work for text attributes on elements', () => {
|
|
const template = parseTemplate('<div hasInput inputBinding="text"></div>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const el = template.nodes[0] as a.Element;
|
|
const attr = el.attributes[1];
|
|
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
|
|
expect(consumer.name).toBe('HasInput');
|
|
});
|
|
|
|
it('should work for text attributes on templates', () => {
|
|
const template = parseTemplate(
|
|
'<ng-template hasInput inputBinding="text"></ng-template>',
|
|
'',
|
|
{},
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const el = template.nodes[0] as a.Element;
|
|
const attr = el.attributes[1];
|
|
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
|
|
expect(consumer.name).toBe('HasInput');
|
|
});
|
|
|
|
it('should not match directives on attribute bindings with the same name as an input', () => {
|
|
const template = parseTemplate(
|
|
'<ng-template [attr.sameSelectorAsInput]="123"></ng-template>',
|
|
'',
|
|
{},
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const el = template.nodes[0] as a.Element;
|
|
const input = el.inputs[0];
|
|
const consumer = res.getConsumerOfBinding(input);
|
|
expect(consumer).toEqual(el);
|
|
});
|
|
|
|
it('should bind to the encompassing node when no directive input is matched', () => {
|
|
const template = parseTemplate('<span dir></span>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const el = template.nodes[0] as a.Element;
|
|
const attr = el.attributes[0];
|
|
const consumer = res.getConsumerOfBinding(attr);
|
|
expect(consumer).toEqual(el);
|
|
});
|
|
});
|
|
|
|
describe('matching outputs to consuming directives', () => {
|
|
it('should work for bound events', () => {
|
|
const template = parseTemplate(
|
|
'<div hasOutput (outputBinding)="myHandler($event)"></div>',
|
|
'',
|
|
{},
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const el = template.nodes[0] as a.Element;
|
|
const attr = el.outputs[0];
|
|
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
|
|
expect(consumer.name).toBe('HasOutput');
|
|
});
|
|
|
|
it('should bind to the encompassing node when no directive output is matched', () => {
|
|
const template = parseTemplate('<span dir (fakeOutput)="myHandler($event)"></span>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
const el = template.nodes[0] as a.Element;
|
|
const attr = el.outputs[0];
|
|
const consumer = res.getConsumerOfBinding(attr);
|
|
expect(consumer).toEqual(el);
|
|
});
|
|
});
|
|
|
|
describe('extracting defer blocks info', () => {
|
|
it('should extract top-level defer blocks', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer {<cmp-a />}
|
|
@defer {<cmp-b />}
|
|
<cmp-c />
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const deferBlocks = bound.getDeferBlocks();
|
|
expect(deferBlocks.length).toBe(2);
|
|
});
|
|
|
|
it('should extract nested defer blocks and associated pipes', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer {
|
|
{{ name | pipeA }}
|
|
@defer {
|
|
{{ name | pipeB }}
|
|
}
|
|
} @loading {
|
|
@defer {
|
|
{{ name | pipeC }}
|
|
}
|
|
{{ name | loading }}
|
|
} @placeholder {
|
|
@defer {
|
|
{{ name | pipeD }}
|
|
}
|
|
{{ name | placeholder }}
|
|
} @error {
|
|
@defer {
|
|
{{ name | pipeE }}
|
|
}
|
|
{{ name | error }}
|
|
}
|
|
{{ name | pipeF }}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const deferBlocks = bound.getDeferBlocks();
|
|
|
|
expect(deferBlocks.length).toBe(5);
|
|
|
|
// Record all pipes used within :placeholder, :loading and :error sub-blocks,
|
|
// also record pipes used outside of any defer blocks.
|
|
expect(bound.getEagerlyUsedPipes()).toEqual(['placeholder', 'loading', 'error', 'pipeF']);
|
|
|
|
// Record *all* pipes from the template, including the ones from defer blocks.
|
|
expect(bound.getUsedPipes()).toEqual([
|
|
'pipeA',
|
|
'pipeB',
|
|
'pipeD',
|
|
'placeholder',
|
|
'pipeC',
|
|
'loading',
|
|
'pipeE',
|
|
'error',
|
|
'pipeF',
|
|
]);
|
|
});
|
|
|
|
it('should identify pipes used after a nested defer block as being lazy', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer {
|
|
{{ name | pipeA }}
|
|
@defer {
|
|
{{ name | pipeB }}
|
|
}
|
|
{{ name | pipeC }}
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
|
|
expect(bound.getUsedPipes()).toEqual(['pipeA', 'pipeB', 'pipeC']);
|
|
expect(bound.getEagerlyUsedPipes()).toEqual([]);
|
|
});
|
|
|
|
it('should extract nested defer blocks and associated directives', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer {
|
|
<img *a />
|
|
@defer {
|
|
<img *b />
|
|
}
|
|
} @loading {
|
|
@defer {
|
|
<img *c />
|
|
}
|
|
<img *loading />
|
|
} @placeholder {
|
|
@defer {
|
|
<img *d />
|
|
}
|
|
<img *placeholder />
|
|
} @error {
|
|
@defer {
|
|
<img *e />
|
|
}
|
|
<img *error />
|
|
}
|
|
<img *f />
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const deferBlocks = bound.getDeferBlocks();
|
|
|
|
expect(deferBlocks.length).toBe(5);
|
|
|
|
// Record all directives used within placeholder, loading and error sub-blocks,
|
|
// also record directives used outside of any defer blocks.
|
|
const eagerDirs = bound.getEagerlyUsedDirectives();
|
|
expect(eagerDirs.length).toBe(4);
|
|
expect(eagerDirs.map((dir) => dir.name)).toEqual([
|
|
'DirPlaceholder',
|
|
'DirLoading',
|
|
'DirError',
|
|
'DirF',
|
|
]);
|
|
|
|
// Record *all* directives from the template, including the ones from defer blocks.
|
|
const allDirs = bound.getUsedDirectives();
|
|
expect(allDirs.length).toBe(9);
|
|
expect(allDirs.map((dir) => dir.name)).toEqual([
|
|
'DirA',
|
|
'DirB',
|
|
'DirD',
|
|
'DirPlaceholder',
|
|
'DirC',
|
|
'DirLoading',
|
|
'DirE',
|
|
'DirError',
|
|
'DirF',
|
|
]);
|
|
});
|
|
|
|
it('should identify directives used after a nested defer block as being lazy', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer {
|
|
<img *a />
|
|
@defer {<img *b />}
|
|
<img *c />
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const allDirs = bound.getUsedDirectives().map((dir) => dir.name);
|
|
const eagerDirs = bound.getEagerlyUsedDirectives().map((dir) => dir.name);
|
|
|
|
expect(allDirs).toEqual(['DirA', 'DirB', 'DirC']);
|
|
expect(eagerDirs).toEqual([]);
|
|
});
|
|
|
|
it('should identify a trigger element that is a parent of the deferred block', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div #trigger>
|
|
@defer (on viewport(trigger)) {}
|
|
</div>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('div');
|
|
});
|
|
|
|
it('should identify a trigger element outside of the deferred block', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div>
|
|
@defer (on viewport(trigger)) {}
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<button #trigger></button>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('button');
|
|
});
|
|
|
|
it('should identify a trigger element in a parent embedded view', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div *ngFor="let item of items">
|
|
<button #trigger></button>
|
|
|
|
<div *ngFor="let child of item.children">
|
|
<div *ngFor="let grandchild of child.children">
|
|
@defer (on viewport(trigger)) {}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('button');
|
|
});
|
|
|
|
it('should identify a trigger element inside the placeholder', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport(trigger)) {
|
|
main
|
|
} @placeholder {
|
|
<button #trigger></button>
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('button');
|
|
});
|
|
|
|
it('should not identify a trigger inside the main content block', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport(trigger)) {<button #trigger></button>}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
|
|
it('should identify a trigger element on a component', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport(trigger)) {}
|
|
|
|
<comp #trigger/>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('comp');
|
|
});
|
|
|
|
it('should identify a trigger element on a directive', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport(trigger)) {}
|
|
|
|
<button dir #trigger="dir"></button>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('button');
|
|
});
|
|
|
|
it('should identify an implicit trigger inside the placeholder block', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div #trigger>
|
|
@defer (on viewport) {} @placeholder {<button></button>}
|
|
</div>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('button');
|
|
});
|
|
|
|
it('should identify an implicit trigger inside the placeholder block with comments', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport) {
|
|
main
|
|
} @placeholder {
|
|
<!-- before -->
|
|
<button #trigger></button>
|
|
<!-- after -->
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl?.name).toBe('button');
|
|
});
|
|
|
|
it('should not identify an implicit trigger if the placeholder has multiple root nodes', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div #trigger>
|
|
@defer (on viewport) {} @placeholder {<button></button><div></div>}
|
|
</div>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
|
|
it('should not identify an implicit trigger if there is no placeholder', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div #trigger>
|
|
@defer (on viewport) {}
|
|
<button></button>
|
|
</div>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
|
|
it('should not identify an implicit trigger if the placeholder has a single root text node', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div #trigger>
|
|
@defer (on viewport) {} @placeholder {hello}
|
|
</div>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
|
|
it('should not identify a trigger inside a sibling embedded view', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
<div *ngIf="cond">
|
|
<button #trigger></button>
|
|
</div>
|
|
|
|
@defer (on viewport(trigger)) {}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
|
|
it('should not identify a trigger element in an embedded view inside the placeholder', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport(trigger)) {
|
|
main
|
|
} @placeholder {
|
|
<div *ngIf="cond"><button #trigger></button></div>
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
|
|
it('should not identify a trigger element inside the a deferred block within the placeholder', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport(trigger)) {
|
|
main
|
|
} @placeholder {
|
|
@defer {
|
|
<button #trigger></button>
|
|
}
|
|
}
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
|
|
it('should not identify a trigger element on a template', () => {
|
|
const template = parseTemplate(
|
|
`
|
|
@defer (on viewport(trigger)) {}
|
|
|
|
<ng-template #trigger></ng-template>
|
|
`,
|
|
'',
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const bound = binder.bind({template: template.nodes});
|
|
const block = Array.from(bound.getDeferBlocks())[0];
|
|
const triggerEl = bound.getDeferredTriggerTarget(block, block.triggers.viewport!);
|
|
expect(triggerEl).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe('used pipes', () => {
|
|
it('should record pipes used in interpolations', () => {
|
|
const template = parseTemplate('{{value|date}}', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
expect(res.getUsedPipes()).toEqual(['date']);
|
|
});
|
|
|
|
it('should record pipes used in bound attributes', () => {
|
|
const template = parseTemplate('<person [age]="age|number"></person>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
expect(res.getUsedPipes()).toEqual(['number']);
|
|
});
|
|
|
|
it('should record pipes used in bound template attributes', () => {
|
|
const template = parseTemplate('<ng-template [ngIf]="obs|async"></ng-template>', '', {});
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
expect(res.getUsedPipes()).toEqual(['async']);
|
|
});
|
|
|
|
it('should record pipes used in ICUs', () => {
|
|
const template = parseTemplate(
|
|
`<span i18n>{count|number, plural,
|
|
=1 { {{value|date}} }
|
|
}</span>`,
|
|
'',
|
|
{},
|
|
);
|
|
const binder = new R3TargetBinder(makeSelectorMatcher());
|
|
const res = binder.bind({template: template.nodes});
|
|
expect(res.getUsedPipes()).toEqual(['number', 'date']);
|
|
});
|
|
});
|
|
});
|