Skip to content

Commit d12f582

Browse files
json-derulojson-derulo
authored
perf: improve docs performance by stricter template lint rules (#155)
1 parent 5730271 commit d12f582

File tree

3 files changed

+118
-93
lines changed

3 files changed

+118
-93
lines changed

‎.eslintrc.json

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"root": true,
3-
"ignorePatterns": ["projects/**/*"],
3+
"ignorePatterns": ["projects/**/*", "**/index.html"],
44
"overrides": [
55
{
66
"files": ["*.ts"],
@@ -41,8 +41,17 @@
4141
},
4242
{
4343
"files": ["*.html"],
44-
"extends": ["plugin:@angular-eslint/template/recommended"],
45-
"rules": {}
44+
"extends": [
45+
"plugin:@angular-eslint/template/recommended",
46+
"plugin:@angular-eslint/template/accessibility"
47+
],
48+
"rules": {
49+
"@angular-eslint/template/no-call-expression": "error",
50+
"@angular-eslint/template/no-duplicate-attributes": "error",
51+
"@angular-eslint/template/no-interpolation-in-attributes": "error",
52+
"@angular-eslint/template/use-track-by-function": "error",
53+
"@angular-eslint/template/prefer-self-closing-tags": "error"
54+
}
4655
}
4756
]
4857
}

‎src/app/app.component.html

Lines changed: 79 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,10 @@ <h2>Contrast Color</h2>
9595
materialCssVarsService.contrastColorThresholdPrimary
9696
"
9797
>
98-
<mat-option *ngFor="let hue of hues" [value]="hue.value">
98+
<mat-option
99+
*ngFor="let hue of hues; trackBy: trackByHue"
100+
[value]="hue.value"
101+
>
99102
{{ hue.viewValue }}
100103
</mat-option>
101104
</mat-select>
@@ -111,7 +114,10 @@ <h2>Contrast Color</h2>
111114
materialCssVarsService.contrastColorThresholdAccent
112115
"
113116
>
114-
<mat-option *ngFor="let hue of hues" [value]="hue.value">
117+
<mat-option
118+
*ngFor="let hue of hues; trackBy: trackByHue"
119+
[value]="hue.value"
120+
>
115121
{{ hue.viewValue }}
116122
</mat-option>
117123
</mat-select>
@@ -125,7 +131,10 @@ <h2>Contrast Color</h2>
125131
[disabled]="materialCssVarsService.isAutoContrast"
126132
[(ngModel)]="materialCssVarsService.contrastColorThresholdWarn"
127133
>
128-
<mat-option *ngFor="let hue of hues" [value]="hue.value">
134+
<mat-option
135+
*ngFor="let hue of hues; trackBy: trackByHue"
136+
[value]="hue.value"
137+
>
129138
{{ hue.viewValue }}
130139
</mat-option>
131140
</mat-select>
@@ -405,7 +414,7 @@ <h2>Material Buttons</h2>
405414
Warn
406415
<mat-icon>favorite</mat-icon>
407416
</button>
408-
<button disabled mat-fab extended disabled>
417+
<button disabled mat-fab extended>
409418
Disabled
410419
<mat-icon>favorite</mat-icon>
411420
</button>
@@ -472,19 +481,24 @@ <h2>Material Checkbox</h2>
472481
class="checkbox-margin"
473482
[checked]="allComplete"
474483
[color]="task.color"
475-
[indeterminate]="someComplete()"
484+
[indeterminate]="someComplete"
476485
(change)="setAll($event.checked)"
477486
>
478487
{{ task.name }}
479488
</mat-checkbox>
480489
</span>
481490
<span class="checkbox-list-section">
482491
<ul>
483-
<li *ngFor="let subtask of task.subtasks">
492+
<li
493+
*ngFor="
494+
let subtask of task.subtasks;
495+
trackBy: trackByTask
496+
"
497+
>
484498
<mat-checkbox
485499
[(ngModel)]="subtask.completed"
486500
[color]="subtask.color"
487-
(ngModelChange)="updateAllComplete()"
501+
(ngModelChange)="updateCompletionState()"
488502
>
489503
{{ subtask.name }}
490504
</mat-checkbox>
@@ -505,8 +519,13 @@ <h2>Material Checkbox</h2>
505519
<h2>Progress spinner configuration</h2>
506520

