@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.
@@ -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, ...(ngDevMode ? [{ debugName: "metrics" }] : []));
161
- warnKb = input(20, ...(ngDevMode ? [{ debugName: "warnKb" }] : []));
162
- critKb = input(50, ...(ngDevMode ? [{ debugName: "critKb" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "gzipPercent" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "sourceBarPercent" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "gzipBarPercent" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "sizeStatus" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "sizeStatusText" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "gzipStatus" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "gzipStatusText" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "visibleImports" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "hiddenImportCount" }] : []));
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; }"], changeDetection: 0 });
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((tmp_4_0 = svc_r1.beforeCreate()) == null ? null : tmp_4_0.bytes), "%");
42
+ i0.ɵɵstyleProp("width", ctx_r1.barPercent(svc_r1.beforeCreate()?.bytes), "%");
47
43
  i0.ɵɵadvance(2);
48
- i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_5_0 = svc_r1.beforeCreate()) == null ? null : tmp_5_0.bytes), " MB");
44
+ i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes), " MB");
49
45
  i0.ɵɵadvance(4);
50
- i0.ɵɵstyleProp("width", ctx_r1.barPercent((tmp_6_0 = svc_r1.afterCreate()) == null ? null : tmp_6_0.bytes), "%");
46
+ i0.ɵɵstyleProp("width", ctx_r1.barPercent(svc_r1.afterCreate()?.bytes), "%");
51
47
  i0.ɵɵadvance(2);
52
- i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_7_0 = svc_r1.afterCreate()) == null ? null : tmp_7_0.bytes), " MB");
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((tmp_3_0 = svc_r1.beforeCreate()) == null ? null : tmp_3_0.bytes));
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((tmp_6_0 = svc_r1.afterCreate()) == null ? null : tmp_6_0.bytes));
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((tmp_9_0 = svc_r1.afterDestroy()) == null ? null : tmp_9_0.bytes));
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(...(ngDevMode ? [{ debugName: "memoryService" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "maxBytes" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "deltaText" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "residualText" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "afterCreateColor" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "destroyColor" }] : []));
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; }"], changeDetection: 0 });
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([], ...(ngDevMode ? [{ debugName: "snapshots" }] : []));
10
- available = computed(() => typeof performance !== 'undefined' && 'memory' in performance, ...(ngDevMode ? [{ debugName: "available" }] : []));
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'), ...(ngDevMode ? [{ debugName: "beforeCreate" }] : []));
13
- afterCreate = computed(() => this.findSnapshot('after-create'), ...(ngDevMode ? [{ debugName: "afterCreate" }] : []));
14
- afterDestroy = computed(() => this.findSnapshot('after-destroy'), ...(ngDevMode ? [{ debugName: "afterDestroy" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "delta" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "residual" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "leakStatus" }] : []));
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, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
87
- activeTab = signal('bundle', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "bundleMetrics" }] : []));
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 }"], changeDetection: 0 });
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, ...(ngDevMode ? [{ debugName: "isRecording" }] : []));
10
- initialRender = signal(null, ...(ngDevMode ? [{ debugName: "initialRender" }] : []));
11
- rerenders = signal([], ...(ngDevMode ? [{ debugName: "rerenders" }] : []));
12
- cdRunCount = signal(0, ...(ngDevMode ? [{ debugName: "cdRunCount" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "avgRerender" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "p95Rerender" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "maxRerender" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "lastRerender" }] : []));
39
- sampleCount = computed(() => this.rerenders().length, ...(ngDevMode ? [{ debugName: "sampleCount" }] : []));
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(...(ngDevMode ? [{ debugName: "renderService" }] : []));
113
- warnMs = input(5, ...(ngDevMode ? [{ debugName: "warnMs" }] : []));
114
- critMs = input(16, ...(ngDevMode ? [{ debugName: "critMs" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "initialClass" }] : []));
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; }"], changeDetection: 0 });
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([], ...(ngDevMode ? [{ debugName: "samples" }] : []));
38
- thresholdWarn = input(5, ...(ngDevMode ? [{ debugName: "thresholdWarn" }] : []));
39
- height = input(52, ...(ngDevMode ? [{ debugName: "height" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "points" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "linePath" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "areaPath" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "warnY" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "peakPoint" }] : []));
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
- }, ...(ngDevMode ? [{ debugName: "currentPoint" }] : []));
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; }"], changeDetection: 0 });
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,4 @@
1
+ import { type Rule } from '@angular-devkit/schematics';
2
+ import type { NgAddSchemaOptions } from './schema.js';
3
+ export declare function ngAdd(options: NgAddSchemaOptions): Rule;
4
+ //# sourceMappingURL=index.d.ts.map
@@ -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,4 @@
1
+ export interface NgAddSchemaOptions {
2
+ configPath?: string;
3
+ }
4
+ //# sourceMappingURL=schema.d.ts.map
@@ -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": "21.12.0-beta.2",
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": ">=21.0.0",
37
+ "@angular/core": ">=20.0.0",
33
38
  "typescript": ">=5.0.0",
34
- "@ng-prism/core": "^21.12.0-0"
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
+ }