Skip to content

Commit 768239a

Browse files
crisbetoalxhub
crisbeto
authored and
alxhub
committed
perf(compiler): reduce allocations for let declarations only used in the same view (#60512)
We have some code that avoids `storeLet` calls for declarations only used in the same view, however we didn't previously remove the corresponding `declareLet` calls, because of the following case: ``` @let foo = something$ | async; <!-- First in the template --> {{foo}} ``` Here we need a `TNode` (created by `declareLet`) in order for DI to work correctly. Since this is only required when using pipes, we can optimize away expressions that do not have pipes. PR Close #60512
1 parent 1b4b44e commit 768239a

20 files changed

+202
-79
lines changed

‎packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/template_literals.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ if (rf & 2) {
66
$r3$.ɵɵadvance(2);
77
$r3$.ɵɵtextInterpolate1("With pipe: ", $r3$.ɵɵpipeBind1(6, 4, `hello ${ctx.name}`));
88
const $insideLet_r1$ = `Hello ${ctx.name}`;
9-
$r3$.ɵɵadvance(4);
9+
$r3$.ɵɵadvance(3);
1010
$r3$.ɵɵtextInterpolate1(" Inside let: ", $insideLet_r1$);
1111
}

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/GOLDEN_PARTIAL.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -737,3 +737,58 @@ export declare class MyApp {
737737
static ɵcmp: i0.ɵɵComponentDeclaration<MyApp, "ng-component", never, {}, {}, never, never, true, never>;
738738
}
739739

740+
/****************************************************************************************************
741+
* PARTIAL FILE: let_with_pipe_optimization.js
742+
****************************************************************************************************/
743+
import { Component, Pipe } from '@angular/core';
744+
import * as i0 from "@angular/core";
745+
export class DoublePipe {
746+
transform(value) {
747+
return value * 2;
748+
}
749+
}
750+
DoublePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: DoublePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
751+
DoublePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: DoublePipe, isStandalone: true, name: "double" });
752+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: DoublePipe, decorators: [{
753+
type: Pipe,
754+
args: [{
755+
name: 'double',
756+
}]
757+
}] });
758+
export class MyApp {
759+
constructor() {
760+
this.value = 1;
761+
}
762+
}
763+
MyApp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, deps: [], target: i0.ɵɵFactoryTarget.Component });
764+
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyApp, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
765+
@let foo = (value | double) + 3;
766+
{{foo}}
767+
`, isInline: true, dependencies: [{ kind: "pipe", type: DoublePipe, name: "double" }] });
768+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, decorators: [{
769+
type: Component,
770+
args: [{
771+
template: `
772+
@let foo = (value | double) + 3;
773+
{{foo}}
774+
`,
775+
imports: [DoublePipe],
776+
}]
777+
}] });
778+
779+
/****************************************************************************************************
780+
* PARTIAL FILE: let_with_pipe_optimization.d.ts
781+
****************************************************************************************************/
782+
import { PipeTransform } from '@angular/core';
783+
import * as i0 from "@angular/core";
784+
export declare class DoublePipe implements PipeTransform {
785+
transform(value: number): number;
786+
static ɵfac: i0.ɵɵFactoryDeclaration<DoublePipe, never>;
787+
static ɵpipe: i0.ɵɵPipeDeclaration<DoublePipe, "double", true>;
788+
}
789+
export declare class MyApp {
790+
value: number;
791+
static ɵfac: i0.ɵɵFactoryDeclaration<MyApp, never>;
792+
static ɵcmp: i0.ɵɵComponentDeclaration<MyApp, "ng-component", never, {}, {}, never, never, true, never>;
793+
}
794+

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/TEST_CASES.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,23 @@
292292
"failureMessage": "Incorrect template"
293293
}
294294
]
295+
},
296+
{
297+
"description": "should not optimize away declareLet if expression is using a pipe",
298+
"inputFiles": [
299+
"let_with_pipe_optimization.ts"
300+
],
301+
"expectations": [
302+
{
303+
"files": [
304+
{
305+
"expected": "let_with_pipe_optimization_template.js",
306+
"generated": "let_with_pipe_optimization.js"
307+
}
308+
],
309+
"failureMessage": "Incorrect template"
310+
}
311+
]
295312
}
296313
]
297314
}

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/let_for_loop_template.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
function MyApp_For_1_For_2_Template(rf, ctx) {
22
if (rf & 1) {
3-
$r3$.ɵɵdeclareLet(0);
4-
$r3$.ɵɵtext(1);
3+
$r3$.ɵɵtext(0);
54
}
65
if (rf & 2) {
76
const ɵ$index_3_r1 = ctx.$index;
87
$r3$.ɵɵnextContext();
98
const $outerFirst_1$ = $r3$.ɵɵreadContextLet(0);
109
const $innerFirst_2$ = ɵ$index_3_r1 === 0;
11-
$r3$.ɵɵadvance();
1210
$r3$.ɵɵtextInterpolate1(" ", $outerFirst_1$ || $innerFirst_2$, " ");
1311
}
1412
}
@@ -18,7 +16,7 @@ function MyApp_For_1_For_2_Template(rf, ctx) {
1816
function MyApp_For_1_Template(rf, ctx) {
1917
if (rf & 1) {
2018
$r3$.ɵɵdeclareLet(0);
21-
$r3$.ɵɵrepeaterCreate(1, MyApp_For_1_For_2_Template, 2, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
19+
$r3$.ɵɵrepeaterCreate(1, MyApp_For_1_For_2_Template, 1, 1, null, null, $r3$.ɵɵrepeaterTrackByIdentity);
2220
}
2321
if (rf & 2) {
2422
const $item_r4$ = ctx.$implicit;

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/let_in_child_view_template.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
function MyApp_Conditional_0_Conditional_0_Template(rf, ctx) {
22
if (rf & 1) {
3-
$r3$.ɵɵdeclareLet(0);
4-
$r3$.ɵɵtext(1);
3+
$r3$.ɵɵtext(0);
54
}
65
if (rf & 2) {
76
$r3$.ɵɵnextContext();
87
const $two_0$ = $r3$.ɵɵreadContextLet(1);
98
const $three_1$ = $two_0$ + 1;
10-
$r3$.ɵɵadvance();
119
$r3$.ɵɵtextInterpolate1(" ", $three_1$, " ");
1210
}
1311
}
@@ -16,7 +14,7 @@ function MyApp_Conditional_0_Conditional_0_Template(rf, ctx) {
1614

1715
function MyApp_Conditional_0_Template(rf, ctx) {
1816
if (rf & 1) {
19-
$r3$.ɵɵconditionalCreate(0, MyApp_Conditional_0_Conditional_0_Template, 2, 1);
17+
$r3$.ɵɵconditionalCreate(0, MyApp_Conditional_0_Conditional_0_Template, 1, 1);
2018
$r3$.ɵɵdeclareLet(1);
2119
}
2220
if (rf & 2) {

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/let_invalid_forward_ref_template.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
function MyApp_ng_template_0_Template(rf, ctx) {
22
if (rf & 1) {
33
$r3$.ɵɵtext(0);
4-
$r3$.ɵɵdeclareLet(1);
54
}
65
if (rf & 2) {
76
const $ctx_r0$ = $r3$.ɵɵnextContext();
@@ -14,6 +13,6 @@ function MyApp_ng_template_0_Template(rf, ctx) {
1413

1514
function MyApp_Template(rf, ctx) {
1615
if (rf & 1) {
17-
$r3$.ɵɵtemplate(0, MyApp_ng_template_0_Template, 2, 1, "ng-template");
16+
$r3$.ɵɵtemplate(0, MyApp_ng_template_0_Template, 1, 1, "ng-template");
1817
}
1918
}

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/let_local_forward_refs_template.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
$r3$.ɵɵdefineComponent({
22
…
3-
decls: 4,
3+
decls: 3,
44
vars: 1,
55
…
66
template: function MyApp_Template(rf, ctx) {
77
if (rf & 1) {
8-
$r3$.ɵɵdeclareLet(0);
9-
$r3$.ɵɵtext(1);
10-
$r3$.ɵɵelement(2, "input", null, 0);
8+
$r3$.ɵɵtext(0);
9+
$r3$.ɵɵelement(1, "input", null, 0);
1110
}
1211
if (rf & 2) {
13-
const $name_r1$ = $r3$.ɵɵreference(3);
12+
const $name_r1$ = $r3$.ɵɵreference(2);
1413
const $message_1$ = "Hello, " + $name_r1$.value;
15-
$r3$.ɵɵadvance();
1614
$r3$.ɵɵtextInterpolate1(" ", $message_1$, " ");
1715
}
1816
},

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/let_local_refs_template.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
$r3$.ɵɵdefineComponent({
22
…
3-
decls: 6,
3+
decls: 5,
44
vars: 1,
55
…
66
template: function MyApp_Template(rf, ctx) {
77
if (rf & 1) {
88
$r3$.ɵɵelement(0, "input", null, 0)(2, "input", null, 1);
9-
$r3$.ɵɵdeclareLet(4);
10-
$r3$.ɵɵtext(5);
9+
$r3$.ɵɵtext(4);
1110
}
1211
if (rf & 2) {
1312
const $name_r1$ = $r3$.ɵɵreference(1);
1413
const $lastName_r2$ = $r3$.ɵɵreference(3);
1514
const $fullName_2$ = $name_r1$.value + " " + $lastName_r2$.value;
16-
$r3$.ɵɵadvance(5);
15+
$r3$.ɵɵadvance(4);
1716
$r3$.ɵɵtextInterpolate1(" Hello, ", $fullName_2$, " ");
1817
}
1918
},

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/let_multiple_optimization_template.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
$r3$.ɵɵdefineComponent({
22
…
3-
decls: 6,
3+
decls: 2,
44
vars: 2,
55
template: function MyApp_Template(rf, ctx) {
66
if (rf & 1) {
77
$r3$.ɵɵtext(0);
8-
$r3$.ɵɵdeclareLet(1)(2)(3)(4);
9-
$r3$.ɵɵtext(5);
8+
$r3$.ɵɵtext(1);
109
}
1110
if (rf & 2) {
1211
$r3$.ɵɵtextInterpolate1(" ", ctx.value, " ");
1312
const $one_1$ = ctx.value + 1;
1413
const $two_2$ = $one_1$ + 1;
1514
const $three_3$ = $two_2$ + 1;
1615
$three_3$ + 1;
17-
$r3$.ɵɵadvance(5);
16+
$r3$.ɵɵadvance();
1817
$r3$.ɵɵtextInterpolate1(" ", ctx.value, " ");
1918
}
2019
},

‎packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_let/let_optimization_child_view_template.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
function MyApp_Conditional_6_Template(rf, ctx) {
1+
function MyApp_Conditional_3_Template(rf, ctx) {
22
if (rf & 1) {
33
$r3$.ɵɵtext(0);
44
}
55
if (rf & 2) {
66
$r3$.ɵɵnextContext();
7-
const $three_0$ = $r3$.ɵɵreadContextLet(3);
7+
const $three_0$ = $r3$.ɵɵreadContextLet(1);
88
$r3$.ɵɵtextInterpolate1(" ", $three_0$, " ");
99
}
1010
}
@@ -13,26 +13,26 @@ function MyApp_Conditional_6_Template(rf, ctx) {
1313

1414
$r3$.ɵɵdefineComponent({
1515
…
16-
decls: 7,
16+
decls: 4,
1717
vars: 4,
1818
template: function MyApp_Template(rf, ctx) {
1919
if (rf & 1) {
2020
$r3$.ɵɵtext(0);
21-
$r3$.ɵɵdeclareLet(1)(2)(3)(4);
22-
$r3$.ɵɵtext(5);
23-
$r3$.ɵɵconditionalCreate(6, MyApp_Conditional_6_Template, 1, 1);
21+
$r3$.ɵɵdeclareLet(1);
22+
$r3$.ɵɵtext(2);
23+
$r3$.ɵɵconditionalCreate(3, MyApp_Conditional_3_Template, 1, 1);
2424
}
2525
if (rf & 2) {
2626
$r3$.ɵɵtextInterpolate1(" ", ctx.value, " ");
2727
const $one_1$ = ctx.value + 1;
2828
const $two_2$ = $one_1$ + 1;
29-
$r3$.ɵɵadvance(3);
29+
$r3$.ɵɵadvance();
3030
const $three_3$ = i0.ɵɵstoreLet($two_2$ + 1);
3131
$three_3$ + 1;
32-
$r3$.ɵɵadvance(2);
32+
$r3$.ɵɵadvance();
3333
$r3$.ɵɵtextInterpolate1(" ", ctx.value, " ");
3434
$r3$.ɵɵadvance();
35-
$r3$.ɵɵconditional(true ? 6 : -1);
35+
$r3$.ɵɵconditional(true ? 3 : -1);
3636
}
3737
},
3838
…

0 commit comments

Comments
 (0)