Skip to content

Commit 4317a4b

Browse files
wagnermacielwagnermaciel
authored
refactor(table-benchmark): move template to a separate html file (#19977)
* refactor(table-benchmark): move template to a separate html file * Now that ng_assets has been added to component_benchmark as a way to pass html to the ng_module, we can move the html out of our component decorators and into their own html files. * fixup! refactor(table-benchmark): move template to a separate html file * fixup! refactor(table-benchmark): move template to a separate html file
1 parent 5c988fc commit 4317a4b

File tree

5 files changed

+123
-122
lines changed

5 files changed

+123
-122
lines changed

‎test/benchmarks/material/table/BUILD.bazel

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ component_benchmark(
88
"@npm//protractor",
99
"@npm//@types/jasmine",
1010
],
11+
ng_assets = [
12+
":app.module.html",
13+
":basic-table.html",
14+
],
1115
ng_deps = [
1216
"@npm//@angular/core",
1317
"@npm//@angular/platform-browser",

‎test/benchmarks/material/table/app.module.ts

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,7 @@ import {
2020
// tslint:disable:max-line-length
2121
@Component({
2222
selector: 'app-root',
23-
template: `
24-
<button id="hide" (click)="hide()">Hide</button>
25-
<button id="show-10-rows-5-cols" (click)="showTenRowsFiveCols()">Show 10 Rows 5 Cols</button>
26-
<button id="show-100-rows-5-cols" (click)="showOneHundredRowsFiveCols()">Show 100 Rows 5 Cols</button>
27-
<button id="show-1000-rows-5-cols" (click)="showOneThousandRowsFiveCols()">Show 1000 Rows 5 Cols</button>
28-
<button id="show-10-rows-10-cols" (click)="showTenRowsTenCols()">Show 10 Rows 10 Cols</button>
29-
<button id="show-10-rows-20-cols" (click)="showTenRowsTwentyCols()">Show 10 Rows 20 Cols</button>
30-
31-
<basic-table [rows]="tenRows" [cols]="fiveCols" *ngIf="isTenRowsFiveColsVisible"></basic-table>
32-
<basic-table [rows]="oneHundredRows" [cols]="fiveCols" *ngIf="isOneHundredRowsFiveColsVisible"></basic-table>
33-
<basic-table [rows]="oneThousandRows" [cols]="fiveCols" *ngIf="isOneThousandRowsFiveColsVisible"></basic-table>
34-
35-
<basic-table [rows]="tenRows" [cols]="tenCols" *ngIf="isTenRowsTenColsVisible"></basic-table>
36-
<basic-table [rows]="tenRows" [cols]="twentyCols" *ngIf="isTenRowsTwentyColsVisible"></basic-table>
37-
`,
23+
templateUrl: './app.module.html',
3824
encapsulation: ViewEncapsulation.None,
3925
styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
4026
})

‎test/benchmarks/material/table/basic-table.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<table mat-table [dataSource]="rows" class="mat-elevation-z8">
2+
<ng-container matColumnDef="a">
3+
<th mat-header-cell *matHeaderCellDef> A </th>
4+
<td mat-cell *matCellDef="let cell"> {{cell.a}} </td>
5+
</ng-container>
6+
7+
<ng-container matColumnDef="b">
8+
<th mat-header-cell *matHeaderCellDef> B </th>
9+
<td mat-cell *matCellDef="let cell"> {{cell.b}} </td>
10+
</ng-container>
11+
12+
<ng-container matColumnDef="c">
13+
<th mat-header-cell *matHeaderCellDef> C </th>
14+
<td mat-cell *matCellDef="let cell"> {{cell.c}} </td>
15+
</ng-container>
16+
17+
<ng-container matColumnDef="d">
18+
<th mat-header-cell *matHeaderCellDef> D </th>
19+
<td mat-cell *matCellDef="let cell"> {{cell.d}} </td>
20+
</ng-container>
21+
22+
<ng-container matColumnDef="e">
23+
<th mat-header-cell *matHeaderCellDef> E </th>
24+
<td mat-cell *matCellDef="let cell"> {{cell.e}} </td>
25+
</ng-container>
26+
27+
<ng-container matColumnDef="f">
28+
<th mat-header-cell *matHeaderCellDef> F </th>
29+
<td mat-cell *matCellDef="let cell"> {{cell.f}} </td>
30+
</ng-container>
31+
32+
<ng-container matColumnDef="g">
33+
<th mat-header-cell *matHeaderCellDef> G </th>
34+
<td mat-cell *matCellDef="let cell"> {{cell.g}} </td>
35+
</ng-container>
36+
37+
<ng-container matColumnDef="h">
38+
<th mat-header-cell *matHeaderCellDef> H </th>
39+
<td mat-cell *matCellDef="let cell"> {{cell.h}} </td>
40+
</ng-container>
41+
42+
<ng-container matColumnDef="i">
43+
<th mat-header-cell *matHeaderCellDef> I </th>
44+
<td mat-cell *matCellDef="let cell"> {{cell.i}} </td>
45+
</ng-container>
46+
47+
<ng-container matColumnDef="j">
48+
<th mat-header-cell *matHeaderCellDef> J </th>
49+
<td mat-cell *matCellDef="let cell"> {{cell.j}} </td>
50+
</ng-container>
51+
52+
<ng-container matColumnDef="k">
53+
<th mat-header-cell *matHeaderCellDef> K </th>
54+
<td mat-cell *matCellDef="let cell"> {{cell.k}} </td>
55+
</ng-container>
56+
57+
<ng-container matColumnDef="l">
58+
<th mat-header-cell *matHeaderCellDef> L </th>
59+
<td mat-cell *matCellDef="let cell"> {{cell.l}} </td>
60+
</ng-container>
61+
62+
<ng-container matColumnDef="m">
63+
<th mat-header-cell *matHeaderCellDef> M </th>
64+
<td mat-cell *matCellDef="let cell"> {{cell.m}} </td>
65+
</ng-container>
66+
67+
<ng-container matColumnDef="n">
68+
<th mat-header-cell *matHeaderCellDef> N </th>
69+
<td mat-cell *matCellDef="let cell"> {{cell.n}} </td>
70+
</ng-container>
71+
72+
<ng-container matColumnDef="o">
73+
<th mat-header-cell *matHeaderCellDef> O </th>
74+
<td mat-cell *matCellDef="let cell"> {{cell.o}} </td>
75+
</ng-container>
76+
77+
<ng-container matColumnDef="p">
78+
<th mat-header-cell *matHeaderCellDef> P </th>
79+
<td mat-cell *matCellDef="let cell"> {{cell.p}} </td>
80+
</ng-container>
81+
82+
<ng-container matColumnDef="q">
83+
<th mat-header-cell *matHeaderCellDef> Q </th>
84+
<td mat-cell *matCellDef="let cell"> {{cell.q}} </td>
85+
</ng-container>
86+
87+
<ng-container matColumnDef="r">
88+
<th mat-header-cell *matHeaderCellDef> R </th>
89+
<td mat-cell *matCellDef="let cell"> {{cell.r}} </td>
90+
</ng-container>
91+
92+
<ng-container matColumnDef="s">
93+
<th mat-header-cell *matHeaderCellDef> S </th>
94+
<td mat-cell *matCellDef="let cell"> {{cell.s}} </td>
95+
</ng-container>
96+
97+
<ng-container matColumnDef="t">
98+
<th mat-header-cell *matHeaderCellDef> T </th>
99+
<td mat-cell *matCellDef="let cell"> {{cell.t}} </td>
100+
</ng-container>
101+
102+
<tr mat-header-row *matHeaderRowDef="cols"></tr>
103+
<tr mat-row *matRowDef="let row; columns: cols;"></tr>
104+
</table>

‎test/benchmarks/material/table/basic-table.ts

Lines changed: 1 addition & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -10,113 +10,7 @@ import {Component, Input} from '@angular/core';
1010

1111
@Component({
1212
selector: 'basic-table',
13-
template: `
14-
<table mat-table [dataSource]="rows" class="mat-elevation-z8">
15-
16-
<ng-container matColumnDef="a">
17-
<th mat-header-cell *matHeaderCellDef> A </th>
18-
<td mat-cell *matCellDef="let cell"> {{cell.a}} </td>
19-
</ng-container>
20-
21-
<ng-container matColumnDef="b">
22-
<th mat-header-cell *matHeaderCellDef> B </th>
23-
<td mat-cell *matCellDef="let cell"> {{cell.b}} </td>
24-
</ng-container>
25-
26-
<ng-container matColumnDef="c">
27-
<th mat-header-cell *matHeaderCellDef> C </th>
28-
<td mat-cell *matCellDef="let cell"> {{cell.c}} </td>
29-
</ng-container>
30-
31-
<ng-container matColumnDef="d">
32-
<th mat-header-cell *matHeaderCellDef> D </th>
33-
<td mat-cell *matCellDef="let cell"> {{cell.d}} </td>
34-
</ng-container>
35-
36-
<ng-container matColumnDef="e">
37-
<th mat-header-cell *matHeaderCellDef> E </th>
38-
<td mat-cell *matCellDef="let cell"> {{cell.e}} </td>
39-
</ng-container>
40-
41-
<ng-container matColumnDef="f">
42-
<th mat-header-cell *matHeaderCellDef> F </th>
43-
<td mat-cell *matCellDef="let cell"> {{cell.f}} </td>
44-
</ng-container>
45-
46-
<ng-container matColumnDef="g">
47-
<th mat-header-cell *matHeaderCellDef> G </th>
48-
<td mat-cell *matCellDef="let cell"> {{cell.g}} </td>
49-
</ng-container>
50-
51-
<ng-container matColumnDef="h">
52-
<th mat-header-cell *matHeaderCellDef> H </th>
53-
<td mat-cell *matCellDef="let cell"> {{cell.h}} </td>
54-
</ng-container>
55-
56-
<ng-container matColumnDef="i">
57-
<th mat-header-cell *matHeaderCellDef> I </th>
58-
<td mat-cell *matCellDef="let cell"> {{cell.i}} </td>
59-
</ng-container>
60-
61-
<ng-container matColumnDef="j">
62-
<th mat-header-cell *matHeaderCellDef> J </th>
63-
<td mat-cell *matCellDef="let cell"> {{cell.j}} </td>
64-
</ng-container>
65-
66-
<ng-container matColumnDef="k">
67-
<th mat-header-cell *matHeaderCellDef> K </th>
68-
<td mat-cell *matCellDef="let cell"> {{cell.k}} </td>
69-
</ng-container>
70-
71-
<ng-container matColumnDef="l">
72-
<th mat-header-cell *matHeaderCellDef> L </th>
73-
<td mat-cell *matCellDef="let cell"> {{cell.l}} </td>
74-
</ng-container>
75-
76-
<ng-container matColumnDef="m">
77-
<th mat-header-cell *matHeaderCellDef> M </th>
78-
<td mat-cell *matCellDef="let cell"> {{cell.m}} </td>
79-
</ng-container>
80-
81-
<ng-container matColumnDef="n">
82-
<th mat-header-cell *matHeaderCellDef> N </th>
83-
<td mat-cell *matCellDef="let cell"> {{cell.n}} </td>
84-
</ng-container>
85-
86-
<ng-container matColumnDef="o">
87-
<th mat-header-cell *matHeaderCellDef> O </th>
88-
<td mat-cell *matCellDef="let cell"> {{cell.o}} </td>
89-
</ng-container>
90-
91-
<ng-container matColumnDef="p">
92-
<th mat-header-cell *matHeaderCellDef> P </th>
93-
<td mat-cell *matCellDef="let cell"> {{cell.p}} </td>
94-
</ng-container>
95-
96-
<ng-container matColumnDef="q">
97-
<th mat-header-cell *matHeaderCellDef> Q </th>
98-
<td mat-cell *matCellDef="let cell"> {{cell.q}} </td>
99-
</ng-container>
100-
101-
<ng-container matColumnDef="r">
102-
<th mat-header-cell *matHeaderCellDef> R </th>
103-
<td mat-cell *matCellDef="let cell"> {{cell.r}} </td>
104-
</ng-container>
105-
106-
<ng-container matColumnDef="s">
107-
<th mat-header-cell *matHeaderCellDef> S </th>
108-
<td mat-cell *matCellDef="let cell"> {{cell.s}} </td>
109-
</ng-container>
110-
111-
<ng-container matColumnDef="t">
112-
<th mat-header-cell *matHeaderCellDef> T </th>
113-
<td mat-cell *matCellDef="let cell"> {{cell.t}} </td>
114-
</ng-container>
115-
116-
<tr mat-header-row *matHeaderRowDef="cols"></tr>
117-
<tr mat-row *matRowDef="let row; columns: cols;"></tr>
118-
</table>
119-
`,
13+
templateUrl: './basic-table.html',
12014
styles: ['table { width: 100% }', 'th.mat-header-cell, td.mat-cell { padding: 0px 20px }'],
12115
})
12216
export class BasicTable {

‎test/benchmarks/material/table/table-app.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<button id="hide" (click)="hide()">Hide</button>
2+
<button id="show-10-rows-5-cols" (click)="showTenRowsFiveCols()">Show 10 Rows 5 Cols</button>
3+
<button id="show-100-rows-5-cols" (click)="showOneHundredRowsFiveCols()">Show 100 Rows 5 Cols</button>
4+
<button id="show-1000-rows-5-cols" (click)="showOneThousandRowsFiveCols()">Show 1000 Rows 5 Cols</button>
5+
<button id="show-10-rows-10-cols" (click)="showTenRowsTenCols()">Show 10 Rows 10 Cols</button>
6+
<button id="show-10-rows-20-cols" (click)="showTenRowsTwentyCols()">Show 10 Rows 20 Cols</button>
7+
8+
<basic-table [rows]="tenRows" [cols]="fiveCols" *ngIf="isTenRowsFiveColsVisible"></basic-table>
9+
<basic-table [rows]="oneHundredRows" [cols]="fiveCols" *ngIf="isOneHundredRowsFiveColsVisible"></basic-table>
10+
<basic-table [rows]="oneThousandRows" [cols]="fiveCols" *ngIf="isOneThousandRowsFiveColsVisible"></basic-table>
11+
12+
<basic-table [rows]="tenRows" [cols]="tenCols" *ngIf="isTenRowsTenColsVisible"></basic-table>
13+
<basic-table [rows]="tenRows" [cols]="twentyCols" *ngIf="isTenRowsTwentyColsVisible"></basic-table>

0 commit comments

Comments
 (0)