@ng-prism/plugin-perf 22.6.0 → 22.7.0-beta.1
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-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-status.d.ts +12 -0
- package/dist/perf-status.d.ts.map +1 -0
- package/dist/perf-status.js +16 -0
- 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,44 +1,40 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
2
|
+
import { PrismBadgeComponent, PrismMetricCardComponent } from '@ng-prism/core';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
function MemorySectionComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
4
|
-
i0.ɵɵ
|
|
5
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "span");
|
|
5
6
|
i0.ɵɵtext(2, "Memory API not available");
|
|
6
|
-
i0.ɵɵ
|
|
7
|
-
i0.ɵɵ
|
|
7
|
+
i0.ɵɵelementEnd();
|
|
8
|
+
i0.ɵɵelementStart(3, "span");
|
|
8
9
|
i0.ɵɵtext(4, "performance.memory is Chrome-only (non-standard)");
|
|
9
|
-
i0.ɵɵ
|
|
10
|
+
i0.ɵɵelementEnd()();
|
|
10
11
|
} }
|
|
11
|
-
function
|
|
12
|
-
i0.ɵɵ
|
|
13
|
-
i0.ɵɵtext(
|
|
14
|
-
i0.ɵɵ
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
i0.ɵɵ
|
|
18
|
-
i0.ɵɵ
|
|
19
|
-
i0.ɵɵ
|
|
20
|
-
i0.ɵɵ
|
|
21
|
-
i0.ɵɵ
|
|
22
|
-
i0.ɵɵ
|
|
23
|
-
i0.ɵɵ
|
|
24
|
-
i0.ɵɵ
|
|
25
|
-
i0.ɵɵ
|
|
26
|
-
i0.ɵɵ
|
|
27
|
-
i0.ɵɵ
|
|
28
|
-
i0.ɵɵ
|
|
29
|
-
i0.ɵɵ
|
|
30
|
-
i0.ɵɵ
|
|
31
|
-
i0.ɵɵ
|
|
32
|
-
i0.ɵɵ
|
|
33
|
-
i0.ɵɵdomElement(15, "div", 21);
|
|
34
|
-
i0.ɵɵdomElementEnd();
|
|
35
|
-
i0.ɵɵdomElementStart(16, "span", 22);
|
|
36
|
-
i0.ɵɵtext(17);
|
|
37
|
-
i0.ɵɵdomElementEnd()()()();
|
|
12
|
+
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
13
|
+
i0.ɵɵelementStart(0, "div", 5)(1, "span", 7);
|
|
14
|
+
i0.ɵɵtext(2, "Heap comparison");
|
|
15
|
+
i0.ɵɵelementEnd();
|
|
16
|
+
i0.ɵɵelementStart(3, "div", 10)(4, "span", 11);
|
|
17
|
+
i0.ɵɵtext(5, "before");
|
|
18
|
+
i0.ɵɵelementEnd();
|
|
19
|
+
i0.ɵɵelementStart(6, "div", 12);
|
|
20
|
+
i0.ɵɵelement(7, "div", 13);
|
|
21
|
+
i0.ɵɵelementEnd();
|
|
22
|
+
i0.ɵɵelementStart(8, "span", 14);
|
|
23
|
+
i0.ɵɵtext(9);
|
|
24
|
+
i0.ɵɵelementEnd();
|
|
25
|
+
i0.ɵɵelementStart(10, "span", 11);
|
|
26
|
+
i0.ɵɵtext(11, "after create");
|
|
27
|
+
i0.ɵɵelementEnd();
|
|
28
|
+
i0.ɵɵelementStart(12, "div", 12);
|
|
29
|
+
i0.ɵɵelement(13, "div", 13);
|
|
30
|
+
i0.ɵɵelementEnd();
|
|
31
|
+
i0.ɵɵelementStart(14, "span", 14);
|
|
32
|
+
i0.ɵɵtext(15);
|
|
33
|
+
i0.ɵɵelementEnd()()();
|
|
38
34
|
} if (rf & 2) {
|
|
39
35
|
const svc_r1 = i0.ɵɵnextContext(2);
|
|
40
36
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
41
|
-
i0.ɵɵadvance(
|
|
37
|
+
i0.ɵɵadvance(7);
|
|
42
38
|
i0.ɵɵstyleProp("width", ctx_r1.barPercent(svc_r1.beforeCreate()?.bytes), "%");
|
|
43
39
|
i0.ɵɵadvance(2);
|
|
44
40
|
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes), " MB");
|
|
@@ -47,96 +43,50 @@ function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Templ
|
|
|
47
43
|
i0.ɵɵadvance(2);
|
|
48
44
|
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(svc_r1.afterCreate()?.bytes), " MB");
|
|
49
45
|
} }
|
|
50
|
-
function
|
|
51
|
-
i0.ɵɵ
|
|
52
|
-
i0.ɵɵdomElement(1, "span", 23);
|
|
53
|
-
i0.ɵɵtext(2, " No significant leak detected ");
|
|
54
|
-
i0.ɵɵdomElementEnd();
|
|
46
|
+
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
47
|
+
i0.ɵɵelement(0, "prism-badge", 8);
|
|
55
48
|
} }
|
|
56
|
-
function
|
|
57
|
-
i0.ɵɵ
|
|
58
|
-
i0.ɵɵdomElement(1, "span", 23);
|
|
59
|
-
i0.ɵɵtext(2);
|
|
60
|
-
i0.ɵɵdomElementEnd();
|
|
49
|
+
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
50
|
+
i0.ɵɵelement(0, "prism-badge", 9);
|
|
61
51
|
} if (rf & 2) {
|
|
62
52
|
const svc_r1 = i0.ɵɵnextContext(2);
|
|
63
53
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
64
|
-
i0.ɵɵ
|
|
65
|
-
i0.ɵɵtextInterpolate1(" Possible leak \u2014 +", ctx_r1.formatMb(svc_r1.residual()), " MB not reclaimed ");
|
|
54
|
+
i0.ɵɵproperty("label", "Possible leak: +" + ctx_r1.formatMb(svc_r1.residual()) + " MB not reclaimed");
|
|
66
55
|
} }
|
|
67
56
|
function MemorySectionComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
68
|
-
i0.ɵɵ
|
|
69
|
-
i0.ɵɵ
|
|
70
|
-
i0.ɵɵ
|
|
71
|
-
i0.ɵɵ
|
|
72
|
-
i0.ɵɵ
|
|
73
|
-
i0.ɵɵ
|
|
74
|
-
i0.ɵɵ
|
|
75
|
-
i0.ɵɵ
|
|
76
|
-
i0.ɵɵ
|
|
77
|
-
i0.ɵɵtext(10, "baseline heap");
|
|
78
|
-
i0.ɵɵdomElementEnd()();
|
|
79
|
-
i0.ɵɵdomElementStart(11, "div", 4)(12, "div", 5)(13, "span", 6);
|
|
80
|
-
i0.ɵɵtext(14, "After Create");
|
|
81
|
-
i0.ɵɵdomElementEnd();
|
|
82
|
-
i0.ɵɵconditionalCreate(15, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_15_Template, 2, 0, "span", 9);
|
|
83
|
-
i0.ɵɵdomElementEnd();
|
|
84
|
-
i0.ɵɵdomElementStart(16, "div", 7);
|
|
85
|
-
i0.ɵɵtext(17);
|
|
86
|
-
i0.ɵɵdomElementStart(18, "span");
|
|
87
|
-
i0.ɵɵtext(19, "MB");
|
|
88
|
-
i0.ɵɵdomElementEnd()();
|
|
89
|
-
i0.ɵɵdomElementStart(20, "div", 8);
|
|
90
|
-
i0.ɵɵtext(21);
|
|
91
|
-
i0.ɵɵdomElementEnd()();
|
|
92
|
-
i0.ɵɵdomElementStart(22, "div", 4)(23, "div", 5)(24, "span", 6);
|
|
93
|
-
i0.ɵɵtext(25, "After Destroy");
|
|
94
|
-
i0.ɵɵdomElementEnd()();
|
|
95
|
-
i0.ɵɵdomElementStart(26, "div", 7);
|
|
96
|
-
i0.ɵɵtext(27);
|
|
97
|
-
i0.ɵɵdomElementStart(28, "span");
|
|
98
|
-
i0.ɵɵtext(29, "MB");
|
|
99
|
-
i0.ɵɵdomElementEnd()()()();
|
|
100
|
-
i0.ɵɵconditionalCreate(30, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Template, 18, 6, "div", 10);
|
|
101
|
-
i0.ɵɵdomElementStart(31, "div", 11)(32, "div", 12)(33, "div", 5)(34, "span", 6);
|
|
102
|
-
i0.ɵɵtext(35, "Leak Analysis");
|
|
103
|
-
i0.ɵɵdomElementEnd()();
|
|
104
|
-
i0.ɵɵconditionalCreate(36, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_36_Template, 3, 0, "div", 13)(37, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_37_Template, 3, 1, "div", 14);
|
|
105
|
-
i0.ɵɵdomElementStart(38, "div", 15);
|
|
106
|
-
i0.ɵɵtext(39, "\u24D8 performance.memory is Chrome-only (non-standard). Not available in other browsers.");
|
|
107
|
-
i0.ɵɵdomElementEnd()()();
|
|
57
|
+
i0.ɵɵelementStart(0, "div", 1);
|
|
58
|
+
i0.ɵɵelement(1, "prism-metric-card", 2)(2, "prism-metric-card", 3)(3, "prism-metric-card", 4);
|
|
59
|
+
i0.ɵɵelementEnd();
|
|
60
|
+
i0.ɵɵconditionalCreate(4, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_4_Template, 16, 6, "div", 5);
|
|
61
|
+
i0.ɵɵelementStart(5, "div", 6)(6, "span", 7);
|
|
62
|
+
i0.ɵɵtext(7, "Leak analysis");
|
|
63
|
+
i0.ɵɵelementEnd();
|
|
64
|
+
i0.ɵɵconditionalCreate(8, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_8_Template, 1, 0, "prism-badge", 8)(9, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_9_Template, 1, 1, "prism-badge", 9);
|
|
65
|
+
i0.ɵɵelementEnd();
|
|
108
66
|
} if (rf & 2) {
|
|
109
67
|
const svc_r1 = i0.ɵɵnextContext();
|
|
110
68
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
111
|
-
i0.ɵɵadvance(6);
|
|
112
|
-
i0.ɵɵtextInterpolate(ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes));
|
|
113
|
-
i0.ɵɵadvance(9);
|
|
114
|
-
i0.ɵɵconditional(svc_r1.delta() !== null && svc_r1.delta() > 0 ? 15 : -1);
|
|
115
69
|
i0.ɵɵadvance();
|
|
116
|
-
i0.ɵɵ
|
|
70
|
+
i0.ɵɵproperty("value", ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes));
|
|
117
71
|
i0.ɵɵadvance();
|
|
118
|
-
i0.ɵɵ
|
|
119
|
-
i0.ɵɵadvance(4);
|
|
120
|
-
i0.ɵɵtextInterpolate(ctx_r1.deltaText());
|
|
121
|
-
i0.ɵɵadvance(5);
|
|
122
|
-
i0.ɵɵstyleProp("color", ctx_r1.destroyColor());
|
|
72
|
+
i0.ɵɵproperty("value", ctx_r1.formatMb(svc_r1.afterCreate()?.bytes))("tone", ctx_r1.afterCreateTone())("statusLabel", ctx_r1.afterCreateTone() ? "Watch" : null)("title", ctx_r1.deltaText() || "Heap right after the component was created");
|
|
123
73
|
i0.ɵɵadvance();
|
|
124
|
-
i0.ɵɵ
|
|
125
|
-
i0.ɵɵadvance(
|
|
126
|
-
i0.ɵɵconditional(svc_r1.beforeCreate() && svc_r1.afterCreate() ?
|
|
127
|
-
i0.ɵɵadvance(
|
|
128
|
-
i0.ɵɵconditional(svc_r1.leakStatus() === "ok" ?
|
|
74
|
+
i0.ɵɵproperty("value", ctx_r1.formatMb(svc_r1.afterDestroy()?.bytes))("tone", ctx_r1.destroyTone())("statusLabel", ctx_r1.destroyTone() === "danger" ? "Leak" : ctx_r1.destroyTone() === "success" ? "OK" : null)("title", ctx_r1.residualText() || "Heap after the component was destroyed");
|
|
75
|
+
i0.ɵɵadvance();
|
|
76
|
+
i0.ɵɵconditional(svc_r1.beforeCreate() && svc_r1.afterCreate() ? 4 : -1);
|
|
77
|
+
i0.ɵɵadvance(4);
|
|
78
|
+
i0.ɵɵconditional(svc_r1.leakStatus() === "ok" ? 8 : svc_r1.leakStatus() === "warn" ? 9 : -1);
|
|
129
79
|
} }
|
|
130
80
|
function MemorySectionComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
131
|
-
i0.ɵɵ
|
|
81
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "span");
|
|
132
82
|
i0.ɵɵtext(2, "No memory snapshots yet");
|
|
133
|
-
i0.ɵɵ
|
|
134
|
-
i0.ɵɵ
|
|
83
|
+
i0.ɵɵelementEnd();
|
|
84
|
+
i0.ɵɵelementStart(3, "span");
|
|
135
85
|
i0.ɵɵtext(4, "Click Snapshot to capture heap data");
|
|
136
|
-
i0.ɵɵ
|
|
86
|
+
i0.ɵɵelementEnd()();
|
|
137
87
|
} }
|
|
138
88
|
function MemorySectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
139
|
-
i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Conditional_0_Template, 5, 0, "div", 0)(1, MemorySectionComponent_Conditional_0_Conditional_1_Template,
|
|
89
|
+
i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Conditional_0_Template, 5, 0, "div", 0)(1, MemorySectionComponent_Conditional_0_Conditional_1_Template, 10, 11)(2, MemorySectionComponent_Conditional_0_Conditional_2_Template, 5, 0, "div", 0);
|
|
140
90
|
} if (rf & 2) {
|
|
141
91
|
const svc_r1 = ctx;
|
|
142
92
|
i0.ɵɵconditional(!svc_r1.available() ? 0 : svc_r1.snapshots().length > 0 ? 1 : 2);
|
|
@@ -164,25 +114,25 @@ export class MemorySectionComponent {
|
|
|
164
114
|
return `+${this.formatMb(r)} MB residual`;
|
|
165
115
|
}, /* @ts-ignore */
|
|
166
116
|
...(ngDevMode ? [{ debugName: "residualText" }] : /* istanbul ignore next */ []));
|
|
167
|
-
|
|
117
|
+
/** A heap that grew on create is worth a look, not a verdict. */
|
|
118
|
+
afterCreateTone = computed(() => {
|
|
168
119
|
const d = this.memoryService().delta();
|
|
169
|
-
|
|
170
|
-
return 'var(--prism-warn)';
|
|
171
|
-
return '';
|
|
120
|
+
return d !== null && d > 0 ? 'warn' : null;
|
|
172
121
|
}, /* @ts-ignore */
|
|
173
|
-
...(ngDevMode ? [{ debugName: "
|
|
174
|
-
|
|
122
|
+
...(ngDevMode ? [{ debugName: "afterCreateTone" }] : /* istanbul ignore next */ []));
|
|
123
|
+
/** Whether the heap came back after destroy: the leak verdict. */
|
|
124
|
+
destroyTone = computed(() => {
|
|
175
125
|
const svc = this.memoryService();
|
|
176
126
|
if (!svc.afterDestroy())
|
|
177
|
-
return
|
|
127
|
+
return null;
|
|
178
128
|
const status = svc.leakStatus();
|
|
179
129
|
if (status === 'ok')
|
|
180
|
-
return '
|
|
130
|
+
return 'success';
|
|
181
131
|
if (status === 'warn')
|
|
182
|
-
return '
|
|
183
|
-
return
|
|
132
|
+
return 'danger';
|
|
133
|
+
return null;
|
|
184
134
|
}, /* @ts-ignore */
|
|
185
|
-
...(ngDevMode ? [{ debugName: "
|
|
135
|
+
...(ngDevMode ? [{ debugName: "destroyTone" }] : /* istanbul ignore next */ []));
|
|
186
136
|
barPercent(bytes) {
|
|
187
137
|
if (!bytes || this.maxBytes() === 0)
|
|
188
138
|
return 0;
|
|
@@ -194,15 +144,15 @@ export class MemorySectionComponent {
|
|
|
194
144
|
return (bytes / (1024 * 1024)).toFixed(1);
|
|
195
145
|
}
|
|
196
146
|
static ɵfac = function MemorySectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MemorySectionComponent)(); };
|
|
197
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MemorySectionComponent, selectors: [["perf-memory-section"]], inputs: { memoryService: [1, "memoryService"] }, decls: 1, vars: 1, consts: [[1, "perf-empty"], [1, "perf-
|
|
147
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MemorySectionComponent, selectors: [["perf-memory-section"]], inputs: { memoryService: [1, "memoryService"] }, decls: 1, vars: 1, consts: [[1, "perf-empty"], [1, "perf-grid"], ["label", "Before create", "unit", "MB", "title", "Baseline heap", 3, "value"], ["label", "After create", "unit", "MB", 3, "value", "tone", "statusLabel", "title"], ["label", "After destroy", "unit", "MB", 3, "value", "tone", "statusLabel", "title"], [1, "perf-block"], ["title", "performance.memory is Chrome-only (non-standard) and not available in other browsers", 1, "perf-block"], [1, "perf-block__label"], ["dot", "", "tone", "success", "label", "No significant leak detected"], ["dot", "", "tone", "danger", 3, "label"], [1, "perf-bars"], [1, "perf-bar-label"], [1, "perf-bar-track"], [1, "perf-bar-fill"], [1, "perf-bar-val"]], template: function MemorySectionComponent_Template(rf, ctx) { if (rf & 1) {
|
|
198
148
|
i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Template, 3, 1);
|
|
199
149
|
} if (rf & 2) {
|
|
200
150
|
let tmp_0_0;
|
|
201
151
|
i0.ɵɵconditional((tmp_0_0 = ctx.memoryService()) ? 0 : -1, tmp_0_0);
|
|
202
|
-
} },
|
|
152
|
+
} }, 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}"] });
|
|
203
153
|
}
|
|
204
154
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MemorySectionComponent, [{
|
|
205
155
|
type: Component,
|
|
206
|
-
args: [{ selector: 'perf-memory-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (memoryService(); as svc) {\n @if (!svc.available()) {\n <div class=\"perf-empty\">\n <
|
|
156
|
+
args: [{ selector: 'perf-memory-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismMetricCardComponent, PrismBadgeComponent], template: "@if (memoryService(); as svc) {\n @if (!svc.available()) {\n <div class=\"perf-empty\">\n <span>Memory API not available</span>\n <span>performance.memory is Chrome-only (non-standard)</span>\n </div>\n } @else if (svc.snapshots().length > 0) {\n <div class=\"perf-grid\">\n <prism-metric-card\n label=\"Before create\"\n unit=\"MB\"\n title=\"Baseline heap\"\n [value]=\"formatMb(svc.beforeCreate()?.bytes)\" />\n <prism-metric-card\n label=\"After create\"\n unit=\"MB\"\n [value]=\"formatMb(svc.afterCreate()?.bytes)\"\n [tone]=\"afterCreateTone()\"\n [statusLabel]=\"afterCreateTone() ? 'Watch' : null\"\n [title]=\"deltaText() || 'Heap right after the component was created'\" />\n <prism-metric-card\n label=\"After destroy\"\n unit=\"MB\"\n [value]=\"formatMb(svc.afterDestroy()?.bytes)\"\n [tone]=\"destroyTone()\"\n [statusLabel]=\"destroyTone() === 'danger' ? 'Leak' : destroyTone() === 'success' ? 'OK' : null\"\n [title]=\"residualText() || 'Heap after the component was destroyed'\" />\n </div>\n\n @if (svc.beforeCreate() && svc.afterCreate()) {\n <div class=\"perf-block\">\n <span class=\"perf-block__label\">Heap comparison</span>\n <div class=\"perf-bars\">\n <span class=\"perf-bar-label\">before</span>\n <div class=\"perf-bar-track\"\n ><div\n class=\"perf-bar-fill\"\n [style.width.%]=\"barPercent(svc.beforeCreate()?.bytes)\"></div\n ></div>\n <span class=\"perf-bar-val\">{{ formatMb(svc.beforeCreate()?.bytes) }} MB</span>\n <span class=\"perf-bar-label\">after create</span>\n <div class=\"perf-bar-track\"\n ><div\n class=\"perf-bar-fill\"\n [style.width.%]=\"barPercent(svc.afterCreate()?.bytes)\"></div\n ></div>\n <span class=\"perf-bar-val\">{{ formatMb(svc.afterCreate()?.bytes) }} MB</span>\n </div>\n </div>\n }\n\n <div\n class=\"perf-block\"\n title=\"performance.memory is Chrome-only (non-standard) and not available in other browsers\">\n <span class=\"perf-block__label\">Leak analysis</span>\n @if (svc.leakStatus() === 'ok') {\n <prism-badge\n dot\n tone=\"success\"\n label=\"No significant leak detected\" />\n } @else if (svc.leakStatus() === 'warn') {\n <prism-badge\n dot\n tone=\"danger\"\n [label]=\"'Possible leak: +' + formatMb(svc.residual()!) + ' MB not reclaimed'\" />\n }\n </div>\n } @else {\n <div class=\"perf-empty\">\n <span>No memory snapshots yet</span>\n <span>Click Snapshot to capture heap data</span>\n </div>\n }\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"] }]
|
|
207
157
|
}], null, { memoryService: [{ type: i0.Input, args: [{ isSignal: true, alias: "memoryService", required: true }] }] }); })();
|
|
208
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MemorySectionComponent, { className: "MemorySectionComponent", filePath: "memory/memory-section.component.ts", lineNumber:
|
|
158
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MemorySectionComponent, { className: "MemorySectionComponent", filePath: "memory/memory-section.component.ts", lineNumber: 13 }); })();
|
|
@@ -14,7 +14,7 @@ export declare class PerfMemoryService implements PrismRendererHooks {
|
|
|
14
14
|
readonly afterDestroy: import("@angular/core").Signal<HeapSnapshot | null>;
|
|
15
15
|
readonly delta: import("@angular/core").Signal<number | null>;
|
|
16
16
|
readonly residual: import("@angular/core").Signal<number | null>;
|
|
17
|
-
readonly leakStatus: import("@angular/core").Signal<"
|
|
17
|
+
readonly leakStatus: import("@angular/core").Signal<"ok" | "warn" | "unknown">;
|
|
18
18
|
configure(gcDelayMs: number): void;
|
|
19
19
|
onBeforeCreate(_selector: string): void;
|
|
20
20
|
onAfterCreate(_selector: string): void;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type PrismTabItem } from '@ng-prism/core';
|
|
1
2
|
import { PerfMemoryService } from './memory/perf-memory.service.js';
|
|
2
3
|
import type { BundleMetrics, PerfThresholds } from './perf.types.js';
|
|
3
4
|
import { PerfRenderService } from './render/perf-render.service.js';
|
|
@@ -9,6 +10,10 @@ export declare class PerfPanelComponent {
|
|
|
9
10
|
readonly renderService: PerfRenderService;
|
|
10
11
|
readonly memoryService: PerfMemoryService;
|
|
11
12
|
readonly thresholds: PerfThresholds;
|
|
13
|
+
protected readonly tabs: PrismTabItem[];
|
|
14
|
+
protected selectTab(id: string | null): void;
|
|
15
|
+
/** Recording state and change-detection runs: meta for the tooltip, not for the toolbar. */
|
|
16
|
+
protected readonly profileTitle: import("@angular/core").Signal<string>;
|
|
12
17
|
captureMemorySnapshots(): void;
|
|
13
18
|
readonly bundleMetrics: import("@angular/core").Signal<BundleMetrics | null>;
|
|
14
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<PerfPanelComponent, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAoD,KAAK,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAGzH,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAGpE,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,qBAQa,kBAAkB;IAC3B,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,QAAQ,CAAC,SAAS,iDAA4B;IAC9C,QAAQ,CAAC,aAAa,oBAAmC;IACzD,QAAQ,CAAC,aAAa,oBAAmC;IAEzD,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAsB;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,EAAE,CAIrC;IAEF,SAAS,CAAC,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAI5C,4FAA4F;IAC5F,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAS5B;IAEH,sBAAsB,IAAI,IAAI;IAK9B,QAAQ,CAAC,aAAa,uDAQnB;yCA5CM,kBAAkB;2CAAlB,kBAAkB;CA6C9B"}
|