@ng-prism/plugin-perf 21.0.0 → 21.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# @ng-prism/plugin-perf
|
|
2
|
+
|
|
3
|
+
Render performance profiling plugin for [@ng-prism/core](https://github.com/dyingangel666/ng-prism). Tracks component render and re-render timing via the Performance API.
|
|
4
|
+
|
|
5
|
+
> **Full documentation:** [ng-prism Docs — Perf Plugin](https://dyingangel666.github.io/ng-prism/#/plugins/perf)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @ng-prism/plugin-perf
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer Dependencies
|
|
14
|
+
|
|
15
|
+
| Package | Version |
|
|
16
|
+
|---|---|
|
|
17
|
+
| `@ng-prism/core` | `>=21.0.0` |
|
|
18
|
+
| `@angular/core` | `>=20.0.0` |
|
|
19
|
+
|
|
20
|
+
## Setup
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
// ng-prism.config.ts
|
|
24
|
+
import { defineConfig } from '@ng-prism/core/config';
|
|
25
|
+
import { perfPlugin } from '@ng-prism/plugin-perf';
|
|
26
|
+
|
|
27
|
+
export default defineConfig({
|
|
28
|
+
plugins: [perfPlugin()],
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## What It Does
|
|
33
|
+
|
|
34
|
+
- Adds a **Performance** view tab to the styleguide
|
|
35
|
+
- Profiles component lifecycle:
|
|
36
|
+
- Initial render time (`prism:render`)
|
|
37
|
+
- Re-render time on input changes (`prism:rerender`)
|
|
38
|
+
- Uses the browser's native Performance API (`performance.mark` / `performance.measure`)
|
|
39
|
+
- Displays timing metrics per variant
|
|
40
|
+
- Memory usage tracking
|
|
41
|
+
|
|
42
|
+
## How It Works
|
|
43
|
+
|
|
44
|
+
The plugin hooks into ng-prism's renderer lifecycle via `PrismRendererHooks` (`onBeforeCreate`, `onAfterCreate`, `onAfterDestroy`). Performance marks are placed around component creation and input updates. The panel component reads `performance.getEntriesByName()` to display the results.
|
|
45
|
+
|
|
46
|
+
## License
|
|
47
|
+
|
|
48
|
+
MIT
|