507521
<section class="example-section">
508-
<label class="example-margin">Color:</label>
509-
<mat-radio-group [(ngModel)]="spinnerColor">
522+
<label for="spinner-color" class="example-margin">
523+
Color:
524+
</label>
525+
<mat-radio-group
526+
id="spinner-color"
527+
[(ngModel)]="spinnerColor"
528+
>
510529
<mat-radio-button class="example-margin" value="primary">
511530
Primary
512531
</mat-radio-button>
@@ -520,8 +539,10 @@ <h2>Progress spinner configuration</h2>
520539
</section>
521540

522541
<section class="example-section">
523-
<label class="example-margin">Mode:</label>
524-
<mat-radio-group [(ngModel)]="spinnerMode">
542+
<label class="example-margin" for="spinner-mode">
543+
Mode:
544+
</label>
545+
<mat-radio-group id="spinner-mode" [(ngModel)]="spinnerMode">
525546
<mat-radio-button
526547
class="example-margin"
527548
value="determinate"
@@ -541,8 +562,10 @@ <h2>Progress spinner configuration</h2>
541562
*ngIf="spinnerMode === 'determinate'"
542563
class="example-section"
543564
>
544-
<label class="example-margin">Progress:</label>
545-
<mat-slider class="example-margin">
565+
<label class="example-margin" for="spinner-progress">
566+
Progress:
567+
</label>
568+
<mat-slider class="example-margin" id="spinner-progress">
546569
<input matSliderThumb [(ngModel)]="spinnerValue" />
547570
</mat-slider>
548571
</section>
@@ -558,8 +581,7 @@ <h2>Result</h2>
558581
[mode]="spinnerMode"
559582
[value]="spinnerValue"
560583
class="example-margin"
561-
>
562-
</mat-progress-spinner>
584+
/>
563585
</mat-card-content>
564586
</mat-card>
565587
</section>
@@ -569,24 +591,26 @@ <h2>Result</h2>
569591
<mat-card>
570592
<mat-card-content>
571593
<h2>Material Progress Bar</h2>
572-
<label>
594+
<label for="indeterminate-progress-bar">
573595
Indeterminate progress-bar
574-
<mat-progress-bar
575-
aria-label="Indeterminate progress-bar example"
576-
class="progress"
577-
mode="indeterminate"
578-
></mat-progress-bar>
579596
</label>
580-
<label>
597+
<mat-progress-bar
598+
aria-label="Indeterminate progress-bar example"
599+
class="progress"
600+
mode="indeterminate"
601+
id="indeterminate-progress-bar"
602+
/>
603+
<label for="determinate-progress-bar">
581604
Determinate progress bar - {{ progress }}%
582-
<mat-progress-bar
583-
[value]="progress"
584-
aria-label="Determinate progress-bar example"
585-
class="progress"
586-
color="accent"
587-
mode="determinate"
588-
></mat-progress-bar>
589605
</label>
606+
<mat-progress-bar
607+
[value]="progress"
608+
aria-label="Determinate progress-bar example"
609+
class="progress"
610+
color="accent"
611+
mode="determinate"
612+
id="determinate-progress-bar"
613+
/>
590614
</mat-card-content>
591615
</mat-card>
592616
<!-- /Material Progress Bar -->
@@ -599,8 +623,11 @@ <h2>Material Progress Bar</h2>
599623
<h2>Material Chips</h2>
600624
<mat-chip-listbox>
601625
<mat-chip-option
602-
*ngFor="let chipColor of availableSpinnerColors"
603-
color="{{ chipColor.color }}"
626+
*ngFor="
627+
let chipColor of availableSpinnerColors;
628+
trackBy: trackBySpinnerColor
629+
"
630+
[color]="chipColor.color"
604631
selected="true"
605632
>
606633
{{ chipColor.name }}
@@ -661,38 +688,26 @@ <h2>Material Date Picker</h2>
661688
<mat-form-field color="primary" appearance="fill">
662689
<mat-label>Choose a date (default)</mat-label>
663690
<input matInput [matDatepicker]="picker1" />
664-
<mat-datepicker-toggle
665-
matSuffix
666-
[for]="picker1"
667-
></mat-datepicker-toggle>
668-
<mat-datepicker #picker1></mat-datepicker>
691+
<mat-datepicker-toggle matSuffix [for]="picker1" />
692+
<mat-datepicker #picker1 />
669693
</mat-form-field>
670694
<mat-form-field color="accent" appearance="fill">
671695
<mat-label>Choose a date (accent)</mat-label>
672696
<input matInput [matDatepicker]="picker2" />
673-
<mat-datepicker-toggle
674-
matSuffix
675-
[for]="picker2"
676-
></mat-datepicker-toggle>
677-
<mat-datepicker #picker2></mat-datepicker>
697+
<mat-datepicker-toggle matSuffix [for]="picker2" />
698+
<mat-datepicker #picker2 />
678699
</mat-form-field>
679700
<mat-form-field color="warn" appearance="fill">
680701
<mat-label>Choose a date (warn)</mat-label>
681702
<input matInput [matDatepicker]="picker3" />
682-
<mat-datepicker-toggle
683-
matSuffix
684-
[for]="picker3"
685-
></mat-datepicker-toggle>
686-
<mat-datepicker #picker3></mat-datepicker>
703+
<mat-datepicker-toggle matSuffix [for]="picker3" />
704+
<mat-datepicker #picker3 />
687705
</mat-form-field>
688706
<mat-form-field color="accent" appearance="fill">
689707
<mat-label>Custom (accent/primary)</mat-label>
690708
<input matInput [matDatepicker]="picker4" />
691-
<mat-datepicker-toggle
692-
matSuffix
693-
[for]="picker4"
694-
></mat-datepicker-toggle>
695-
<mat-datepicker #picker4 color="primary"></mat-datepicker>
709+
<mat-datepicker-toggle matSuffix [for]="picker4" />
710+
<mat-datepicker #picker4 color="primary" />
696711
</mat-form-field>
697712
</mat-card-content>
698713
</mat-card>
@@ -708,35 +723,26 @@ <h2>Material Date Range Picker</h2>
708723
<input matStartDate placeholder="Start date" />
709724
<input matEndDate placeholder="End date" />
710725
</mat-date-range-input>
711-
<mat-datepicker-toggle
712-
matSuffix
713-
[for]="rangePicker1"
714-
></mat-datepicker-toggle>
715-
<mat-date-range-picker #rangePicker1></mat-date-range-picker>
726+
<mat-datepicker-toggle matSuffix [for]="rangePicker1" />
727+
<mat-date-range-picker #rangePicker1 />
716728
</mat-form-field>
717729
<mat-form-field color="accent" appearance="fill">
718730
<mat-label>Enter a date range (accent)</mat-label>
719731
<mat-date-range-input [rangePicker]="rangePicker2">
720732
<input matStartDate placeholder="Start date" />
721733
<input matEndDate placeholder="End date" />
722734
</mat-date-range-input>
723-
<mat-datepicker-toggle
724-
matSuffix
725-
[for]="rangePicker2"
726-
></mat-datepicker-toggle>
727-
<mat-date-range-picker #rangePicker2></mat-date-range-picker>
735+
<mat-datepicker-toggle matSuffix [for]="rangePicker2" />
736+
<mat-date-range-picker #rangePicker2 />
728737
</mat-form-field>
729738
<mat-form-field color="warn" appearance="fill">
730739
<mat-label>Enter a date range (warn)</mat-label>
731740
<mat-date-range-input [rangePicker]="rangePicker3">
732741
<input matStartDate placeholder="Start date" />
733742
<input matEndDate placeholder="End date" />
734743
</mat-date-range-input>
735-
<mat-datepicker-toggle
736-
matSuffix
737-
[for]="rangePicker3"
738-
></mat-datepicker-toggle>
739-
<mat-date-range-picker #rangePicker3></mat-date-range-picker>
744+
<mat-datepicker-toggle matSuffix [for]="rangePicker3" />
745+
<mat-date-range-picker #rangePicker3 />
740746
</mat-form-field>
741747
</mat-card-content>
742748
</mat-card>
@@ -765,11 +771,13 @@ <h2>Material Date Range Picker</h2>
765771
</section>
766772

767773
<!-- Material Fab-->
768-
<button class="fab" mat-fab>
769-
<mat-icon aria-label="Example icon-button with a heart icon"
770-
>favorite</mat-icon
771-
>
772-
</button>
774+
<a
775+
class="fab"
776+
mat-fab
777+
href="https://github.com/johannesjo/angular-material-css-vars#sponsor-button"
778+
>
779+
<mat-icon aria-label="Sponsor">favorite</mat-icon>
780+
</a>
773781
<!-- /Material Fab-->
774782
</div>
775783
</mat-sidenav-container>

0 commit comments

Comments
 (0)