@ng-prism/plugin-perf 22.5.0 → 22.7.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle/bundle-section.component.d.ts +11 -5
- package/dist/bundle/bundle-section.component.d.ts.map +1 -1
- package/dist/bundle/bundle-section.component.js +68 -193
- package/dist/memory/memory-section.component.d.ts +5 -2
- package/dist/memory/memory-section.component.d.ts.map +1 -1
- package/dist/memory/memory-section.component.js +69 -119
- package/dist/memory/perf-memory.service.d.ts +1 -1
- package/dist/perf-config.token.d.ts +1 -0
- package/dist/perf-config.token.d.ts.map +1 -1
- package/dist/perf-config.token.js +1 -0
- package/dist/perf-panel.component.d.ts +5 -0
- package/dist/perf-panel.component.d.ts.map +1 -1
- package/dist/perf-panel.component.js +79 -87
- package/dist/perf-plugin.browser.d.ts.map +1 -1
- package/dist/perf-plugin.browser.js +0 -1
- package/dist/perf-plugin.d.ts.map +1 -1
- package/dist/perf-plugin.js +14 -2
- package/dist/perf-status.d.ts +12 -0
- package/dist/perf-status.d.ts.map +1 -0
- package/dist/perf-status.js +16 -0
- package/dist/perf.types.d.ts +5 -0
- package/dist/perf.types.d.ts.map +1 -1
- package/dist/render/render-section.component.d.ts +7 -2
- package/dist/render/render-section.component.d.ts.map +1 -1
- package/dist/render/render-section.component.js +39 -105
- package/package.json +2 -2
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { StatusTone } from '@ng-prism/core/plugin';
|
|
1
2
|
import type { BundleMetrics } from '../perf.types.js';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
export declare class BundleSectionComponent {
|
|
@@ -5,17 +6,22 @@ export declare class BundleSectionComponent {
|
|
|
5
6
|
readonly warnKb: import("@angular/core").InputSignal<number>;
|
|
6
7
|
readonly critKb: import("@angular/core").InputSignal<number>;
|
|
7
8
|
readonly gzipPercent: import("@angular/core").Signal<number>;
|
|
9
|
+
/** Bar fill against the warning budget: the bar is a quantity, the card above carries the verdict. */
|
|
8
10
|
readonly sourceBarPercent: import("@angular/core").Signal<number>;
|
|
9
11
|
readonly gzipBarPercent: import("@angular/core").Signal<number>;
|
|
10
|
-
readonly
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
readonly sourceStatus: import("@angular/core").Signal<{
|
|
13
|
+
tone: StatusTone;
|
|
14
|
+
label: "OK" | "Warning" | "Critical";
|
|
15
|
+
}>;
|
|
16
|
+
readonly gzipStatus: import("@angular/core").Signal<{
|
|
17
|
+
tone: StatusTone;
|
|
18
|
+
label: "OK" | "Warning" | "Critical";
|
|
19
|
+
}>;
|
|
20
|
+
toneOf(tone: StatusTone): import("@ng-prism/core").BadgeTone;
|
|
14
21
|
readonly visibleImports: import("@angular/core").Signal<string[]>;
|
|
15
22
|
readonly hiddenImportCount: import("@angular/core").Signal<number>;
|
|
16
23
|
formatBytes(bytes: number): string;
|
|
17
24
|
formatKb(bytes: number): string;
|
|
18
|
-
chipClass(imp: string): string;
|
|
19
25
|
static ɵfac: i0.ɵɵFactoryDeclaration<BundleSectionComponent, never>;
|
|
20
26
|
static ɵcmp: i0.ɵɵComponentDeclaration<BundleSectionComponent, "perf-bundle-section", never, { "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "warnKb": { "alias": "warnKb"; "required": false; "isSignal": true; }; "critKb": { "alias": "critKb"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
21
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bundle-section.component.d.ts","sourceRoot":"","sources":["../../src/bundle/bundle-section.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"bundle-section.component.d.ts","sourceRoot":"","sources":["../../src/bundle/bundle-section.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAEtD,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,OAAO,4DAAqC;IACrD,QAAQ,CAAC,MAAM,8CAAa;IAC5B,QAAQ,CAAC,MAAM,8CAAa;IAE5B,QAAQ,CAAC,WAAW,yCAKjB;IAEH,sGAAsG;IACtG,QAAQ,CAAC,gBAAgB,yCAItB;IAEH,QAAQ,CAAC,cAAc,yCAIpB;IAEH,QAAQ,CAAC,YAAY;;;OAAsG;IAC3H,QAAQ,CAAC,UAAU;;;OAAwG;IAE3H,MAAM,CAAC,IAAI,EAAE,UAAU;IAIvB,QAAQ,CAAC,cAAc,2CAIpB;IAEH,QAAQ,CAAC,iBAAiB,yCAKvB;IAEH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIlC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;yCAjDtB,sBAAsB;2CAAtB,sBAAsB;CAsDlC"}
|
|
@@ -1,160 +1,84 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
2
|
+
import { PrismBadgeComponent, PrismMetricCardComponent, toneForStatus } from '@ng-prism/core';
|
|
3
|
+
import { perfStatus } from '../perf-status.js';
|
|
2
4
|
import * as i0 from "@angular/core";
|
|
3
|
-
function
|
|
4
|
-
i0.ɵɵ
|
|
5
|
-
i0.ɵɵtext(1);
|
|
6
|
-
i0.ɵɵdomElementEnd();
|
|
5
|
+
function BundleSectionComponent_Conditional_0_For_26_Template(rf, ctx) { if (rf & 1) {
|
|
6
|
+
i0.ɵɵelement(0, "prism-badge", 15);
|
|
7
7
|
} if (rf & 2) {
|
|
8
8
|
const imp_r1 = ctx.$implicit;
|
|
9
|
-
|
|
10
|
-
i0.ɵɵclassMap(ctx_r1.chipClass(imp_r1));
|
|
11
|
-
i0.ɵɵadvance();
|
|
12
|
-
i0.ɵɵtextInterpolate(imp_r1);
|
|
9
|
+
i0.ɵɵproperty("tone", imp_r1.startsWith("@angular/") ? "primary" : "neutral")("value", imp_r1);
|
|
13
10
|
} }
|
|
14
|
-
function
|
|
15
|
-
i0.ɵɵ
|
|
16
|
-
i0.ɵɵtext(1);
|
|
17
|
-
i0.ɵɵdomElementEnd();
|
|
11
|
+
function BundleSectionComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
|
|
12
|
+
i0.ɵɵelement(0, "prism-badge", 16);
|
|
18
13
|
} if (rf & 2) {
|
|
19
14
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
20
|
-
i0.ɵɵ
|
|
21
|
-
i0.ɵɵtextInterpolate1("+", ctx_r1.hiddenImportCount(), " more");
|
|
15
|
+
i0.ɵɵproperty("value", "+" + ctx_r1.hiddenImportCount());
|
|
22
16
|
} }
|
|
23
17
|
function BundleSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
24
|
-
i0.ɵɵ
|
|
25
|
-
i0.ɵɵ
|
|
26
|
-
i0.ɵɵ
|
|
27
|
-
i0.ɵɵ
|
|
28
|
-
i0.ɵɵtext(
|
|
29
|
-
i0.ɵɵ
|
|
30
|
-
i0.ɵɵ
|
|
31
|
-
i0.ɵɵtext(
|
|
32
|
-
i0.ɵɵ
|
|
33
|
-
i0.ɵɵ
|
|
34
|
-
i0.ɵɵ
|
|
35
|
-
i0.ɵɵ
|
|
36
|
-
i0.ɵɵ
|
|
37
|
-
i0.ɵɵ
|
|
38
|
-
i0.ɵɵ
|
|
39
|
-
i0.ɵɵ
|
|
40
|
-
i0.ɵɵ
|
|
41
|
-
i0.ɵɵ
|
|
42
|
-
i0.ɵɵ
|
|
43
|
-
i0.ɵɵ
|
|
44
|
-
i0.ɵɵ
|
|
18
|
+
i0.ɵɵelementStart(0, "div", 1);
|
|
19
|
+
i0.ɵɵelement(1, "prism-metric-card", 2)(2, "prism-metric-card", 3)(3, "prism-metric-card", 4)(4, "prism-metric-card", 5);
|
|
20
|
+
i0.ɵɵelementEnd();
|
|
21
|
+
i0.ɵɵelementStart(5, "div", 6)(6, "span", 7);
|
|
22
|
+
i0.ɵɵtext(7, "Size breakdown");
|
|
23
|
+
i0.ɵɵelementEnd();
|
|
24
|
+
i0.ɵɵelementStart(8, "div", 8)(9, "span", 9);
|
|
25
|
+
i0.ɵɵtext(10, "source");
|
|
26
|
+
i0.ɵɵelementEnd();
|
|
27
|
+
i0.ɵɵelementStart(11, "div", 10);
|
|
28
|
+
i0.ɵɵelement(12, "div", 11);
|
|
29
|
+
i0.ɵɵelementEnd();
|
|
30
|
+
i0.ɵɵelementStart(13, "span", 12);
|
|
31
|
+
i0.ɵɵtext(14);
|
|
32
|
+
i0.ɵɵelementEnd();
|
|
33
|
+
i0.ɵɵelementStart(15, "span", 9);
|
|
34
|
+
i0.ɵɵtext(16, "gzip est.");
|
|
35
|
+
i0.ɵɵelementEnd();
|
|
36
|
+
i0.ɵɵelementStart(17, "div", 10);
|
|
37
|
+
i0.ɵɵelement(18, "div", 11);
|
|
38
|
+
i0.ɵɵelementEnd();
|
|
39
|
+
i0.ɵɵelementStart(19, "span", 12);
|
|
45
40
|
i0.ɵɵtext(20);
|
|
46
|
-
i0.ɵɵ
|
|
47
|
-
i0.ɵɵ
|
|
48
|
-
i0.ɵɵ
|
|
49
|
-
i0.ɵɵ
|
|
50
|
-
i0.ɵɵ
|
|
51
|
-
i0.ɵɵ
|
|
52
|
-
i0.ɵɵ
|
|
53
|
-
i0.ɵɵ
|
|
54
|
-
i0.ɵɵdomElementEnd()();
|
|
55
|
-
i0.ɵɵdomElementStart(29, "div", 6);
|
|
56
|
-
i0.ɵɵtext(30);
|
|
57
|
-
i0.ɵɵdomElementEnd();
|
|
58
|
-
i0.ɵɵdomElementStart(31, "div", 7);
|
|
59
|
-
i0.ɵɵtext(32, "top-level only");
|
|
60
|
-
i0.ɵɵdomElementEnd()();
|
|
61
|
-
i0.ɵɵdomElementStart(33, "div", 2)(34, "div", 3)(35, "span", 4);
|
|
62
|
-
i0.ɵɵtext(36, "Tree Depth");
|
|
63
|
-
i0.ɵɵdomElementEnd()();
|
|
64
|
-
i0.ɵɵdomElementStart(37, "div", 6);
|
|
65
|
-
i0.ɵɵtext(38);
|
|
66
|
-
i0.ɵɵdomElementStart(39, "span");
|
|
67
|
-
i0.ɵɵtext(40, "/ 10");
|
|
68
|
-
i0.ɵɵdomElementEnd()();
|
|
69
|
-
i0.ɵɵdomElementStart(41, "div", 7);
|
|
70
|
-
i0.ɵɵtext(42, "import levels");
|
|
71
|
-
i0.ɵɵdomElementEnd()()();
|
|
72
|
-
i0.ɵɵdomElementStart(43, "div", 8)(44, "div", 9)(45, "div", 3)(46, "span", 4);
|
|
73
|
-
i0.ɵɵtext(47, "Size Breakdown");
|
|
74
|
-
i0.ɵɵdomElementEnd()();
|
|
75
|
-
i0.ɵɵdomElementStart(48, "div", 10)(49, "span", 11);
|
|
76
|
-
i0.ɵɵtext(50, "source");
|
|
77
|
-
i0.ɵɵdomElementEnd();
|
|
78
|
-
i0.ɵɵdomElementStart(51, "div", 12);
|
|
79
|
-
i0.ɵɵdomElement(52, "div", 13);
|
|
80
|
-
i0.ɵɵdomElementEnd();
|
|
81
|
-
i0.ɵɵdomElementStart(53, "span", 14);
|
|
82
|
-
i0.ɵɵtext(54);
|
|
83
|
-
i0.ɵɵdomElementEnd();
|
|
84
|
-
i0.ɵɵdomElementStart(55, "span", 11);
|
|
85
|
-
i0.ɵɵtext(56, "gzip est.");
|
|
86
|
-
i0.ɵɵdomElementEnd();
|
|
87
|
-
i0.ɵɵdomElementStart(57, "div", 12);
|
|
88
|
-
i0.ɵɵdomElement(58, "div", 13);
|
|
89
|
-
i0.ɵɵdomElementEnd();
|
|
90
|
-
i0.ɵɵdomElementStart(59, "span", 14);
|
|
91
|
-
i0.ɵɵtext(60);
|
|
92
|
-
i0.ɵɵdomElementEnd()();
|
|
93
|
-
i0.ɵɵdomElementStart(61, "div", 15);
|
|
94
|
-
i0.ɵɵtext(62, "Thresholds: ");
|
|
95
|
-
i0.ɵɵdomElementStart(63, "span", 16);
|
|
96
|
-
i0.ɵɵtext(64);
|
|
97
|
-
i0.ɵɵdomElementEnd();
|
|
98
|
-
i0.ɵɵtext(65, " \u00B7 ");
|
|
99
|
-
i0.ɵɵdomElementStart(66, "span", 17);
|
|
100
|
-
i0.ɵɵtext(67);
|
|
101
|
-
i0.ɵɵdomElementEnd()()()();
|
|
102
|
-
i0.ɵɵdomElementStart(68, "div", 18)(69, "div", 9)(70, "div", 3)(71, "span", 4);
|
|
103
|
-
i0.ɵɵtext(72);
|
|
104
|
-
i0.ɵɵdomElementEnd()();
|
|
105
|
-
i0.ɵɵdomElementStart(73, "div", 19);
|
|
106
|
-
i0.ɵɵrepeaterCreate(74, BundleSectionComponent_Conditional_0_For_75_Template, 2, 3, "span", 20, i0.ɵɵrepeaterTrackByIdentity);
|
|
107
|
-
i0.ɵɵconditionalCreate(76, BundleSectionComponent_Conditional_0_Conditional_76_Template, 2, 1, "span", 21);
|
|
108
|
-
i0.ɵɵdomElementEnd()()();
|
|
41
|
+
i0.ɵɵelementEnd()()();
|
|
42
|
+
i0.ɵɵelementStart(21, "div", 13)(22, "span", 7);
|
|
43
|
+
i0.ɵɵtext(23, "Direct imports");
|
|
44
|
+
i0.ɵɵelementEnd();
|
|
45
|
+
i0.ɵɵelementStart(24, "div", 14);
|
|
46
|
+
i0.ɵɵrepeaterCreate(25, BundleSectionComponent_Conditional_0_For_26_Template, 1, 2, "prism-badge", 15, i0.ɵɵrepeaterTrackByIdentity);
|
|
47
|
+
i0.ɵɵconditionalCreate(27, BundleSectionComponent_Conditional_0_Conditional_27_Template, 1, 1, "prism-badge", 16);
|
|
48
|
+
i0.ɵɵelementEnd()();
|
|
109
49
|
} if (rf & 2) {
|
|
110
50
|
const m_r3 = ctx;
|
|
111
51
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
112
|
-
i0.ɵɵadvance(5);
|
|
113
|
-
i0.ɵɵclassMap(ctx_r1.sizeStatus());
|
|
114
52
|
i0.ɵɵadvance();
|
|
115
|
-
i0.ɵɵ
|
|
116
|
-
i0.ɵɵadvance(2);
|
|
117
|
-
i0.ɵɵtextInterpolate(ctx_r1.formatKb(m_r3.sourceSize));
|
|
118
|
-
i0.ɵɵadvance(4);
|
|
119
|
-
i0.ɵɵtextInterpolate1("", ctx_r1.formatBytes(m_r3.sourceSize), " bytes");
|
|
120
|
-
i0.ɵɵadvance(5);
|
|
121
|
-
i0.ɵɵclassMap(ctx_r1.gzipStatus());
|
|
53
|
+
i0.ɵɵproperty("value", ctx_r1.formatKb(m_r3.sourceSize))("tone", ctx_r1.toneOf(ctx_r1.sourceStatus().tone))("statusLabel", ctx_r1.sourceStatus().label)("title", ctx_r1.formatBytes(m_r3.sourceSize) + " bytes \u00B7 warning above " + ctx_r1.warnKb() + " kb, critical above " + ctx_r1.critKb() + " kb");
|
|
122
54
|
i0.ɵɵadvance();
|
|
123
|
-
i0.ɵɵ
|
|
124
|
-
i0.ɵɵadvance(
|
|
125
|
-
i0.ɵɵ
|
|
126
|
-
i0.ɵɵadvance(
|
|
127
|
-
i0.ɵɵ
|
|
128
|
-
i0.ɵɵadvance(
|
|
129
|
-
i0.ɵɵ
|
|
130
|
-
i0.ɵɵadvance(
|
|
131
|
-
i0.ɵɵtextInterpolate(m_r3.treeDepth);
|
|
132
|
-
i0.ɵɵadvance(14);
|
|
55
|
+
i0.ɵɵproperty("value", ctx_r1.formatKb(m_r3.gzipEstimate))("tone", ctx_r1.toneOf(ctx_r1.gzipStatus().tone))("statusLabel", ctx_r1.gzipStatus().label)("title", "About " + ctx_r1.gzipPercent() + "% of the source \u00B7 warning above " + ctx_r1.warnKb() + " kb");
|
|
56
|
+
i0.ɵɵadvance();
|
|
57
|
+
i0.ɵɵproperty("value", "" + m_r3.directImports);
|
|
58
|
+
i0.ɵɵadvance();
|
|
59
|
+
i0.ɵɵproperty("value", "" + m_r3.treeDepth);
|
|
60
|
+
i0.ɵɵadvance();
|
|
61
|
+
i0.ɵɵproperty("title", "Against the warning budget of " + ctx_r1.warnKb() + " kb");
|
|
62
|
+
i0.ɵɵadvance(7);
|
|
133
63
|
i0.ɵɵstyleProp("width", ctx_r1.sourceBarPercent(), "%");
|
|
134
64
|
i0.ɵɵadvance(2);
|
|
135
|
-
i0.ɵɵ
|
|
65
|
+
i0.ɵɵtextInterpolate2("", ctx_r1.formatKb(m_r3.sourceSize), " / ", ctx_r1.warnKb(), " kb");
|
|
136
66
|
i0.ɵɵadvance(4);
|
|
137
67
|
i0.ɵɵstyleProp("width", ctx_r1.gzipBarPercent(), "%");
|
|
138
68
|
i0.ɵɵadvance(2);
|
|
139
|
-
i0.ɵɵ
|
|
140
|
-
i0.ɵɵadvance(4);
|
|
141
|
-
i0.ɵɵtextInterpolate1("warn \u2265 ", ctx_r1.warnKb(), " KB");
|
|
142
|
-
i0.ɵɵadvance(3);
|
|
143
|
-
i0.ɵɵtextInterpolate1("crit \u2265 ", ctx_r1.critKb(), " KB");
|
|
69
|
+
i0.ɵɵtextInterpolate2("", ctx_r1.formatKb(m_r3.gzipEstimate), " / ", ctx_r1.warnKb(), " kb");
|
|
144
70
|
i0.ɵɵadvance(5);
|
|
145
|
-
i0.ɵɵtextInterpolate1("Direct Imports (", m_r3.directImports, ")");
|
|
146
|
-
i0.ɵɵadvance(2);
|
|
147
71
|
i0.ɵɵrepeater(ctx_r1.visibleImports());
|
|
148
72
|
i0.ɵɵadvance(2);
|
|
149
|
-
i0.ɵɵconditional(ctx_r1.hiddenImportCount() > 0 ?
|
|
73
|
+
i0.ɵɵconditional(ctx_r1.hiddenImportCount() > 0 ? 27 : -1);
|
|
150
74
|
} }
|
|
151
75
|
function BundleSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
152
|
-
i0.ɵɵ
|
|
76
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "span");
|
|
153
77
|
i0.ɵɵtext(2, "No bundle data available");
|
|
154
|
-
i0.ɵɵ
|
|
155
|
-
i0.ɵɵ
|
|
78
|
+
i0.ɵɵelementEnd();
|
|
79
|
+
i0.ɵɵelementStart(3, "span");
|
|
156
80
|
i0.ɵɵtext(4, "Bundle metrics are collected at build time");
|
|
157
|
-
i0.ɵɵ
|
|
81
|
+
i0.ɵɵelementEnd()();
|
|
158
82
|
} }
|
|
159
83
|
export class BundleSectionComponent {
|
|
160
84
|
metrics = input(null, /* @ts-ignore */
|
|
@@ -170,68 +94,24 @@ export class BundleSectionComponent {
|
|
|
170
94
|
return Math.round((m.gzipEstimate / m.sourceSize) * 100);
|
|
171
95
|
}, /* @ts-ignore */
|
|
172
96
|
...(ngDevMode ? [{ debugName: "gzipPercent" }] : /* istanbul ignore next */ []));
|
|
97
|
+
/** Bar fill against the warning budget: the bar is a quantity, the card above carries the verdict. */
|
|
173
98
|
sourceBarPercent = computed(() => {
|
|
174
99
|
const m = this.metrics();
|
|
175
|
-
|
|
176
|
-
return 0;
|
|
177
|
-
const maxKb = this.critKb() * 1.2;
|
|
178
|
-
return Math.min(100, (m.sourceSize / 1024 / maxKb) * 100);
|
|
100
|
+
return m ? Math.min(100, (m.sourceSize / 1024 / this.warnKb()) * 100) : 0;
|
|
179
101
|
}, /* @ts-ignore */
|
|
180
102
|
...(ngDevMode ? [{ debugName: "sourceBarPercent" }] : /* istanbul ignore next */ []));
|
|
181
103
|
gzipBarPercent = computed(() => {
|
|
182
104
|
const m = this.metrics();
|
|
183
|
-
|
|
184
|
-
return 0;
|
|
185
|
-
const maxKb = this.critKb() * 1.2;
|
|
186
|
-
return Math.min(100, (m.gzipEstimate / 1024 / maxKb) * 100);
|
|
105
|
+
return m ? Math.min(100, (m.gzipEstimate / 1024 / this.warnKb()) * 100) : 0;
|
|
187
106
|
}, /* @ts-ignore */
|
|
188
107
|
...(ngDevMode ? [{ debugName: "gzipBarPercent" }] : /* istanbul ignore next */ []));
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
return '';
|
|
193
|
-
const kb = m.sourceSize / 1024;
|
|
194
|
-
if (kb >= this.critKb())
|
|
195
|
-
return 'crit';
|
|
196
|
-
if (kb >= this.warnKb())
|
|
197
|
-
return 'warn';
|
|
198
|
-
return 'good';
|
|
199
|
-
}, /* @ts-ignore */
|
|
200
|
-
...(ngDevMode ? [{ debugName: "sizeStatus" }] : /* istanbul ignore next */ []));
|
|
201
|
-
sizeStatusText = computed(() => {
|
|
202
|
-
const s = this.sizeStatus();
|
|
203
|
-
if (s === 'good')
|
|
204
|
-
return 'good';
|
|
205
|
-
if (s === 'warn')
|
|
206
|
-
return 'warn';
|
|
207
|
-
if (s === 'crit')
|
|
208
|
-
return 'crit';
|
|
209
|
-
return '';
|
|
210
|
-
}, /* @ts-ignore */
|
|
211
|
-
...(ngDevMode ? [{ debugName: "sizeStatusText" }] : /* istanbul ignore next */ []));
|
|
212
|
-
gzipStatus = computed(() => {
|
|
213
|
-
const m = this.metrics();
|
|
214
|
-
if (!m)
|
|
215
|
-
return '';
|
|
216
|
-
const kb = m.gzipEstimate / 1024;
|
|
217
|
-
if (kb >= this.critKb())
|
|
218
|
-
return 'crit';
|
|
219
|
-
if (kb >= this.warnKb())
|
|
220
|
-
return 'warn';
|
|
221
|
-
return 'good';
|
|
222
|
-
}, /* @ts-ignore */
|
|
108
|
+
sourceStatus = computed(() => perfStatus((this.metrics()?.sourceSize ?? 0) / 1024, this.warnKb(), this.critKb()), /* @ts-ignore */
|
|
109
|
+
...(ngDevMode ? [{ debugName: "sourceStatus" }] : /* istanbul ignore next */ []));
|
|
110
|
+
gzipStatus = computed(() => perfStatus((this.metrics()?.gzipEstimate ?? 0) / 1024, this.warnKb(), this.critKb()), /* @ts-ignore */
|
|
223
111
|
...(ngDevMode ? [{ debugName: "gzipStatus" }] : /* istanbul ignore next */ []));
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
return 'good';
|
|
228
|
-
if (s === 'warn')
|
|
229
|
-
return 'warn';
|
|
230
|
-
if (s === 'crit')
|
|
231
|
-
return 'crit';
|
|
232
|
-
return '';
|
|
233
|
-
}, /* @ts-ignore */
|
|
234
|
-
...(ngDevMode ? [{ debugName: "gzipStatusText" }] : /* istanbul ignore next */ []));
|
|
112
|
+
toneOf(tone) {
|
|
113
|
+
return toneForStatus(tone);
|
|
114
|
+
}
|
|
235
115
|
visibleImports = computed(() => {
|
|
236
116
|
const m = this.metrics();
|
|
237
117
|
return m?.importList.slice(0, 10) ?? [];
|
|
@@ -251,21 +131,16 @@ export class BundleSectionComponent {
|
|
|
251
131
|
const kb = bytes / 1024;
|
|
252
132
|
return kb < 10 ? kb.toFixed(1) : Math.round(kb).toString();
|
|
253
133
|
}
|
|
254
|
-
chipClass(imp) {
|
|
255
|
-
if (imp.startsWith('@angular/'))
|
|
256
|
-
return 'angular';
|
|
257
|
-
return '';
|
|
258
|
-
}
|
|
259
134
|
static ɵfac = function BundleSectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BundleSectionComponent)(); };
|
|
260
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BundleSectionComponent, selectors: [["perf-bundle-section"]], inputs: { metrics: [1, "metrics"], warnKb: [1, "warnKb"], critKb: [1, "critKb"] }, decls: 2, vars: 1, consts: [[1, "perf-empty"], [1, "perf-
|
|
261
|
-
i0.ɵɵconditionalCreate(0, BundleSectionComponent_Conditional_0_Template,
|
|
135
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BundleSectionComponent, selectors: [["perf-bundle-section"]], inputs: { metrics: [1, "metrics"], warnKb: [1, "warnKb"], critKb: [1, "critKb"] }, decls: 2, vars: 1, consts: [[1, "perf-empty"], [1, "perf-grid"], ["label", "Source size", "unit", "kb", 3, "value", "tone", "statusLabel", "title"], ["label", "Gzip estimate", "unit", "kb", 3, "value", "tone", "statusLabel", "title"], ["label", "Direct imports", "title", "Top-level imports only", 3, "value"], ["label", "Tree depth", "unit", "/ 10", "title", "Import levels below the component", 3, "value"], [1, "perf-block", 3, "title"], [1, "perf-block__label"], [1, "perf-bars"], [1, "perf-bar-label"], [1, "perf-bar-track"], [1, "perf-bar-fill"], [1, "perf-bar-val"], [1, "perf-block"], [1, "perf-chips"], [3, "tone", "value"], [3, "value"]], template: function BundleSectionComponent_Template(rf, ctx) { if (rf & 1) {
|
|
136
|
+
i0.ɵɵconditionalCreate(0, BundleSectionComponent_Conditional_0_Template, 28, 20)(1, BundleSectionComponent_Conditional_1_Template, 5, 0, "div", 0);
|
|
262
137
|
} if (rf & 2) {
|
|
263
138
|
let tmp_0_0;
|
|
264
139
|
i0.ɵɵconditional((tmp_0_0 = ctx.metrics()) ? 0 : 1, tmp_0_0);
|
|
265
|
-
} },
|
|
140
|
+
} }, dependencies: [PrismMetricCardComponent, PrismBadgeComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n display: block;\n}\n\n.perf-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 12px;\n padding: 16px 18px 0;\n}\n\n.perf-block[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 10px 12px;\n margin: 12px 18px 0;\n background: var(--%NS%prism-bg-surface);\n border: 1px solid var(--%NS%prism-border);\n border-radius: 6px;\n}\n\n.perf-block[_ngcontent-%COMP%]:last-child {\n margin-bottom: 16px;\n}\n\n.perf-block__label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--%NS%prism-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n}\n\n\n.perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 84px minmax(0, 1fr) auto;\n gap: 10px;\n align-items: center;\n font-family: var(--%NS%font-mono);\n font-size: 12px;\n}\n\n.perf-bar-label[_ngcontent-%COMP%] {\n color: var(--%NS%prism-text-muted);\n}\n\n.perf-bar-track[_ngcontent-%COMP%] {\n height: 6px;\n overflow: hidden;\n background: var(--%NS%prism-input-bg);\n border-radius: 3px;\n}\n\n.perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--%NS%prism-primary);\n border-radius: 3px;\n}\n\n.perf-bar-val[_ngcontent-%COMP%] {\n color: var(--%NS%prism-text-2);\n white-space: nowrap;\n}\n\n.perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 160px;\n font-size: 12.5px;\n color: var(--%NS%prism-text-muted);\n}\n\n.perf-block[_ngcontent-%COMP%] > prism-badge[_ngcontent-%COMP%] {\n align-self: flex-start;\n}", ".perf-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}"] });
|
|
266
141
|
}
|
|
267
142
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BundleSectionComponent, [{
|
|
268
143
|
type: Component,
|
|
269
|
-
args: [{ selector: 'perf-bundle-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (metrics(); as m) {\n <div class=\"perf-
|
|
144
|
+
args: [{ selector: 'perf-bundle-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismMetricCardComponent, PrismBadgeComponent], template: "@if (metrics(); as m) {\n <div class=\"perf-grid\">\n <prism-metric-card\n label=\"Source size\"\n unit=\"kb\"\n [value]=\"formatKb(m.sourceSize)\"\n [tone]=\"toneOf(sourceStatus().tone)\"\n [statusLabel]=\"sourceStatus().label\"\n [title]=\"formatBytes(m.sourceSize) + ' bytes \u00B7 warning above ' + warnKb() + ' kb, critical above ' + critKb() + ' kb'\" />\n <prism-metric-card\n label=\"Gzip estimate\"\n unit=\"kb\"\n [value]=\"formatKb(m.gzipEstimate)\"\n [tone]=\"toneOf(gzipStatus().tone)\"\n [statusLabel]=\"gzipStatus().label\"\n [title]=\"'About ' + gzipPercent() + '% of the source \u00B7 warning above ' + warnKb() + ' kb'\" />\n <prism-metric-card\n label=\"Direct imports\"\n title=\"Top-level imports only\"\n [value]=\"'' + m.directImports\" />\n <prism-metric-card\n label=\"Tree depth\"\n unit=\"/ 10\"\n title=\"Import levels below the component\"\n [value]=\"'' + m.treeDepth\" />\n </div>\n\n <div\n class=\"perf-block\"\n [title]=\"'Against the warning budget of ' + warnKb() + ' kb'\">\n <span class=\"perf-block__label\">Size breakdown</span>\n <div class=\"perf-bars\">\n <span class=\"perf-bar-label\">source</span>\n <div class=\"perf-bar-track\"\n ><div\n class=\"perf-bar-fill\"\n [style.width.%]=\"sourceBarPercent()\"></div\n ></div>\n <span class=\"perf-bar-val\">{{ formatKb(m.sourceSize) }} / {{ warnKb() }} kb</span>\n <span class=\"perf-bar-label\">gzip est.</span>\n <div class=\"perf-bar-track\"\n ><div\n class=\"perf-bar-fill\"\n [style.width.%]=\"gzipBarPercent()\"></div\n ></div>\n <span class=\"perf-bar-val\">{{ formatKb(m.gzipEstimate) }} / {{ warnKb() }} kb</span>\n </div>\n </div>\n\n <div class=\"perf-block\">\n <span class=\"perf-block__label\">Direct imports</span>\n <div class=\"perf-chips\">\n @for (imp of visibleImports(); track imp) {\n <prism-badge\n [tone]=\"imp.startsWith('@angular/') ? 'primary' : 'neutral'\"\n [value]=\"imp\" />\n }\n @if (hiddenImportCount() > 0) {\n <prism-badge [value]=\"'+' + hiddenImportCount()\" />\n }\n </div>\n </div>\n} @else {\n <div class=\"perf-empty\">\n <span>No bundle data available</span>\n <span>Bundle metrics are collected at build time</span>\n </div>\n}\n", styles: ["/* Shared by the bundle, render and memory sections: metric cards on a 12 px\n grid, block cards for bars and traces, and the empty state. The cards\n themselves are prism-metric-card from @ng-prism/core. */\n:host {\n display: block;\n}\n\n.perf-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 12px;\n padding: 16px 18px 0;\n}\n\n.perf-block {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 10px 12px;\n margin: 12px 18px 0;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 6px;\n}\n\n.perf-block:last-child {\n margin-bottom: 16px;\n}\n\n.perf-block__label {\n font-size: 11px;\n font-weight: 600;\n color: var(--prism-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n}\n\n/* Quantities, not verdicts: one colour, the primary, never the brand gradient. */\n.perf-bars {\n display: grid;\n grid-template-columns: 84px minmax(0, 1fr) auto;\n gap: 10px;\n align-items: center;\n font-family: var(--font-mono);\n font-size: 12px;\n}\n\n.perf-bar-label {\n color: var(--prism-text-muted);\n}\n\n.perf-bar-track {\n height: 6px;\n overflow: hidden;\n background: var(--prism-input-bg);\n border-radius: 3px;\n}\n\n.perf-bar-fill {\n height: 100%;\n background: var(--prism-primary);\n border-radius: 3px;\n}\n\n.perf-bar-val {\n color: var(--prism-text-2);\n white-space: nowrap;\n}\n\n.perf-empty {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 160px;\n font-size: 12.5px;\n color: var(--prism-text-muted);\n}\n\n.perf-block > prism-badge {\n align-self: flex-start;\n}\n", ".perf-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n"] }]
|
|
270
145
|
}], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], warnKb: [{ type: i0.Input, args: [{ isSignal: true, alias: "warnKb", required: false }] }], critKb: [{ type: i0.Input, args: [{ isSignal: true, alias: "critKb", required: false }] }] }); })();
|
|
271
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BundleSectionComponent, { className: "BundleSectionComponent", filePath: "bundle/bundle-section.component.ts", lineNumber:
|
|
146
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BundleSectionComponent, { className: "BundleSectionComponent", filePath: "bundle/bundle-section.component.ts", lineNumber: 15 }); })();
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type BadgeTone } from '@ng-prism/core';
|
|
1
2
|
import type { PerfMemoryService } from './perf-memory.service.js';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
export declare class MemorySectionComponent {
|
|
@@ -5,8 +6,10 @@ export declare class MemorySectionComponent {
|
|
|
5
6
|
private readonly maxBytes;
|
|
6
7
|
readonly deltaText: import("@angular/core").Signal<string>;
|
|
7
8
|
readonly residualText: import("@angular/core").Signal<string>;
|
|
8
|
-
|
|
9
|
-
readonly
|
|
9
|
+
/** A heap that grew on create is worth a look, not a verdict. */
|
|
10
|
+
readonly afterCreateTone: import("@angular/core").Signal<BadgeTone | null>;
|
|
11
|
+
/** Whether the heap came back after destroy: the leak verdict. */
|
|
12
|
+
readonly destroyTone: import("@angular/core").Signal<BadgeTone | null>;
|
|
10
13
|
barPercent(bytes: number | undefined): number;
|
|
11
14
|
formatMb(bytes: number | null | undefined): string;
|
|
12
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<MemorySectionComponent, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"memory-section.component.d.ts","sourceRoot":"","sources":["../../src/memory/memory-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAElE,
|
|
1
|
+
{"version":3,"file":"memory-section.component.d.ts","sourceRoot":"","sources":["../../src/memory/memory-section.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAiD,MAAM,gBAAgB,CAAC;AAC/F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAElE,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,aAAa,yDAAuC;IAE7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAKtB;IAEH,QAAQ,CAAC,SAAS,yCAKf;IAEH,QAAQ,CAAC,YAAY,yCAKlB;IAEH,iEAAiE;IACjE,QAAQ,CAAC,eAAe,mDAIrB;IAEH,kEAAkE;IAClE,QAAQ,CAAC,WAAW,mDASjB;IAEH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;IAK7C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;yCAhDzC,sBAAsB;2CAAtB,sBAAsB;CAoDlC"}
|