Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Project root node of @if and @for blocks #52414

Closed
wants to merge 2 commits into from
Closed

Project root node of @if and @for blocks #52414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6e6783
fix(compiler): project control flow root elements into correct slot
crisbeto Oct 27, 2023
d0b7cc3
refactor(compiler): implement control flow content projection fix in …
crisbeto Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
74 changes: 74 additions & 0 deletions ...s/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/GOLDEN_PARTIAL.js
View file
Open in desktop
Expand Up @@ -1652,3 +1652,77 @@ export declare class MyApp {
static ɵcmp: i0.ɵɵComponentDeclaration<MyApp, "ng-component", never, {}, {}, never, never, true, never>;
}

/****************************************************************************************************
* PARTIAL FILE: if_element_root_node.js
****************************************************************************************************/
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
constructor() {
this.expr = true;
}
}
MyApp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "ng-component", ngImport: i0, template: `
@if (expr) {
<div foo="1" bar="2">{{expr}}</div>
}
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, decorators: [{
type: Component,
args: [{
template: `
@if (expr) {
<div foo="1" bar="2">{{expr}}</div>
}
`,
}]
}] });

/****************************************************************************************************
* PARTIAL FILE: if_element_root_node.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
expr: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MyApp, "ng-component", never, {}, {}, never, never, false, never>;
}

/****************************************************************************************************
* PARTIAL FILE: for_element_root_node.js
****************************************************************************************************/
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
constructor() {
this.items = [1, 2, 3];
}
}
MyApp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "ng-component", ngImport: i0, template: `
@for (item of items; track item) {
<div foo="1" bar="2">{{item}}</div>
}
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, decorators: [{
type: Component,
args: [{
template: `
@for (item of items; track item) {
<div foo="1" bar="2">{{item}}</div>
}
`,
}]
}] });

