@ng-prism/plugin-perf 21.12.0-beta.2 → 22.0.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.js +25 -13
- package/dist/memory/memory-section.component.js +20 -21
- package/dist/memory/perf-memory.service.js +16 -8
- package/dist/perf-panel.component.js +7 -4
- package/dist/render/perf-render.service.js +18 -9
- package/dist/render/render-section.component.js +9 -5
- package/dist/render/sparkline.component.js +19 -10
- package/dist/schematics/ng-add/index.d.ts +4 -0
- package/dist/schematics/ng-add/index.d.ts.map +1 -0
- package/dist/schematics/ng-add/index.js +25 -0
- package/dist/schematics/ng-add/schema.d.ts +4 -0
- package/dist/schematics/ng-add/schema.d.ts.map +1 -0
- package/dist/schematics/ng-add/schema.js +1 -0
- package/package.json +8 -3
- package/schematics/collection.json +10 -0
- package/schematics/ng-add/schema.json +16 -0
|
@@ -157,29 +157,35 @@ function BundleSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
157
157
|
i0.ɵɵdomElementEnd()();
|
|
158
158
|
} }
|
|
159
159
|
export class BundleSectionComponent {
|
|
160
|
-
metrics = input(null,
|
|
161
|
-
|
|
162
|
-
|
|
160
|
+
metrics = input(null, /* @ts-ignore */
|
|
161
|
+
...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
|
|
162
|
+
warnKb = input(20, /* @ts-ignore */
|
|
163
|
+
...(ngDevMode ? [{ debugName: "warnKb" }] : /* istanbul ignore next */ []));
|
|
164
|
+
critKb = input(50, /* @ts-ignore */
|
|
165
|
+
...(ngDevMode ? [{ debugName: "critKb" }] : /* istanbul ignore next */ []));
|
|
163
166
|
gzipPercent = computed(() => {
|
|
164
167
|
const m = this.metrics();
|
|
165
168
|
if (!m || m.sourceSize === 0)
|
|
166
169
|
return 0;
|
|
167
170
|
return Math.round((m.gzipEstimate / m.sourceSize) * 100);
|
|
168
|
-
},
|
|
171
|
+
}, /* @ts-ignore */
|
|
172
|
+
...(ngDevMode ? [{ debugName: "gzipPercent" }] : /* istanbul ignore next */ []));
|
|
169
173
|
sourceBarPercent = computed(() => {
|
|
170
174
|
const m = this.metrics();
|
|
171
175
|
if (!m)
|
|
172
176
|
return 0;
|
|
173
177
|
const maxKb = this.critKb() * 1.2;
|
|
174
178
|
return Math.min(100, (m.sourceSize / 1024 / maxKb) * 100);
|
|
175
|
-
},
|
|
179
|
+
}, /* @ts-ignore */
|
|
180
|
+
...(ngDevMode ? [{ debugName: "sourceBarPercent" }] : /* istanbul ignore next */ []));
|
|
176
181
|
gzipBarPercent = computed(() => {
|
|
177
182
|
const m = this.metrics();
|
|
178
183
|
if (!m)
|
|
179
184
|
return 0;
|
|
180
185
|
const maxKb = this.critKb() * 1.2;
|
|
181
186
|
return Math.min(100, (m.gzipEstimate / 1024 / maxKb) * 100);
|
|
182
|
-
},
|
|
187
|
+
}, /* @ts-ignore */
|
|
188
|
+
...(ngDevMode ? [{ debugName: "gzipBarPercent" }] : /* istanbul ignore next */ []));
|
|
183
189
|
sizeStatus = computed(() => {
|
|
184
190
|
const m = this.metrics();
|
|
185
191
|
if (!m)
|
|
@@ -190,7 +196,8 @@ export class BundleSectionComponent {
|
|
|
190
196
|
if (kb >= this.warnKb())
|
|
191
197
|
return 'warn';
|
|
192
198
|
return 'good';
|
|
193
|
-
},
|
|
199
|
+
}, /* @ts-ignore */
|
|
200
|
+
...(ngDevMode ? [{ debugName: "sizeStatus" }] : /* istanbul ignore next */ []));
|
|
194
201
|
sizeStatusText = computed(() => {
|
|
195
202
|
const s = this.sizeStatus();
|
|
196
203
|
if (s === 'good')
|
|
@@ -200,7 +207,8 @@ export class BundleSectionComponent {
|
|
|
200
207
|
if (s === 'crit')
|
|
201
208
|
return 'crit';
|
|
202
209
|
return '';
|
|
203
|
-
},
|
|
210
|
+
}, /* @ts-ignore */
|
|
211
|
+
...(ngDevMode ? [{ debugName: "sizeStatusText" }] : /* istanbul ignore next */ []));
|
|
204
212
|
gzipStatus = computed(() => {
|
|
205
213
|
const m = this.metrics();
|
|
206
214
|
if (!m)
|
|
@@ -211,7 +219,8 @@ export class BundleSectionComponent {
|
|
|
211
219
|
if (kb >= this.warnKb())
|
|
212
220
|
return 'warn';
|
|
213
221
|
return 'good';
|
|
214
|
-
},
|
|
222
|
+
}, /* @ts-ignore */
|
|
223
|
+
...(ngDevMode ? [{ debugName: "gzipStatus" }] : /* istanbul ignore next */ []));
|
|
215
224
|
gzipStatusText = computed(() => {
|
|
216
225
|
const s = this.gzipStatus();
|
|
217
226
|
if (s === 'good')
|
|
@@ -221,17 +230,20 @@ export class BundleSectionComponent {
|
|
|
221
230
|
if (s === 'crit')
|
|
222
231
|
return 'crit';
|
|
223
232
|
return '';
|
|
224
|
-
},
|
|
233
|
+
}, /* @ts-ignore */
|
|
234
|
+
...(ngDevMode ? [{ debugName: "gzipStatusText" }] : /* istanbul ignore next */ []));
|
|
225
235
|
visibleImports = computed(() => {
|
|
226
236
|
const m = this.metrics();
|
|
227
237
|
return m?.importList.slice(0, 10) ?? [];
|
|
228
|
-
},
|
|
238
|
+
}, /* @ts-ignore */
|
|
239
|
+
...(ngDevMode ? [{ debugName: "visibleImports" }] : /* istanbul ignore next */ []));
|
|
229
240
|
hiddenImportCount = computed(() => {
|
|
230
241
|
const m = this.metrics();
|
|
231
242
|
if (!m)
|
|
232
243
|
return 0;
|
|
233
244
|
return Math.max(0, m.importList.length - 10);
|
|
234
|
-
},
|
|
245
|
+
}, /* @ts-ignore */
|
|
246
|
+
...(ngDevMode ? [{ debugName: "hiddenImportCount" }] : /* istanbul ignore next */ []));
|
|
235
247
|
formatBytes(bytes) {
|
|
236
248
|
return bytes.toLocaleString('en-US');
|
|
237
249
|
}
|
|
@@ -250,7 +262,7 @@ export class BundleSectionComponent {
|
|
|
250
262
|
} if (rf & 2) {
|
|
251
263
|
let tmp_0_0;
|
|
252
264
|
i0.ɵɵconditional((tmp_0_0 = ctx.metrics()) ? 0 : 1, tmp_0_0);
|
|
253
|
-
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n .perf-body--4col[_ngcontent-%COMP%] { grid-template-columns: repeat(4, 1fr); }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.good[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n color: var(--prism-success);\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-status.crit[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-danger) 15%, transparent);\n color: var(--prism-danger);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--prism-primary); }\n\n .perf-thresholds[_ngcontent-%COMP%] {\n margin-top: 10px;\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n .perf-thresholds--warn[_ngcontent-%COMP%] { color: var(--prism-warn); }\n .perf-thresholds--crit[_ngcontent-%COMP%] { color: var(--prism-danger); }\n\n .perf-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n }\n .perf-chip[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n padding: 4px 10px;\n background: var(--prism-input-bg);\n color: var(--prism-text-2);\n border: 1px solid var(--prism-border);\n border-radius: 5px;\n }\n .perf-chip.angular[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-primary);\n border-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"]
|
|
265
|
+
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n .perf-body--4col[_ngcontent-%COMP%] { grid-template-columns: repeat(4, 1fr); }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.good[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n color: var(--prism-success);\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-status.crit[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-danger) 15%, transparent);\n color: var(--prism-danger);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--prism-primary); }\n\n .perf-thresholds[_ngcontent-%COMP%] {\n margin-top: 10px;\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n .perf-thresholds--warn[_ngcontent-%COMP%] { color: var(--prism-warn); }\n .perf-thresholds--crit[_ngcontent-%COMP%] { color: var(--prism-danger); }\n\n .perf-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n }\n .perf-chip[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n padding: 4px 10px;\n background: var(--prism-input-bg);\n color: var(--prism-text-2);\n border: 1px solid var(--prism-border);\n border-radius: 5px;\n }\n .perf-chip.angular[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-primary);\n border-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"] });
|
|
254
266
|
}
|
|
255
267
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BundleSectionComponent, [{
|
|
256
268
|
type: Component,
|
|
@@ -36,20 +36,16 @@ function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Templ
|
|
|
36
36
|
i0.ɵɵtext(17);
|
|
37
37
|
i0.ɵɵdomElementEnd()()()();
|
|
38
38
|
} if (rf & 2) {
|
|
39
|
-
let tmp_4_0;
|
|
40
|
-
let tmp_5_0;
|
|
41
|
-
let tmp_6_0;
|
|
42
|
-
let tmp_7_0;
|
|
43
39
|
const svc_r1 = i0.ɵɵnextContext(2);
|
|
44
40
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
45
41
|
i0.ɵɵadvance(9);
|
|
46
|
-
i0.ɵɵstyleProp("width", ctx_r1.barPercent(
|
|
42
|
+
i0.ɵɵstyleProp("width", ctx_r1.barPercent(svc_r1.beforeCreate()?.bytes), "%");
|
|
47
43
|
i0.ɵɵadvance(2);
|
|
48
|
-
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(
|
|
44
|
+
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes), " MB");
|
|
49
45
|
i0.ɵɵadvance(4);
|
|
50
|
-
i0.ɵɵstyleProp("width", ctx_r1.barPercent(
|
|
46
|
+
i0.ɵɵstyleProp("width", ctx_r1.barPercent(svc_r1.afterCreate()?.bytes), "%");
|
|
51
47
|
i0.ɵɵadvance(2);
|
|
52
|
-
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(
|
|
48
|
+
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(svc_r1.afterCreate()?.bytes), " MB");
|
|
53
49
|
} }
|
|
54
50
|
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_36_Template(rf, ctx) { if (rf & 1) {
|
|
55
51
|
i0.ɵɵdomElementStart(0, "div", 13);
|
|
@@ -110,25 +106,22 @@ function MemorySectionComponent_Conditional_0_Conditional_1_Template(rf, ctx) {
|
|
|
110
106
|
i0.ɵɵtext(39, "\u24D8 performance.memory is Chrome-only (non-standard). Not available in other browsers.");
|
|
111
107
|
i0.ɵɵdomElementEnd()()();
|
|
112
108
|
} if (rf & 2) {
|
|
113
|
-
let tmp_3_0;
|
|
114
|
-
let tmp_6_0;
|
|
115
|
-
let tmp_9_0;
|
|
116
109
|
const svc_r1 = i0.ɵɵnextContext();
|
|
117
110
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
118
111
|
i0.ɵɵadvance(6);
|
|
119
|
-
i0.ɵɵtextInterpolate(ctx_r1.formatMb(
|
|
112
|
+
i0.ɵɵtextInterpolate(ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes));
|
|
120
113
|
i0.ɵɵadvance(9);
|
|
121
114
|
i0.ɵɵconditional(svc_r1.delta() !== null && svc_r1.delta() > 0 ? 15 : -1);
|
|
122
115
|
i0.ɵɵadvance();
|
|
123
116
|
i0.ɵɵstyleProp("color", ctx_r1.afterCreateColor());
|
|
124
117
|
i0.ɵɵadvance();
|
|
125
|
-
i0.ɵɵtextInterpolate(ctx_r1.formatMb(
|
|
118
|
+
i0.ɵɵtextInterpolate(ctx_r1.formatMb(svc_r1.afterCreate()?.bytes));
|
|
126
119
|
i0.ɵɵadvance(4);
|
|
127
120
|
i0.ɵɵtextInterpolate(ctx_r1.deltaText());
|
|
128
121
|
i0.ɵɵadvance(5);
|
|
129
122
|
i0.ɵɵstyleProp("color", ctx_r1.destroyColor());
|
|
130
123
|
i0.ɵɵadvance();
|
|
131
|
-
i0.ɵɵtextInterpolate(ctx_r1.formatMb(
|
|
124
|
+
i0.ɵɵtextInterpolate(ctx_r1.formatMb(svc_r1.afterDestroy()?.bytes));
|
|
132
125
|
i0.ɵɵadvance(3);
|
|
133
126
|
i0.ɵɵconditional(svc_r1.beforeCreate() && svc_r1.afterCreate() ? 30 : -1);
|
|
134
127
|
i0.ɵɵadvance(6);
|
|
@@ -149,7 +142,8 @@ function MemorySectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
149
142
|
i0.ɵɵconditional(!svc_r1.available() ? 0 : svc_r1.snapshots().length > 0 ? 1 : 2);
|
|
150
143
|
} }
|
|
151
144
|
export class MemorySectionComponent {
|
|
152
|
-
memoryService = input.required(
|
|
145
|
+
memoryService = input.required(/* @ts-ignore */
|
|
146
|
+
...(ngDevMode ? [{ debugName: "memoryService" }] : /* istanbul ignore next */ []));
|
|
153
147
|
maxBytes = computed(() => {
|
|
154
148
|
const svc = this.memoryService();
|
|
155
149
|
const vals = [
|
|
@@ -158,25 +152,29 @@ export class MemorySectionComponent {
|
|
|
158
152
|
svc.afterDestroy()?.bytes ?? 0,
|
|
159
153
|
];
|
|
160
154
|
return Math.max(...vals);
|
|
161
|
-
},
|
|
155
|
+
}, /* @ts-ignore */
|
|
156
|
+
...(ngDevMode ? [{ debugName: "maxBytes" }] : /* istanbul ignore next */ []));
|
|
162
157
|
deltaText = computed(() => {
|
|
163
158
|
const d = this.memoryService().delta();
|
|
164
159
|
if (d === null)
|
|
165
160
|
return '';
|
|
166
161
|
return `+${this.formatMb(d)} MB delta`;
|
|
167
|
-
},
|
|
162
|
+
}, /* @ts-ignore */
|
|
163
|
+
...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
|
|
168
164
|
residualText = computed(() => {
|
|
169
165
|
const r = this.memoryService().residual();
|
|
170
166
|
if (r === null)
|
|
171
167
|
return '';
|
|
172
168
|
return `+${this.formatMb(r)} MB residual`;
|
|
173
|
-
},
|
|
169
|
+
}, /* @ts-ignore */
|
|
170
|
+
...(ngDevMode ? [{ debugName: "residualText" }] : /* istanbul ignore next */ []));
|
|
174
171
|
afterCreateColor = computed(() => {
|
|
175
172
|
const d = this.memoryService().delta();
|
|
176
173
|
if (d !== null && d > 0)
|
|
177
174
|
return 'var(--prism-warn)';
|
|
178
175
|
return '';
|
|
179
|
-
},
|
|
176
|
+
}, /* @ts-ignore */
|
|
177
|
+
...(ngDevMode ? [{ debugName: "afterCreateColor" }] : /* istanbul ignore next */ []));
|
|
180
178
|
destroyColor = computed(() => {
|
|
181
179
|
const svc = this.memoryService();
|
|
182
180
|
if (!svc.afterDestroy())
|
|
@@ -187,7 +185,8 @@ export class MemorySectionComponent {
|
|
|
187
185
|
if (status === 'warn')
|
|
188
186
|
return 'var(--prism-danger)';
|
|
189
187
|
return '';
|
|
190
|
-
},
|
|
188
|
+
}, /* @ts-ignore */
|
|
189
|
+
...(ngDevMode ? [{ debugName: "destroyColor" }] : /* istanbul ignore next */ []));
|
|
191
190
|
barPercent(bytes) {
|
|
192
191
|
if (!bytes || this.maxBytes() === 0)
|
|
193
192
|
return 0;
|
|
@@ -204,7 +203,7 @@ export class MemorySectionComponent {
|
|
|
204
203
|
} if (rf & 2) {
|
|
205
204
|
let tmp_0_0;
|
|
206
205
|
i0.ɵɵconditional((tmp_0_0 = ctx.memoryService()) ? 0 : -1, tmp_0_0);
|
|
207
|
-
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-fill--warn[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, var(--prism-warn), var(--prism-warn));\n opacity: 0.8;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .perf-bar-val--warn[_ngcontent-%COMP%] { color: var(--prism-warn); }\n\n .perf-leak-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border-radius: 5px;\n font-size: 12px;\n font-weight: 500;\n margin-top: 8px;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-success) 25%, transparent);\n color: var(--prism-success);\n }\n .perf-leak-badge--warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-warn) 25%, transparent);\n color: var(--prism-warn);\n }\n .perf-leak-dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] { background: var(--prism-success); }\n .perf-leak-badge--warn[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] {\n background: var(--prism-warn);\n box-shadow: 0 0 6px var(--prism-warn);\n }\n\n .perf-disclaimer[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"]
|
|
206
|
+
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-fill--warn[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, var(--prism-warn), var(--prism-warn));\n opacity: 0.8;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .perf-bar-val--warn[_ngcontent-%COMP%] { color: var(--prism-warn); }\n\n .perf-leak-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border-radius: 5px;\n font-size: 12px;\n font-weight: 500;\n margin-top: 8px;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-success) 25%, transparent);\n color: var(--prism-success);\n }\n .perf-leak-badge--warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-warn) 25%, transparent);\n color: var(--prism-warn);\n }\n .perf-leak-dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] { background: var(--prism-success); }\n .perf-leak-badge--warn[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] {\n background: var(--prism-warn);\n box-shadow: 0 0 6px var(--prism-warn);\n }\n\n .perf-disclaimer[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"] });
|
|
208
207
|
}
|
|
209
208
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MemorySectionComponent, [{
|
|
210
209
|
type: Component,
|
|
@@ -6,32 +6,40 @@ export class PerfMemoryService {
|
|
|
6
6
|
instance = new PerfMemoryService();
|
|
7
7
|
return instance;
|
|
8
8
|
}
|
|
9
|
-
snapshots = signal([],
|
|
10
|
-
|
|
9
|
+
snapshots = signal([], /* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [{ debugName: "snapshots" }] : /* istanbul ignore next */ []));
|
|
11
|
+
available = computed(() => typeof performance !== 'undefined' && 'memory' in performance, /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []));
|
|
11
13
|
gcDelay = 100;
|
|
12
|
-
beforeCreate = computed(() => this.findSnapshot('before-create'),
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
beforeCreate = computed(() => this.findSnapshot('before-create'), /* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "beforeCreate" }] : /* istanbul ignore next */ []));
|
|
16
|
+
afterCreate = computed(() => this.findSnapshot('after-create'), /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "afterCreate" }] : /* istanbul ignore next */ []));
|
|
18
|
+
afterDestroy = computed(() => this.findSnapshot('after-destroy'), /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "afterDestroy" }] : /* istanbul ignore next */ []));
|
|
15
20
|
delta = computed(() => {
|
|
16
21
|
const before = this.beforeCreate();
|
|
17
22
|
const after = this.afterCreate();
|
|
18
23
|
if (!before || !after)
|
|
19
24
|
return null;
|
|
20
25
|
return after.bytes - before.bytes;
|
|
21
|
-
},
|
|
26
|
+
}, /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
|
|
22
28
|
residual = computed(() => {
|
|
23
29
|
const before = this.beforeCreate();
|
|
24
30
|
const destroy = this.afterDestroy();
|
|
25
31
|
if (!before || !destroy)
|
|
26
32
|
return null;
|
|
27
33
|
return destroy.bytes - before.bytes;
|
|
28
|
-
},
|
|
34
|
+
}, /* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [{ debugName: "residual" }] : /* istanbul ignore next */ []));
|
|
29
36
|
leakStatus = computed(() => {
|
|
30
37
|
const residualMb = this.residual();
|
|
31
38
|
if (residualMb === null)
|
|
32
39
|
return 'unknown';
|
|
33
40
|
return residualMb / (1024 * 1024) >= 0.5 ? 'warn' : 'ok';
|
|
34
|
-
},
|
|
41
|
+
}, /* @ts-ignore */
|
|
42
|
+
...(ngDevMode ? [{ debugName: "leakStatus" }] : /* istanbul ignore next */ []));
|
|
35
43
|
configure(gcDelayMs) {
|
|
36
44
|
this.gcDelay = gcDelayMs;
|
|
37
45
|
}
|
|
@@ -83,8 +83,10 @@ function PerfPanelComponent_Case_15_Template(rf, ctx) { if (rf & 1) {
|
|
|
83
83
|
i0.ɵɵproperty("memoryService", ctx_r2.memoryService);
|
|
84
84
|
} }
|
|
85
85
|
export class PerfPanelComponent {
|
|
86
|
-
activeComponent = input(null,
|
|
87
|
-
|
|
86
|
+
activeComponent = input(null, /* @ts-ignore */
|
|
87
|
+
...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
|
|
88
|
+
activeTab = signal('bundle', /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
88
90
|
renderService = PerfRenderService.getInstance();
|
|
89
91
|
memoryService = PerfMemoryService.getInstance();
|
|
90
92
|
thresholds = DEFAULT_THRESHOLDS;
|
|
@@ -95,7 +97,8 @@ export class PerfPanelComponent {
|
|
|
95
97
|
bundleMetrics = computed(() => {
|
|
96
98
|
const comp = this.activeComponent();
|
|
97
99
|
return comp?.meta?.showcaseConfig?.meta?.perf?.bundle ?? null;
|
|
98
|
-
},
|
|
100
|
+
}, /* @ts-ignore */
|
|
101
|
+
...(ngDevMode ? [{ debugName: "bundleMetrics" }] : /* istanbul ignore next */ []));
|
|
99
102
|
static ɵfac = function PerfPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PerfPanelComponent)(); };
|
|
100
103
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerfPanelComponent, selectors: [["prism-perf-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 16, vars: 10, consts: [[1, "prism-perf-panel"], [1, "prism-subtabs"], [1, "prism-st-tab", 3, "click"], [1, "prism-subtabs-actions"], [1, "prism-perf-cd-badge"], [1, "prism-perf-content"], [3, "metrics", "warnKb", "critKb"], [3, "renderService", "warnMs", "critMs"], [3, "memoryService"], [1, "prism-tool-btn"], [1, "prism-tool-btn", 3, "click"], [1, "prism-perf-status"], [1, "prism-perf-status-dot"]], template: function PerfPanelComponent_Template(rf, ctx) { if (rf & 1) {
|
|
101
104
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
|
|
@@ -136,7 +139,7 @@ export class PerfPanelComponent {
|
|
|
136
139
|
i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ? 13 : tmp_6_0 === "render" ? 14 : tmp_6_0 === "memory" ? 15 : -1);
|
|
137
140
|
} }, dependencies: [BundleSectionComponent,
|
|
138
141
|
RenderSectionComponent,
|
|
139
|
-
MemorySectionComponent], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-perf-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-subtabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg-elevated);\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .prism-st-tab[_ngcontent-%COMP%] {\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--prism-text-muted);\n border-radius: 6px 6px 0 0;\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n background: transparent;\n border: none;\n font-family: var(--font-sans);\n transition: color var(--dur-fast);\n }\n .prism-st-tab[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n .prism-st-tab--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n .prism-st-tab--active[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: 8px;\n right: 8px;\n bottom: -1px;\n height: 2px;\n background: var(--prism-primary);\n border-radius: 1px;\n }\n\n .prism-subtabs-actions[_ngcontent-%COMP%] {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .prism-perf-cd-badge[_ngcontent-%COMP%] {\n font-family: var(--font-mono, 'JetBrains Mono', monospace);\n font-size: 11px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n height: 24px;\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n border-radius: 5px;\n }\n .prism-tool-btn[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 9px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 11.5px;\n color: var(--prism-text-muted);\n transition: all 0.12s;\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n }\n .prism-tool-btn[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n }\n\n .prism-perf-status[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: var(--font-mono);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .prism-perf-status-dot[_ngcontent-%COMP%] {\n display: inline-block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--prism-success);\n box-shadow: 0 0 6px var(--prism-success);\n animation: _ngcontent-%COMP%_prism-perf-pulse 2s ease-in-out infinite;\n }\n @keyframes _ngcontent-%COMP%_prism-perf-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n\n .prism-perf-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n }"]
|
|
142
|
+
MemorySectionComponent], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-perf-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-subtabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg-elevated);\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .prism-st-tab[_ngcontent-%COMP%] {\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--prism-text-muted);\n border-radius: 6px 6px 0 0;\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n background: transparent;\n border: none;\n font-family: var(--font-sans);\n transition: color var(--dur-fast);\n }\n .prism-st-tab[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n .prism-st-tab--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n .prism-st-tab--active[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: 8px;\n right: 8px;\n bottom: -1px;\n height: 2px;\n background: var(--prism-primary);\n border-radius: 1px;\n }\n\n .prism-subtabs-actions[_ngcontent-%COMP%] {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .prism-perf-cd-badge[_ngcontent-%COMP%] {\n font-family: var(--font-mono, 'JetBrains Mono', monospace);\n font-size: 11px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n height: 24px;\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n border-radius: 5px;\n }\n .prism-tool-btn[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 9px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 11.5px;\n color: var(--prism-text-muted);\n transition: all 0.12s;\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n }\n .prism-tool-btn[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n }\n\n .prism-perf-status[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: var(--font-mono);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .prism-perf-status-dot[_ngcontent-%COMP%] {\n display: inline-block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--prism-success);\n box-shadow: 0 0 6px var(--prism-success);\n animation: _ngcontent-%COMP%_prism-perf-pulse 2s ease-in-out infinite;\n }\n @keyframes _ngcontent-%COMP%_prism-perf-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n\n .prism-perf-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n }"] });
|
|
140
143
|
}
|
|
141
144
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerfPanelComponent, [{
|
|
142
145
|
type: Component,
|
|
@@ -6,10 +6,14 @@ export class PerfRenderService {
|
|
|
6
6
|
instance = new PerfRenderService();
|
|
7
7
|
return instance;
|
|
8
8
|
}
|
|
9
|
-
isRecording = signal(false,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
isRecording = signal(false, /* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [{ debugName: "isRecording" }] : /* istanbul ignore next */ []));
|
|
11
|
+
initialRender = signal(null, /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "initialRender" }] : /* istanbul ignore next */ []));
|
|
13
|
+
rerenders = signal([], /* @ts-ignore */
|
|
14
|
+
...(ngDevMode ? [{ debugName: "rerenders" }] : /* istanbul ignore next */ []));
|
|
15
|
+
cdRunCount = signal(0, /* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [{ debugName: "cdRunCount" }] : /* istanbul ignore next */ []));
|
|
13
17
|
observer = null;
|
|
14
18
|
bufferSize = 50;
|
|
15
19
|
avgRerender = computed(() => {
|
|
@@ -17,7 +21,8 @@ export class PerfRenderService {
|
|
|
17
21
|
if (samples.length === 0)
|
|
18
22
|
return 0;
|
|
19
23
|
return samples.reduce((a, b) => a + b, 0) / samples.length;
|
|
20
|
-
},
|
|
24
|
+
}, /* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [{ debugName: "avgRerender" }] : /* istanbul ignore next */ []));
|
|
21
26
|
p95Rerender = computed(() => {
|
|
22
27
|
const samples = this.rerenders();
|
|
23
28
|
if (samples.length === 0)
|
|
@@ -25,18 +30,22 @@ export class PerfRenderService {
|
|
|
25
30
|
const sorted = [...samples].sort((a, b) => a - b);
|
|
26
31
|
const idx = Math.ceil(sorted.length * 0.95) - 1;
|
|
27
32
|
return sorted[idx];
|
|
28
|
-
},
|
|
33
|
+
}, /* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [{ debugName: "p95Rerender" }] : /* istanbul ignore next */ []));
|
|
29
35
|
maxRerender = computed(() => {
|
|
30
36
|
const samples = this.rerenders();
|
|
31
37
|
if (samples.length === 0)
|
|
32
38
|
return 0;
|
|
33
39
|
return Math.max(...samples);
|
|
34
|
-
},
|
|
40
|
+
}, /* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [{ debugName: "maxRerender" }] : /* istanbul ignore next */ []));
|
|
35
42
|
lastRerender = computed(() => {
|
|
36
43
|
const samples = this.rerenders();
|
|
37
44
|
return samples.length > 0 ? samples[samples.length - 1] : null;
|
|
38
|
-
},
|
|
39
|
-
|
|
45
|
+
}, /* @ts-ignore */
|
|
46
|
+
...(ngDevMode ? [{ debugName: "lastRerender" }] : /* istanbul ignore next */ []));
|
|
47
|
+
sampleCount = computed(() => this.rerenders().length, /* @ts-ignore */
|
|
48
|
+
...(ngDevMode ? [{ debugName: "sampleCount" }] : /* istanbul ignore next */ []));
|
|
40
49
|
configure(bufferSize) {
|
|
41
50
|
this.bufferSize = bufferSize;
|
|
42
51
|
}
|
|
@@ -109,9 +109,12 @@ function RenderSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
109
109
|
i0.ɵɵconditional(svc_r1.initialRender() !== null || svc_r1.rerenders().length > 0 ? 0 : 1);
|
|
110
110
|
} }
|
|
111
111
|
export class RenderSectionComponent {
|
|
112
|
-
renderService = input.required(
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
renderService = input.required(/* @ts-ignore */
|
|
113
|
+
...(ngDevMode ? [{ debugName: "renderService" }] : /* istanbul ignore next */ []));
|
|
114
|
+
warnMs = input(5, /* @ts-ignore */
|
|
115
|
+
...(ngDevMode ? [{ debugName: "warnMs" }] : /* istanbul ignore next */ []));
|
|
116
|
+
critMs = input(16, /* @ts-ignore */
|
|
117
|
+
...(ngDevMode ? [{ debugName: "critMs" }] : /* istanbul ignore next */ []));
|
|
115
118
|
initialClass = computed(() => {
|
|
116
119
|
const v = this.renderService().initialRender();
|
|
117
120
|
if (v === null)
|
|
@@ -121,7 +124,8 @@ export class RenderSectionComponent {
|
|
|
121
124
|
if (v >= this.warnMs())
|
|
122
125
|
return 'warn';
|
|
123
126
|
return '';
|
|
124
|
-
},
|
|
127
|
+
}, /* @ts-ignore */
|
|
128
|
+
...(ngDevMode ? [{ debugName: "initialClass" }] : /* istanbul ignore next */ []));
|
|
125
129
|
formatMs(value) {
|
|
126
130
|
if (value === null)
|
|
127
131
|
return '—';
|
|
@@ -142,7 +146,7 @@ export class RenderSectionComponent {
|
|
|
142
146
|
} if (rf & 2) {
|
|
143
147
|
let tmp_0_0;
|
|
144
148
|
i0.ɵɵconditional((tmp_0_0 = ctx.renderService()) ? 0 : -1, tmp_0_0);
|
|
145
|
-
} }, dependencies: [SparklineComponent], styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 20px; }\n\n .perf-sparkline-legend[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--prism-text-muted);\n }\n .perf-sparkline-hl[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .perf-sparkline-wrap[_ngcontent-%COMP%] { margin-top: 10px; position: relative; }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"]
|
|
149
|
+
} }, dependencies: [SparklineComponent], styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 20px; }\n\n .perf-sparkline-legend[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--prism-text-muted);\n }\n .perf-sparkline-hl[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .perf-sparkline-wrap[_ngcontent-%COMP%] { margin-top: 10px; position: relative; }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"] });
|
|
146
150
|
}
|
|
147
151
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RenderSectionComponent, [{
|
|
148
152
|
type: Component,
|
|
@@ -34,9 +34,12 @@ function SparklineComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
|
|
|
34
34
|
i0.ɵɵattribute("cx", current_r3.x)("cy", current_r3.y);
|
|
35
35
|
} }
|
|
36
36
|
export class SparklineComponent {
|
|
37
|
-
samples = input([],
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
samples = input([], /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "samples" }] : /* istanbul ignore next */ []));
|
|
39
|
+
thresholdWarn = input(5, /* @ts-ignore */
|
|
40
|
+
...(ngDevMode ? [{ debugName: "thresholdWarn" }] : /* istanbul ignore next */ []));
|
|
41
|
+
height = input(52, /* @ts-ignore */
|
|
42
|
+
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
40
43
|
points = computed(() => {
|
|
41
44
|
const data = this.samples();
|
|
42
45
|
const h = this.height();
|
|
@@ -49,13 +52,15 @@ export class SparklineComponent {
|
|
|
49
52
|
y: h - 4 - ((v / max) * (h - 8)),
|
|
50
53
|
value: v,
|
|
51
54
|
}));
|
|
52
|
-
},
|
|
55
|
+
}, /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
|
|
53
57
|
linePath = computed(() => {
|
|
54
58
|
const pts = this.points();
|
|
55
59
|
if (pts.length === 0)
|
|
56
60
|
return '';
|
|
57
61
|
return 'M' + pts.map((p) => `${p.x},${p.y}`).join(' L');
|
|
58
|
-
},
|
|
62
|
+
}, /* @ts-ignore */
|
|
63
|
+
...(ngDevMode ? [{ debugName: "linePath" }] : /* istanbul ignore next */ []));
|
|
59
64
|
areaPath = computed(() => {
|
|
60
65
|
const pts = this.points();
|
|
61
66
|
const h = this.height();
|
|
@@ -63,7 +68,8 @@ export class SparklineComponent {
|
|
|
63
68
|
return '';
|
|
64
69
|
const line = pts.map((p) => `${p.x},${p.y}`).join(' L');
|
|
65
70
|
return `M${pts[0].x},${h} L${line} L${pts[pts.length - 1].x},${h} Z`;
|
|
66
|
-
},
|
|
71
|
+
}, /* @ts-ignore */
|
|
72
|
+
...(ngDevMode ? [{ debugName: "areaPath" }] : /* istanbul ignore next */ []));
|
|
67
73
|
warnY = computed(() => {
|
|
68
74
|
const data = this.samples();
|
|
69
75
|
const h = this.height();
|
|
@@ -71,7 +77,8 @@ export class SparklineComponent {
|
|
|
71
77
|
return null;
|
|
72
78
|
const max = Math.max(...data, this.thresholdWarn() * 1.2);
|
|
73
79
|
return h - 4 - ((this.thresholdWarn() / max) * (h - 8));
|
|
74
|
-
},
|
|
80
|
+
}, /* @ts-ignore */
|
|
81
|
+
...(ngDevMode ? [{ debugName: "warnY" }] : /* istanbul ignore next */ []));
|
|
75
82
|
peakPoint = computed(() => {
|
|
76
83
|
const pts = this.points();
|
|
77
84
|
if (pts.length < 2)
|
|
@@ -82,11 +89,13 @@ export class SparklineComponent {
|
|
|
82
89
|
peak = p;
|
|
83
90
|
}
|
|
84
91
|
return peak.value > this.thresholdWarn() ? peak : null;
|
|
85
|
-
},
|
|
92
|
+
}, /* @ts-ignore */
|
|
93
|
+
...(ngDevMode ? [{ debugName: "peakPoint" }] : /* istanbul ignore next */ []));
|
|
86
94
|
currentPoint = computed(() => {
|
|
87
95
|
const pts = this.points();
|
|
88
96
|
return pts.length > 0 ? pts[pts.length - 1] : null;
|
|
89
|
-
},
|
|
97
|
+
}, /* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [{ debugName: "currentPoint" }] : /* istanbul ignore next */ []));
|
|
90
99
|
static ɵfac = function SparklineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SparklineComponent)(); };
|
|
91
100
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SparklineComponent, selectors: [["perf-sparkline"]], inputs: { samples: [1, "samples"], thresholdWarn: [1, "thresholdWarn"], height: [1, "height"] }, decls: 16, vars: 6, consts: [[1, "prism-perf-sparkline-wrap"], ["preserveAspectRatio", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "prism-perf-sparkline-svg"], ["id", "perf-sparkg", "x1", "0", "y1", "0", "x2", "0", "y2", "1"], ["offset", "0%", 1, "sparkline-gradient-start"], ["offset", "100%", 1, "sparkline-gradient-end"], ["id", "perf-glow"], ["stdDeviation", "1.5", "result", "coloredBlur"], ["in", "coloredBlur"], ["in", "SourceGraphic"], ["fill", "url(#perf-sparkg)"], ["fill", "none", "stroke-width", "1.5", "filter", "url(#perf-glow)", 1, "sparkline-line"], ["r", "3", "filter", "url(#perf-glow)", 1, "sparkline-peak"], [1, "sparkline-warn-line"], ["font-size", "8", "font-family", "monospace", 1, "sparkline-warn-text"], ["r", "2.5", 1, "sparkline-current"], ["r", "5", "stroke-width", "1", 1, "sparkline-current-pulse"], ["attributeName", "r", "values", "3;7", "dur", "1.5s", "repeatCount", "indefinite"], ["attributeName", "opacity", "values", "0.4;0", "dur", "1.5s", "repeatCount", "indefinite"]], template: function SparklineComponent_Template(rf, ctx) { if (rf & 1) {
|
|
92
101
|
i0.ɵɵdomElementStart(0, "div", 0);
|
|
@@ -119,7 +128,7 @@ export class SparklineComponent {
|
|
|
119
128
|
i0.ɵɵconditional((tmp_4_0 = ctx.peakPoint()) ? 14 : -1, tmp_4_0);
|
|
120
129
|
i0.ɵɵadvance();
|
|
121
130
|
i0.ɵɵconditional((tmp_5_0 = ctx.currentPoint()) ? 15 : -1, tmp_5_0);
|
|
122
|
-
} }, styles: [".prism-perf-sparkline-wrap[_ngcontent-%COMP%] { position: relative; }\n .prism-perf-sparkline-svg[_ngcontent-%COMP%] { width: 100%; height: 52px; }\n\n .sparkline-gradient-start[_ngcontent-%COMP%] { stop-color: var(--prism-primary); stop-opacity: 0.35; }\n .sparkline-gradient-end[_ngcontent-%COMP%] { stop-color: var(--prism-primary); stop-opacity: 0; }\n\n .sparkline-warn-line[_ngcontent-%COMP%] {\n stroke: var(--prism-warn);\n stroke-width: 0.8;\n stroke-dasharray: 4 4;\n opacity: 0.4;\n }\n .sparkline-warn-text[_ngcontent-%COMP%] { fill: var(--prism-warn); opacity: 0.5; }\n\n .sparkline-line[_ngcontent-%COMP%] { stroke: var(--prism-primary); }\n .sparkline-peak[_ngcontent-%COMP%] { fill: var(--prism-warn); }\n .sparkline-current[_ngcontent-%COMP%] { fill: var(--prism-primary); }\n .sparkline-current-pulse[_ngcontent-%COMP%] { fill: none; stroke: var(--prism-primary); opacity: 0.4; }"]
|
|
131
|
+
} }, styles: [".prism-perf-sparkline-wrap[_ngcontent-%COMP%] { position: relative; }\n .prism-perf-sparkline-svg[_ngcontent-%COMP%] { width: 100%; height: 52px; }\n\n .sparkline-gradient-start[_ngcontent-%COMP%] { stop-color: var(--prism-primary); stop-opacity: 0.35; }\n .sparkline-gradient-end[_ngcontent-%COMP%] { stop-color: var(--prism-primary); stop-opacity: 0; }\n\n .sparkline-warn-line[_ngcontent-%COMP%] {\n stroke: var(--prism-warn);\n stroke-width: 0.8;\n stroke-dasharray: 4 4;\n opacity: 0.4;\n }\n .sparkline-warn-text[_ngcontent-%COMP%] { fill: var(--prism-warn); opacity: 0.5; }\n\n .sparkline-line[_ngcontent-%COMP%] { stroke: var(--prism-primary); }\n .sparkline-peak[_ngcontent-%COMP%] { fill: var(--prism-warn); }\n .sparkline-current[_ngcontent-%COMP%] { fill: var(--prism-primary); }\n .sparkline-current-pulse[_ngcontent-%COMP%] { fill: none; stroke: var(--prism-primary); opacity: 0.4; }"] });
|
|
123
132
|
}
|
|
124
133
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SparklineComponent, [{
|
|
125
134
|
type: Component,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAGV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAyBtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAEvD"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { chain, } from '@angular-devkit/schematics';
|
|
2
|
+
import { addPluginToConfig } from '@ng-prism/core/schematics/utils';
|
|
3
|
+
const PLUGIN_IMPORT_NAME = 'perfPlugin';
|
|
4
|
+
const PLUGIN_IMPORT_FROM = '@ng-prism/plugin-perf';
|
|
5
|
+
const PLUGIN_CALL = 'perfPlugin()';
|
|
6
|
+
function injectPlugin(options) {
|
|
7
|
+
return (tree, context) => {
|
|
8
|
+
const configPath = options.configPath ?? 'ng-prism.config.ts';
|
|
9
|
+
const changed = addPluginToConfig(tree, configPath, {
|
|
10
|
+
importName: PLUGIN_IMPORT_NAME,
|
|
11
|
+
importFrom: PLUGIN_IMPORT_FROM,
|
|
12
|
+
call: PLUGIN_CALL,
|
|
13
|
+
});
|
|
14
|
+
if (changed) {
|
|
15
|
+
context.logger.info(` ${PLUGIN_IMPORT_FROM} → added to ${configPath}`);
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
context.logger.info(` ${PLUGIN_IMPORT_FROM} already configured — skipped`);
|
|
19
|
+
}
|
|
20
|
+
return tree;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export function ngAdd(options) {
|
|
24
|
+
return chain([injectPlugin(options)]);
|
|
25
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-prism/plugin-perf",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "22.0.0-beta.0",
|
|
4
4
|
"description": "Performance profiling panel for ng-prism — bundle size, render time, memory footprint.",
|
|
5
|
+
"ng-add": {
|
|
6
|
+
"save": "devDependencies"
|
|
7
|
+
},
|
|
8
|
+
"schematics": "./schematics/collection.json",
|
|
5
9
|
"keywords": [
|
|
6
10
|
"@ng-prism/core",
|
|
7
11
|
"performance",
|
|
@@ -26,12 +30,13 @@
|
|
|
26
30
|
},
|
|
27
31
|
"files": [
|
|
28
32
|
"dist",
|
|
33
|
+
"schematics",
|
|
29
34
|
"!**/*.tsbuildinfo"
|
|
30
35
|
],
|
|
31
36
|
"peerDependencies": {
|
|
32
|
-
"@angular/core": ">=
|
|
37
|
+
"@angular/core": ">=20.0.0",
|
|
33
38
|
"typescript": ">=5.0.0",
|
|
34
|
-
"@ng-prism/core": "^
|
|
39
|
+
"@ng-prism/core": "^22.0.0-0"
|
|
35
40
|
},
|
|
36
41
|
"devDependencies": {
|
|
37
42
|
"@ng-prism/core": "*"
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
|
|
3
|
+
"schematics": {
|
|
4
|
+
"ng-add": {
|
|
5
|
+
"description": "Adds @ng-prism/plugin-perf to the ng-prism config",
|
|
6
|
+
"factory": "../dist/schematics/ng-add/index#ngAdd",
|
|
7
|
+
"schema": "./ng-add/schema.json"
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "NgPrismPluginPerfNgAdd",
|
|
4
|
+
"title": "Add @ng-prism/plugin-perf",
|
|
5
|
+
"description": "Registers @ng-prism/plugin-perf in ng-prism.config.ts",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"configPath": {
|
|
9
|
+
"type": "string",
|
|
10
|
+
"description": "Path to ng-prism.config.ts",
|
|
11
|
+
"default": "ng-prism.config.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"required": [],
|
|
15
|
+
"additionalProperties": false
|
|
16
|
+
}
|