honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ivy): adding `projectDef` instructions to all templates where <ng-content> is present (FW-745) (#27384) 

Prior to this change `projectDef` instructions were placed to root templates only, thus the necessary information (selectors) in nested templates was missing. This update adds the logic to insert `projectDef` instructions to all templates where <ng-content> is present.

PR Close #27384
This commit is contained in:
Andrew Kushnir 2018-11-30 15:01:37 -08:00 committed by Igor Minar
parent 8e644d99fc
commit f0b0d64453
7 changed files with 132 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -1013,7 +1013,7 @@ describe('compiler compliance', () => {
});
});
it('should support content projection', () => {
it('should support content projection in root template', () => {
const files = {
app: {
'spec.ts': `
@ -1061,10 +1061,10 @@ describe('compiler compliance', () => {
});`;
const ComplexComponentDefinition = `
const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]];
const $c2$ = ["span[title=toFirst]", "span[title=toSecond]"];
const $c3$ = ["id","first"];
const $c4$ = ["id","second"];
const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]];
const $c2$ = ["span[title=toFirst]", "span[title=toSecond]"];
…
ComplexComponent.ngComponentDef = $r3$.ɵdefineComponent({
type: ComplexComponent,
@ -1095,6 +1095,76 @@ describe('compiler compliance', () => {
result.source, ComplexComponentDefinition, 'Incorrect ComplexComponent definition');
});
it('should support content projection in nested templates', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
template: \`
<div id="second" *ngIf="visible">
<ng-content select="span[title=toFirst]"></ng-content>
</div>
<div id="third" *ngIf="visible">
No ng-content, no instructions generated.
</div>
<ng-template>
'*' selector: <ng-content></ng-content>
</ng-template>
\`,
})
class Cmp {}
@NgModule({ declarations: [Cmp] })
class Module {}
`
}
};
const output = `
const $_c0$ = [1, "ngIf"];
const $_c1$ = ["id", "second"];
const $_c2$ = [[["span", "title", "tofirst"]]];
const $_c3$ = ["span[title=toFirst]"];
function Cmp_div_Template_0(rf, ctx) { if (rf & 1) {
$r3$.ɵprojectionDef($_c2$, $_c3$);
$r3$.ɵelementStart(0, "div", $_c1$);
$r3$.ɵprojection(1, 1);
$r3$.ɵelementEnd();
} }
const $_c4$ = ["id", "third"];
function Cmp_div_Template_1(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div", $_c4$);
$r3$.ɵtext(1, " No ng-content, no instructions generated. ");
$r3$.ɵelementEnd();
}
}
function Template_2(rf, ctx) {
if (rf & 1) {
$r3$.ɵprojectionDef();
$r3$.ɵtext(0, " '*' selector: ");
$r3$.ɵprojection(1);
}
}
…
template: function Cmp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtemplate(0, Cmp_div_Template_0, 2, 0, null, $_c0$);
$r3$.ɵtemplate(1, Cmp_div_Template_1, 2, 0, null, $_c0$);
$r3$.ɵtemplate(2, Template_2, 2, 0);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "ngIf", $r3$.ɵbind(ctx.visible));
$r3$.ɵelementProperty(1, "ngIf", $r3$.ɵbind(ctx.visible));
}
}
`;
const {source} = compile(files, angularFiles);
expectEmit(source, output, 'Invalid content projection instructions generated');
});
describe('queries', () => {
const directive = {
'some.directive.ts': `

2
packages/compiler/src/render3/r3_ast.ts
View File

@ -83,7 +83,7 @@ export class Template implements Node {
export class Content implements Node {
constructor(
public selectorIndex: number, public attributes: TextAttribute[],
public selector: string, public attributes: TextAttribute[],
public sourceSpan: ParseSourceSpan, public i18n?: I18nAST) {}
visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitContent(this); }
}

24
packages/compiler/src/render3/r3_template_transform.ts
View File

@ -45,16 +45,10 @@ const IDENT_PROPERTY_IDX = 9;
const IDENT_EVENT_IDX = 10;
const TEMPLATE_ATTR_PREFIX = '*';
// Default selector used by `<ng-content>` if none specified
const DEFAULT_CONTENT_SELECTOR = '*';
// Result of the html AST to Ivy AST transformation
export type Render3ParseResult = {
nodes: t.Node[]; errors: ParseError[];
// Any non default (empty or '*') selector found in the template
ngContentSelectors: string[];
// Wether the template contains any `<ng-content>`
hasNgContent: boolean;
};
export function htmlAstToRender3Ast(
@ -74,17 +68,11 @@ export function htmlAstToRender3Ast(
return {
nodes: ivyNodes,
errors: allErrors,
ngContentSelectors: transformer.ngContentSelectors,
hasNgContent: transformer.hasNgContent,
};
}
class HtmlAstToIvyAst implements html.Visitor {
errors: ParseError[] = [];
// Selectors for the `ng-content` tags. Only non `*` selectors are recorded here
ngContentSelectors: string[] = [];
// Any `<ng-content>` in the template ?
hasNgContent = false;
constructor(private bindingParser: BindingParser) {}
@ -168,20 +156,12 @@ class HtmlAstToIvyAst implements html.Visitor {
let parsedElement: t.Node|undefined;
if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
// `<ng-content>`
this.hasNgContent = true;
if (element.children && !element.children.every(isEmptyTextNode)) {
this.reportError(`<ng-content> element cannot have content.`, element.sourceSpan);
}
const selector = preparsedElement.selectAttr;
let attributes: t.TextAttribute[] =
element.attrs.map(attribute => this.visitAttribute(attribute));
const selectorIndex =
selector === DEFAULT_CONTENT_SELECTOR ? 0 : this.ngContentSelectors.push(selector);
parsedElement = new t.Content(selectorIndex, attributes, element.sourceSpan, element.i18n);
const attrs: t.TextAttribute[] = element.attrs.map(attr => this.visitAttribute(attr));
parsedElement = new t.Content(selector, attrs, element.sourceSpan, element.i18n);
} else if (isTemplateElement) {
// `<ng-template>`
const attrs = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta);

10
packages/compiler/src/render3/view/api.ts
View File

@ -123,16 +123,6 @@ export interface R3ComponentMetadata extends R3DirectiveMetadata {
* Parsed nodes of the template.
*/
nodes: t.Node[];
/**
* Whether the template includes <ng-content> tags.
*/
hasNgContent: boolean;
/**
* Selectors found in the <ng-content> tags in the template.
*/
ngContentSelectors: string[];
};
/**

9
packages/compiler/src/render3/view/compiler.ts
View File

@ -258,8 +258,7 @@ export function compileComponentFromMetadata(
meta.viewQueries, directiveMatcher, directivesUsed, meta.pipes, pipesUsed, R3.namespaceHTML,
meta.relativeContextFilePath, meta.i18nUseExternalIds);
const templateFunctionExpression = templateBuilder.buildTemplateFunction(
template.nodes, [], template.hasNgContent, template.ngContentSelectors);
const templateFunctionExpression = templateBuilder.buildTemplateFunction(template.nodes, []);
// e.g. `consts: 2`
definitionMap.set('consts', o.literal(templateBuilder.getConstCount()));
@ -371,11 +370,7 @@ export function compileComponentFromRender2(
const meta: R3ComponentMetadata = {
...directiveMetadataFromGlobalMetadata(component, outputCtx, reflector),
selector: component.selector,
template: {
nodes: render3Ast.nodes,
hasNgContent: render3Ast.hasNgContent,
ngContentSelectors: render3Ast.ngContentSelectors,
},
template: {nodes: render3Ast.nodes},
directives: [],
pipes: typeMapToExpressionMap(pipeTypeByName, outputCtx),
viewQueries: queriesFromGlobalMetadata(component.viewQueries, outputCtx),

74
packages/compiler/src/render3/view/template.ts
View File

@ -58,6 +58,8 @@ export function renderFlagCheckIfStmt(
return o.ifStmt(o.variable(RENDER_FLAGS).bitwiseAnd(o.literal(flags), null, false), statements);
}
// Default selector used by `<ng-content>` if none specified
const DEFAULT_CONTENT_SELECTOR = '*';
export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver {
private _dataIndex = 0;
private _bindingContext = 0;
@ -102,6 +104,12 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
private fileBasedI18nSuffix: string;
// Whether the template includes <ng-content> tags.
private _hasNgContent: boolean = false;
// Selectors found in the <ng-content> tags in the template.
private _ngContentSelectors: string[] = [];
constructor(
private constantPool: ConstantPool, parentBindingScope: BindingScope, private level = 0,
private contextName: string|null, private i18nContext: I18nContext|null,
@ -154,9 +162,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
});
}
buildTemplateFunction(
nodes: t.Node[], variables: t.Variable[], hasNgContent: boolean = false,
ngContentSelectors: string[] = [], i18n?: i18n.AST): o.FunctionExpr {
buildTemplateFunction(nodes: t.Node[], variables: t.Variable[], i18n?: i18n.AST): o.FunctionExpr {
if (this._namespace !== R3.namespaceHTML) {
this.creationInstruction(null, this._namespace);
}
@ -164,22 +170,6 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
// Create variable bindings
variables.forEach(v => this.registerContextVariables(v));
// Output a `ProjectionDef` instruction when some `<ng-content>` are present
if (hasNgContent) {
const parameters: o.Expression[] = [];
// Only selectors with a non-default value are generated
if (ngContentSelectors.length > 1) {
const r3Selectors = ngContentSelectors.map(s => core.parseSelectorToR3Selector(s));
// `projectionDef` needs both the parsed and raw value of the selectors
const parsed = this.constantPool.getConstLiteral(asLiteral(r3Selectors), true);
const unParsed = this.constantPool.getConstLiteral(asLiteral(ngContentSelectors), true);
parameters.push(parsed, unParsed);
}
this.creationInstruction(null, R3.projectionDef, parameters);
}
// Initiate i18n context in case:
// - this template has parent i18n context
// - or the template has i18n meta associated with it,
@ -198,6 +188,26 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
// resolving bindings. We also count bindings in this pass as we walk bound expressions.
t.visitAll(this, nodes);
// Output a `ProjectionDef` instruction when some `<ng-content>` are present
if (this._hasNgContent) {
const parameters: o.Expression[] = [];
// Only selectors with a non-default value are generated
if (this._ngContentSelectors.length) {
const r3Selectors = this._ngContentSelectors.map(s => core.parseSelectorToR3Selector(s));
// `projectionDef` needs both the parsed and raw value of the selectors
const parsed = this.constantPool.getConstLiteral(asLiteral(r3Selectors), true);
const unParsed =
this.constantPool.getConstLiteral(asLiteral(this._ngContentSelectors), true);
parameters.push(parsed, unParsed);
}
// Since we accumulate ngContent selectors while processing template elements,
// we *prepend* `projectionDef` to creation instructions block, to put it before
// any `projection` instructions
this.creationInstruction(null, R3.projectionDef, parameters, /* prepend */ true);
}
// Add total binding count to pure function count so pure function instructions are
// generated with the correct slot offset when update instructions are processed.
this._pureFunctionSlots += this._bindingSlots;
@ -399,8 +409,11 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
}
visitContent(ngContent: t.Content) {
this._hasNgContent = true;
const slot = this.allocateDataSlot();
const selectorIndex = ngContent.selectorIndex;
let selectorIndex = ngContent.selector === DEFAULT_CONTENT_SELECTOR ?
0 :
this._ngContentSelectors.push(ngContent.selector);
const parameters: o.Expression[] = [o.literal(slot)];
const attributeAsList: string[] = [];
@ -724,7 +737,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
// template definition. e.g. <div *ngIf="showing"> {{ foo }} </div> <div #foo></div>
this._nestedTemplateFns.push(() => {
const templateFunctionExpr = templateVisitor.buildTemplateFunction(
template.children, template.variables, false, [], template.i18n);
template.children, template.variables, template.i18n);
this.constantPool.statements.push(templateFunctionExpr.toDeclStmt(templateName, null));
});
@ -834,8 +847,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
// bindings. e.g. {{ foo }} <div #foo></div>
private instructionFn(
fns: (() => o.Statement)[], span: ParseSourceSpan|null, reference: o.ExternalReference,
paramsOrFn: o.Expression[]|(() => o.Expression[])): void {
fns.push(() => {
paramsOrFn: o.Expression[]|(() => o.Expression[]), prepend: boolean = false): void {
fns[prepend ? 'unshift' : 'push'](() => {
const params = Array.isArray(paramsOrFn) ? paramsOrFn : paramsOrFn();
return instruction(span, reference, params).toStmt();
});
@ -856,8 +869,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
private creationInstruction(
span: ParseSourceSpan|null, reference: o.ExternalReference,
paramsOrFn?: o.Expression[]|(() => o.Expression[])) {
this.instructionFn(this._creationCodeFns, span, reference, paramsOrFn || []);
paramsOrFn?: o.Expression[]|(() => o.Expression[]), prepend?: boolean) {
this.instructionFn(this._creationCodeFns, span, reference, paramsOrFn || [], prepend);
}
private updateInstruction(
@ -1398,14 +1411,14 @@ function interpolate(args: o.Expression[]): o.Expression {
export function parseTemplate(
template: string, templateUrl: string,
options: {preserveWhitespaces?: boolean, interpolationConfig?: InterpolationConfig} = {}):
{errors?: ParseError[], nodes: t.Node[], hasNgContent: boolean, ngContentSelectors: string[]} {
{errors?: ParseError[], nodes: t.Node[]} {
const {interpolationConfig, preserveWhitespaces} = options;
const bindingParser = makeBindingParser(interpolationConfig);
const htmlParser = new HtmlParser();
const parseResult = htmlParser.parse(template, templateUrl, true, interpolationConfig);
if (parseResult.errors && parseResult.errors.length > 0) {
return {errors: parseResult.errors, nodes: [], hasNgContent: false, ngContentSelectors: []};
return {errors: parseResult.errors, nodes: []};
}
let rootNodes: html.Node[] = parseResult.rootNodes;
@ -1428,13 +1441,12 @@ export function parseTemplate(
new I18nMetaVisitor(interpolationConfig, /* keepI18nAttrs */ false), rootNodes);
}
const {nodes, hasNgContent, ngContentSelectors, errors} =
htmlAstToRender3Ast(rootNodes, bindingParser);
const {nodes, errors} = htmlAstToRender3Ast(rootNodes, bindingParser);
if (errors && errors.length > 0) {
return {errors, nodes: [], hasNgContent: false, ngContentSelectors: []};
return {errors, nodes: []};
}
return {nodes, hasNgContent, ngContentSelectors};
return {nodes};
}
/**

42
packages/compiler/test/render3/r3_template_transform_spec.ts
View File

@ -39,7 +39,7 @@ class R3AstHumanizer implements t.Visitor<void> {
}
visitContent(content: t.Content) {
this.result.push(['Content', content.selectorIndex]);
this.result.push(['Content', content.selector]);
t.visitAll(this, content.attributes);
}
@ -110,17 +110,15 @@ describe('R3 template transform', () => {
it('should parse ngContent', () => {
const res = parse('<ng-content select="a"></ng-content>');
expect(res.hasNgContent).toEqual(true);
expect(res.ngContentSelectors).toEqual(['a']);
expectFromR3Nodes(res.nodes).toEqual([
['Content', 1],
['Content', 'a'],
['TextAttribute', 'select', 'a'],
]);
});
it('should parse ngContent when it contains WS only', () => {
expectFromHtml('<ng-content select="a"> \n </ng-content>').toEqual([
['Content', 1],
['Content', 'a'],
['TextAttribute', 'select', 'a'],
]);
});
@ -128,7 +126,7 @@ describe('R3 template transform', () => {
it('should parse ngContent regardless the namespace', () => {
expectFromHtml('<svg><ng-content select="a"></ng-content></svg>').toEqual([
['Element', ':svg:svg'],
['Content', 1],
['Content', 'a'],
['TextAttribute', 'select', 'a'],
]);
});
@ -377,30 +375,16 @@ describe('R3 template transform', () => {
describe('ng-content', () => {
it('should parse ngContent without selector', () => {
const res = parse('<ng-content></ng-content>');
expect(res.hasNgContent).toEqual(true);
expect(res.ngContentSelectors).toEqual([]);
expectFromR3Nodes(res.nodes).toEqual([
['Content', 0],
]);
});
it('should parse ngContent with a * selector', () => {
const res = parse('<ng-content></ng-content>');
const selectors = [''];
expect(res.hasNgContent).toEqual(true);
expect(res.ngContentSelectors).toEqual([]);
expectFromR3Nodes(res.nodes).toEqual([
['Content', 0],
['Content', '*'],
]);
});
it('should parse ngContent with a specific selector', () => {
const res = parse('<ng-content select="tag[attribute]"></ng-content>');
const selectors = ['', 'tag[attribute]'];
expect(res.hasNgContent).toEqual(true);
expect(res.ngContentSelectors).toEqual(['tag[attribute]']);
expectFromR3Nodes(res.nodes).toEqual([
['Content', 1],
['Content', selectors[1]],
['TextAttribute', 'select', selectors[1]],
]);
});
@ -408,24 +392,20 @@ describe('R3 template transform', () => {
it('should parse ngContent with a selector', () => {
const res = parse(
'<ng-content select="a"></ng-content><ng-content></ng-content><ng-content select="b"></ng-content>');
const selectors = ['', 'a', 'b'];
expect(res.hasNgContent).toEqual(true);
expect(res.ngContentSelectors).toEqual(['a', 'b']);
const selectors = ['*', 'a', 'b'];
expectFromR3Nodes(res.nodes).toEqual([
['Content', 1],
['Content', selectors[1]],
['TextAttribute', 'select', selectors[1]],
['Content', 0],
['Content', 2],
['Content', selectors[0]],
['Content', selectors[2]],
['TextAttribute', 'select', selectors[2]],
]);
});
it('should parse ngProjectAs as an attribute', () => {
const res = parse('<ng-content ngProjectAs="a"></ng-content>');
expect(res.hasNgContent).toEqual(true);
expect(res.ngContentSelectors).toEqual([]);
expectFromR3Nodes(res.nodes).toEqual([
['Content', 0],
['Content', '*'],
['TextAttribute', 'ngProjectAs', 'a'],
]);
});