@ng-prism/plugin-perf 21.4.5 → 21.5.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAKpE,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,qBAwLa,kBAAkB;IAC7B,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,QAAQ,CAAC,SAAS,iDAA4B;IAC9C,QAAQ,CAAC,aAAa,oBAAmC;IACzD,QAAQ,CAAC,aAAa,oBAAmC;IAEzD,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAsB;IAEzD,sBAAsB,IAAI,IAAI;IAK9B,QAAQ,CAAC,aAAa,uDAOnB;yCArBQ,kBAAkB;2CAAlB,kBAAkB;CAsB9B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, input, signal, } from '@angular/core';
|
|
2
2
|
import { DEFAULT_THRESHOLDS } from './perf.types.js';
|
|
3
3
|
import { PerfRenderService } from './render/perf-render.service.js';
|
|
4
4
|
import { PerfMemoryService } from './memory/perf-memory.service.js';
|
|
@@ -13,7 +13,7 @@ function PerfPanelComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
|
|
|
13
13
|
} if (rf & 2) {
|
|
14
14
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
15
15
|
i0.ɵɵadvance();
|
|
16
|
-
i0.ɵɵtextInterpolate1("", ctx_r0.renderService.cdRunCount(), " CD runs");
|
|
16
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r0.renderService.cdRunCount(), " CD runs ");
|
|
17
17
|
} }
|
|
18
18
|
function PerfPanelComponent_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
19
19
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
@@ -163,85 +163,108 @@ export class PerfPanelComponent {
|
|
|
163
163
|
i0.ɵɵconditional(ctx.activeTab() === "memory" ? 16 : -1);
|
|
164
164
|
i0.ɵɵadvance(2);
|
|
165
165
|
i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ? 18 : tmp_6_0 === "render" ? 19 : tmp_6_0 === "memory" ? 20 : -1);
|
|
166
|
-
} }, dependencies: [BundleSectionComponent,
|
|
166
|
+
} }, dependencies: [BundleSectionComponent,
|
|
167
|
+
RenderSectionComponent,
|
|
168
|
+
MemorySectionComponent], styles: [".prism-perf-panel[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 340px; }\n .prism-perf-subtabs[_ngcontent-%COMP%] {\n display: flex; align-items: center;\n background: var(--prism-bg-elevated);\n border-bottom: 1px solid var(--prism-border);\n padding: 0 4px;\n }\n .prism-perf-subtab[_ngcontent-%COMP%] {\n padding: 7px 12px; font-size: 11px;\n font-family: var(--font-sans); font-weight: 500;\n color: var(--prism-text-muted); border: none; background: none;\n cursor: pointer; position: relative;\n display: flex; align-items: center; gap: 5px;\n transition: color var(--dur-fast); user-select: none;\n }\n .prism-perf-subtab[_ngcontent-%COMP%]::after {\n content: ''; position: absolute;\n bottom: -1px; left: 4px; right: 4px; height: 2px;\n background: var(--prism-primary); opacity: 0;\n }\n .prism-perf-subtab.active[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .prism-perf-subtab.active[_ngcontent-%COMP%]::after { opacity: 1; }\n .prism-perf-subtab-icon[_ngcontent-%COMP%] { font-size: 10px; opacity: 0.8; }\n .prism-perf-cd-badge[_ngcontent-%COMP%] {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 2px 8px; border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-size: 10px; font-family: var(--font-mono);\n color: var(--prism-primary); margin-left: auto;\n }\n .prism-perf-toolbar[_ngcontent-%COMP%] {\n display: flex; align-items: center; gap: 6px;\n padding: 6px 12px;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg-surface); flex-shrink: 0;\n }\n .prism-perf-btn[_ngcontent-%COMP%] {\n display: flex; align-items: center; gap: 5px;\n padding: 4px 10px;\n border: 1px solid var(--prism-border-strong);\n border-radius: var(--radius-sm);\n background: var(--prism-bg-elevated);\n color: var(--prism-text-2);\n font-family: var(--font-sans); font-size: 11px; font-weight: 500;\n cursor: pointer;\n transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);\n }\n .prism-perf-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 12%, var(--prism-bg-elevated));\n border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n color: var(--prism-primary);\n }\n .prism-perf-btn--primary[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 15%, var(--prism-bg-elevated));\n border-color: color-mix(in srgb, var(--prism-primary) 35%, transparent);\n color: var(--prism-primary);\n }\n .prism-perf-btn--primary[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 22%, var(--prism-bg-elevated));\n }\n .prism-perf-btn-icon[_ngcontent-%COMP%] { font-style: normal; font-size: 10px; }\n .prism-perf-toolbar-spacer[_ngcontent-%COMP%] { flex: 1; }\n .prism-perf-status[_ngcontent-%COMP%] {\n font-size: 10px; color: var(--prism-text-ghost);\n font-family: var(--font-mono);\n display: flex; align-items: center; gap: 5px;\n }\n .prism-perf-status-dot[_ngcontent-%COMP%] {\n width: 5px; height: 5px; 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 { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n .prism-perf-content[_ngcontent-%COMP%] {\n flex: 1; overflow-y: auto;\n background: var(--prism-bg-surface);\n }"], changeDetection: 0 });
|
|
167
169
|
}
|
|
168
170
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerfPanelComponent, [{
|
|
169
171
|
type: Component,
|
|
170
|
-
args: [{ selector: 'prism-perf-panel', standalone: true, imports: [
|
|
172
|
+
args: [{ selector: 'prism-perf-panel', standalone: true, imports: [
|
|
173
|
+
BundleSectionComponent,
|
|
174
|
+
RenderSectionComponent,
|
|
175
|
+
MemorySectionComponent,
|
|
176
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
171
177
|
<div class="prism-perf-panel">
|
|
172
178
|
<div class="prism-perf-subtabs">
|
|
173
|
-
<button
|
|
179
|
+
<button
|
|
180
|
+
class="prism-perf-subtab"
|
|
181
|
+
[class.active]="activeTab() === 'bundle'"
|
|
182
|
+
(click)="activeTab.set('bundle')"
|
|
183
|
+
>
|
|
174
184
|
<span class="prism-perf-subtab-icon">📦</span> Bundle
|
|
175
185
|
</button>
|
|
176
|
-
<button
|
|
186
|
+
<button
|
|
187
|
+
class="prism-perf-subtab"
|
|
188
|
+
[class.active]="activeTab() === 'render'"
|
|
189
|
+
(click)="activeTab.set('render')"
|
|
190
|
+
>
|
|
177
191
|
<span class="prism-perf-subtab-icon">⏱</span> Render
|
|
178
192
|
</button>
|
|
179
|
-
<button
|
|
193
|
+
<button
|
|
194
|
+
class="prism-perf-subtab"
|
|
195
|
+
[class.active]="activeTab() === 'memory'"
|
|
196
|
+
(click)="activeTab.set('memory')"
|
|
197
|
+
>
|
|
180
198
|
<span class="prism-perf-subtab-icon">🧠</span> Memory
|
|
181
199
|
</button>
|
|
182
200
|
@if (renderService.cdRunCount() > 0) {
|
|
183
|
-
|
|
201
|
+
<div class="prism-perf-cd-badge">
|
|
202
|
+
{{ renderService.cdRunCount() }} CD runs
|
|
203
|
+
</div>
|
|
184
204
|
}
|
|
185
205
|
</div>
|
|
186
206
|
|
|
187
207
|
@if (activeTab() === 'render') {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
<
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<div class="prism-perf-toolbar">
|
|
213
|
-
<button class="prism-perf-btn prism-perf-btn--primary" (click)="captureMemorySnapshots()">
|
|
214
|
-
<i class="prism-perf-btn-icon">▶</i> Snapshot
|
|
215
|
-
</button>
|
|
216
|
-
<button class="prism-perf-btn" (click)="memoryService.clear()">
|
|
217
|
-
<i class="prism-perf-btn-icon">✕</i> Clear
|
|
218
|
-
</button>
|
|
219
|
-
<div class="prism-perf-toolbar-spacer"></div>
|
|
208
|
+
<div class="prism-perf-toolbar">
|
|
209
|
+
@if (renderService.isRecording()) {
|
|
210
|
+
<button
|
|
211
|
+
class="prism-perf-btn prism-perf-btn--primary"
|
|
212
|
+
(click)="renderService.stopRecording()"
|
|
213
|
+
>
|
|
214
|
+
<i class="prism-perf-btn-icon">⏸</i> Pause
|
|
215
|
+
</button>
|
|
216
|
+
} @else {
|
|
217
|
+
<button
|
|
218
|
+
class="prism-perf-btn prism-perf-btn--primary"
|
|
219
|
+
(click)="renderService.startRecording()"
|
|
220
|
+
>
|
|
221
|
+
<i class="prism-perf-btn-icon">▶</i> Profile
|
|
222
|
+
</button>
|
|
223
|
+
}
|
|
224
|
+
<button class="prism-perf-btn" (click)="renderService.clear()">
|
|
225
|
+
<i class="prism-perf-btn-icon">✕</i> Clear
|
|
226
|
+
</button>
|
|
227
|
+
<div class="prism-perf-toolbar-spacer"></div>
|
|
228
|
+
@if (renderService.isRecording()) {
|
|
229
|
+
<div class="prism-perf-status">
|
|
230
|
+
<div class="prism-perf-status-dot"></div>
|
|
231
|
+
live · {{ renderService.sampleCount() }} samples
|
|
220
232
|
</div>
|
|
233
|
+
}
|
|
234
|
+
</div>
|
|
235
|
+
} @if (activeTab() === 'memory') {
|
|
236
|
+
<div class="prism-perf-toolbar">
|
|
237
|
+
<button
|
|
238
|
+
class="prism-perf-btn prism-perf-btn--primary"
|
|
239
|
+
(click)="captureMemorySnapshots()"
|
|
240
|
+
>
|
|
241
|
+
<i class="prism-perf-btn-icon">▶</i> Snapshot
|
|
242
|
+
</button>
|
|
243
|
+
<button class="prism-perf-btn" (click)="memoryService.clear()">
|
|
244
|
+
<i class="prism-perf-btn-icon">✕</i> Clear
|
|
245
|
+
</button>
|
|
246
|
+
<div class="prism-perf-toolbar-spacer"></div>
|
|
247
|
+
</div>
|
|
221
248
|
}
|
|
222
249
|
|
|
223
250
|
<div class="prism-perf-content">
|
|
224
|
-
@switch (activeTab()) {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
@case ('memory') {
|
|
240
|
-
<perf-memory-section [memoryService]="memoryService" />
|
|
241
|
-
}
|
|
242
|
-
}
|
|
251
|
+
@switch (activeTab()) { @case ('bundle') {
|
|
252
|
+
<perf-bundle-section
|
|
253
|
+
[metrics]="bundleMetrics()"
|
|
254
|
+
[warnKb]="thresholds.bundleWarnKb"
|
|
255
|
+
[critKb]="thresholds.bundleCritKb"
|
|
256
|
+
/>
|
|
257
|
+
} @case ('render') {
|
|
258
|
+
<perf-render-section
|
|
259
|
+
[renderService]="renderService"
|
|
260
|
+
[warnMs]="thresholds.renderWarnMs"
|
|
261
|
+
[critMs]="thresholds.renderCritMs"
|
|
262
|
+
/>
|
|
263
|
+
} @case ('memory') {
|
|
264
|
+
<perf-memory-section [memoryService]="memoryService" />
|
|
265
|
+
} }
|
|
243
266
|
</div>
|
|
244
267
|
</div>
|
|
245
|
-
`, styles: ["\n .prism-perf-panel {
|
|
268
|
+
`, styles: ["\n .prism-perf-panel { display: flex; flex-direction: column; height: 340px; }\n .prism-perf-subtabs {\n display: flex; align-items: center;\n background: var(--prism-bg-elevated);\n border-bottom: 1px solid var(--prism-border);\n padding: 0 4px;\n }\n .prism-perf-subtab {\n padding: 7px 12px; font-size: 11px;\n font-family: var(--font-sans); font-weight: 500;\n color: var(--prism-text-muted); border: none; background: none;\n cursor: pointer; position: relative;\n display: flex; align-items: center; gap: 5px;\n transition: color var(--dur-fast); user-select: none;\n }\n .prism-perf-subtab::after {\n content: ''; position: absolute;\n bottom: -1px; left: 4px; right: 4px; height: 2px;\n background: var(--prism-primary); opacity: 0;\n }\n .prism-perf-subtab.active { color: var(--prism-primary); }\n .prism-perf-subtab.active::after { opacity: 1; }\n .prism-perf-subtab-icon { font-size: 10px; opacity: 0.8; }\n .prism-perf-cd-badge {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 2px 8px; border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-size: 10px; font-family: var(--font-mono);\n color: var(--prism-primary); margin-left: auto;\n }\n .prism-perf-toolbar {\n display: flex; align-items: center; gap: 6px;\n padding: 6px 12px;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg-surface); flex-shrink: 0;\n }\n .prism-perf-btn {\n display: flex; align-items: center; gap: 5px;\n padding: 4px 10px;\n border: 1px solid var(--prism-border-strong);\n border-radius: var(--radius-sm);\n background: var(--prism-bg-elevated);\n color: var(--prism-text-2);\n font-family: var(--font-sans); font-size: 11px; font-weight: 500;\n cursor: pointer;\n transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);\n }\n .prism-perf-btn:hover {\n background: color-mix(in srgb, var(--prism-primary) 12%, var(--prism-bg-elevated));\n border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n color: var(--prism-primary);\n }\n .prism-perf-btn--primary {\n background: color-mix(in srgb, var(--prism-primary) 15%, var(--prism-bg-elevated));\n border-color: color-mix(in srgb, var(--prism-primary) 35%, transparent);\n color: var(--prism-primary);\n }\n .prism-perf-btn--primary:hover {\n background: color-mix(in srgb, var(--prism-primary) 22%, var(--prism-bg-elevated));\n }\n .prism-perf-btn-icon { font-style: normal; font-size: 10px; }\n .prism-perf-toolbar-spacer { flex: 1; }\n .prism-perf-status {\n font-size: 10px; color: var(--prism-text-ghost);\n font-family: var(--font-mono);\n display: flex; align-items: center; gap: 5px;\n }\n .prism-perf-status-dot {\n width: 5px; height: 5px; border-radius: 50%;\n background: var(--prism-success);\n box-shadow: 0 0 6px var(--prism-success);\n animation: prism-perf-pulse 2s ease-in-out infinite;\n }\n @keyframes prism-perf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n .prism-perf-content {\n flex: 1; overflow-y: auto;\n background: var(--prism-bg-surface);\n }\n "] }]
|
|
246
269
|
}], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
|
|
247
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerfPanelComponent, { className: "PerfPanelComponent", filePath: "perf-panel.component.ts", lineNumber:
|
|
270
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerfPanelComponent, { className: "PerfPanelComponent", filePath: "perf-panel.component.ts", lineNumber: 202 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"perf-plugin.browser.d.ts","sourceRoot":"","sources":["../src/perf-plugin.browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,wBAAgB,UAAU,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,aAAa,
|
|
1
|
+
{"version":3,"file":"perf-plugin.browser.d.ts","sourceRoot":"","sources":["../src/perf-plugin.browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,wBAAgB,UAAU,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,aAAa,CAetE"}
|
|
@@ -5,9 +5,10 @@ export function perfPlugin(_options) {
|
|
|
5
5
|
{
|
|
6
6
|
id: 'perf',
|
|
7
7
|
label: 'Performance',
|
|
8
|
+
icon: 'activity',
|
|
8
9
|
loadComponent: () => import('./perf-panel.component.js').then((m) => m.PerfPanelComponent),
|
|
9
10
|
position: 'bottom',
|
|
10
|
-
placement: '
|
|
11
|
+
placement: 'addon',
|
|
11
12
|
},
|
|
12
13
|
],
|
|
13
14
|
};
|