/****************************************************************************************************
* PARTIAL FILE: for_element_root_node.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
items: number[];
static ɵfac: i0.ɵɵFactoryDeclaration<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MyApp, "ng-component", never, {}, {}, never, never, false, never>;
}

36 changes: 35 additions & 1 deletion ...ges/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/TEST_CASES.json
View file
Open in desktop
Expand Up @@ -513,6 +513,40 @@
"failureMessage": "Incorrect template"
}
]
},
{
"description": "should generate an if block with an element root node",
"inputFiles": [
"if_element_root_node.ts"
],
"expectations": [
{
"files": [
{
"expected": "if_element_root_node_template.js",
"generated": "if_element_root_node.js"
}
],
"failureMessage": "Incorrect template"
}
]
},
{
"description": "should generate a for block with an element root node",
"inputFiles": [
"for_element_root_node.ts"
],
"expectations": [
{
"files": [
{
"expected": "for_element_root_node_template.js",
"generated": "for_element_root_node.js"
}
],
"failureMessage": "Incorrect template"
}
]
}
]
}
}
2 changes: 1 addition & 1 deletion ...mpiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/basic_for_template.js
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...iance/test_cases/r3_view_compiler_control_flow/for_aliased_template_variables_template.js
View file
Open in desktop
Expand Up @@ -13,7 +13,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 6, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 6, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...r-cli/test/compliance/test_cases/r3_view_compiler_control_flow/for_data_slots_template.js
View file
Open in desktop
@@ -1,7 +1,7 @@
function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtemplate(0, MyApp_ng_template_0_Template, 0, 0, "ng-template");
$r3$.ɵɵrepeaterCreate(1, MyApp_For_2_Template, 1, 1, $r3$.ɵɵrepeaterTrackByIdentity, false, MyApp_ForEmpty_3_Template, 1, 0);
$r3$.ɵɵrepeaterCreate(1, MyApp_For_2_Template, 1, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity, false, MyApp_ForEmpty_3_Template, 1, 0);
$r3$.ɵɵtemplate(4, MyApp_ng_template_4_Template, 0, 0, "ng-template");
}
if (rf & 2) {
Expand Down
12 changes: 12 additions & 0 deletions ...ler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/for_element_root_node.ts
View file
Open in desktop
@@ -0,0 +1,12 @@
import {Component} from '@angular/core';

@Component({
template: `
@for (item of items; track item) {
<div foo="1" bar="2">{{item}}</div>
}
`,
})
export class MyApp {
items = [1, 2, 3];
}
3 changes: 3 additions & 0 deletions ...est/compliance/test_cases/r3_view_compiler_control_flow/for_element_root_node_template.js
View file
Open in desktop
@@ -0,0 +1,3 @@
consts: [["foo", "1", "bar", "2"]]
…
$r3$.ɵɵrepeaterCreate(0, MyApp_For_1_Template, 2, 1, "div", 0, i0.ɵɵrepeaterTrackByIdentity);
4 changes: 2 additions & 2 deletions ...st/compliance/test_cases/r3_view_compiler_control_flow/for_impure_track_reuse_template.js
View file
Open in desktop
Expand Up @@ -4,8 +4,8 @@ function $_forTrack0$($index, $item) {
…
function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵrepeaterCreate(0, MyApp_For_1_Template, 1, 1, $_forTrack0$, true);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, $_forTrack0$, true);
$r3$.ɵɵrepeaterCreate(0, MyApp_For_1_Template, 1, 1, null, null, $_forTrack0$, true);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, null, null, $_forTrack0$, true);
}
if (rf & 2) {
$r3$.ɵɵrepeater(0, ctx.items);
Expand Down
4 changes: 2 additions & 2 deletions ...test/compliance/test_cases/r3_view_compiler_control_flow/for_pure_track_reuse_template.js
View file
Open in desktop
Expand Up @@ -2,8 +2,8 @@ const $_forTrack0$ = ($index, $item) => $item.name[0].toUpperCase();
…
function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵrepeaterCreate(0, MyApp_For_1_Template, 1, 1, $_forTrack0$);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, $_forTrack0$);
$r3$.ɵɵrepeaterCreate(0, MyApp_For_1_Template, 1, 1, null, null, $_forTrack0$);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, null, null, $_forTrack0$);
}
if (rf & 2) {
$r3$.ɵɵrepeater(0, ctx.items);
Expand Down
2 changes: 1 addition & 1 deletion ...nce/test_cases/r3_view_compiler_control_flow/for_template_track_method_nested_template.js
View file
Open in desktop
@@ -1 +1 @@
$r3$.ɵɵrepeaterCreate(0, MyApp_ng_template_2_For_1_Template, 0, 0, $r3$.ɵɵcomponentInstance().trackFn);
$r3$.ɵɵrepeaterCreate(0, MyApp_ng_template_2_For_1_Template, 0, 0, null, null, $r3$.ɵɵcomponentInstance().trackFn);
2 changes: 1 addition & 1 deletion ...iance/test_cases/r3_view_compiler_control_flow/for_template_track_method_root_template.js
View file
Open in desktop
@@ -1 +1 @@
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 0, 0, ctx.trackFn);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 0, 0, null, null, ctx.trackFn);
2 changes: 1 addition & 1 deletion ...ance/test_cases/r3_view_compiler_control_flow/for_template_variables_listener_template.js
View file
Open in desktop
Expand Up @@ -17,7 +17,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 0, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 0, "div", null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...pliance/test_cases/r3_view_compiler_control_flow/for_template_variables_scope_template.js
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ function MyApp_For_2_Template(rf, ctx) {
function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtext(0);
$r3$.ɵɵrepeaterCreate(1, MyApp_For_2_Template, 1, 4, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(1, MyApp_For_2_Template, 1, 4, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵtext(3);
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...st/compliance/test_cases/r3_view_compiler_control_flow/for_template_variables_template.js
View file
Open in desktop
Expand Up @@ -13,7 +13,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 6, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 6, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...i/test/compliance/test_cases/r3_view_compiler_control_flow/for_track_by_field_template.js
View file
Open in desktop
Expand Up @@ -13,7 +13,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, $_forTrack0$);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, null, null, $_forTrack0$);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...i/test/compliance/test_cases/r3_view_compiler_control_flow/for_track_by_index_template.js
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, $r3$.ɵɵrepeaterTrackByIndex);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, null, null, $r3$.ɵɵrepeaterTrackByIndex);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...i/test/compliance/test_cases/r3_view_compiler_control_flow/for_track_literals_template.js
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ function $_forTrack0$($index, $item) {
…
function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵrepeaterCreate(0, MyApp_For_1_Template, 1, 1, $_forTrack0$, true);
$r3$.ɵɵrepeaterCreate(0, MyApp_For_1_Template, 1, 1, null, null, $_forTrack0$, true);
}
if (rf & 2) {
$r3$.ɵɵrepeater(0, ctx.items);
Expand Down
2 changes: 1 addition & 1 deletion ...r-cli/test/compliance/test_cases/r3_view_compiler_control_flow/for_with_empty_template.js
View file
Open in desktop
Expand Up @@ -18,7 +18,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, $r3$.ɵɵrepeaterTrackByIdentity, false, MyApp_ForEmpty_4_Template, 1, 0);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity, false, MyApp_ForEmpty_4_Template, 1, 0);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
2 changes: 1 addition & 1 deletion ...er-cli/test/compliance/test_cases/r3_view_compiler_control_flow/for_with_pipe_template.js
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 1, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵpipe(4, "test");
$r3$.ɵɵelementEnd();
}
Expand Down
12 changes: 12 additions & 0 deletions ...iler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/if_element_root_node.ts
View file
Open in desktop
@@ -0,0 +1,12 @@
import {Component} from '@angular/core';

@Component({
template: `
@if (expr) {
<div foo="1" bar="2">{{expr}}</div>
}
`,
})
export class MyApp {
expr = true;
}
3 changes: 3 additions & 0 deletions ...test/compliance/test_cases/r3_view_compiler_control_flow/if_element_root_node_template.js
View file
Open in desktop
@@ -0,0 +1,3 @@
consts: [["foo", "1", "bar", "2"]]
…
$r3$.ɵɵtemplate(0, MyApp_Conditional_0_Template, 2, 1, "div", 0);
2 changes: 1 addition & 1 deletion ...compliance/test_cases/r3_view_compiler_control_flow/if_nested_alias_listeners_template.js
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@ function MyApp_Conditional_0_Conditional_1_Template(rf, ctx) {
return $r3$.ɵɵresetView($ctx_r10$.log($ctx_r10$.value(), $root_r1$, $inner_r3$));
});
$r3$.ɵɵelementEnd();
$r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 0);
$r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 0, "button");
}
if (rf & 2) {
const $ctx_r2$ = $r3$.ɵɵnextContext(2);
Expand Down
2 changes: 1 addition & 1 deletion ...e/test_cases/r3_view_compiler_control_flow/if_nested_alias_listeners_template.pipeline.js
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ function MyApp_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) {
return $r3$.ɵɵresetView($ctx_r10$.log($ctx_r10$.value(), $root_r1$, $inner_r3$));
});
$r3$.ɵɵelementEnd();
$r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 0);
$r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 0, "button");
}
if (rf & 2) {
let $MyApp_Conditional_0_Conditional_1_contFlowTmp$;
Expand Down
4 changes: 2 additions & 2 deletions ...piler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/nested_for_template.js
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ function MyApp_For_3_For_2_Template(rf, ctx) {
function MyApp_For_3_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtext(0);
$r3$.ɵɵrepeaterCreate(1, MyApp_For_3_For_2_Template, 1, 2, $r3$.ɵɵrepeaterTrackByIndex);
$r3$.ɵɵrepeaterCreate(1, MyApp_For_3_For_2_Template, 1, 2, null, null, $r3$.ɵɵrepeaterTrackByIndex);
}
if (rf & 2) {
const $item_r1$ = ctx.$implicit;
Expand All @@ -25,7 +25,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 3, 1, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 3, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down
4 changes: 2 additions & 2 deletions ...liance/test_cases/r3_view_compiler_control_flow/nested_for_template_variables_template.js
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ function MyApp_For_3_For_2_Template(rf, ctx) {
function MyApp_For_3_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtext(0);
$r3$.ɵɵrepeaterCreate(1, MyApp_For_3_For_2_Template, 1, 2, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(1, MyApp_For_3_For_2_Template, 1, 2, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
}
if (rf & 2) {
const $item_r1$ = ctx.$implicit;
Expand All @@ -25,7 +25,7 @@ function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 3, 1, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵrepeaterCreate(2, MyApp_For_3_Template, 3, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
Expand Down