@everystate/perf 1.0.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/README.md +64 -0
- package/index.js +8 -0
- package/package.json +31 -0
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# @everystate/perf
|
|
2
|
+
|
|
3
|
+
**Performance monitoring for EveryState stores via the prepend pattern**
|
|
4
|
+
|
|
5
|
+
Non-invasive performance monitoring that wraps your store's methods to record timing, path heatmaps, and subscriber activity. Includes a floating browser overlay with live stats.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @everystate/perf @everystate/core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { createEventState } from '@everystate/core';
|
|
17
|
+
import { createPerfMonitor, mountOverlay } from '@everystate/perf';
|
|
18
|
+
|
|
19
|
+
const store = createEventState({ count: 0 });
|
|
20
|
+
|
|
21
|
+
// Wrap store with performance monitoring
|
|
22
|
+
const monitor = createPerfMonitor(store, {
|
|
23
|
+
maxEvents: 10000,
|
|
24
|
+
trackValues: false,
|
|
25
|
+
trackGets: false
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// Mount browser overlay
|
|
29
|
+
mountOverlay(monitor, document.body);
|
|
30
|
+
|
|
31
|
+
// Use store normally - all operations are tracked
|
|
32
|
+
store.set('count', 1);
|
|
33
|
+
store.subscribe('count', (val) => console.log(val));
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Features
|
|
37
|
+
|
|
38
|
+
- **Method wrapping** intercepts `set`, `get`, `subscribe`, `batch`, `setMany`
|
|
39
|
+
- **Path heatmaps** see which paths are accessed most often
|
|
40
|
+
- **Timeline recording** sub-millisecond timing for every operation
|
|
41
|
+
- **Browser overlay** floating panel with live stats, draggable, collapsible
|
|
42
|
+
- **Downloadable reports** export JSON for analysis
|
|
43
|
+
- **Zero impact** overlay refreshes at ~2fps, minimal performance overhead
|
|
44
|
+
|
|
45
|
+
## The Prepend Pattern
|
|
46
|
+
|
|
47
|
+
The monitor wraps store methods without modifying the original source:
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
const _origSet = store.set;
|
|
51
|
+
store.set = function(path, value) {
|
|
52
|
+
const start = performance.now();
|
|
53
|
+
const result = _origSet.call(this, path, value);
|
|
54
|
+
const duration = performance.now() - start;
|
|
55
|
+
recordEvent({ type: 'set', path, duration });
|
|
56
|
+
return result;
|
|
57
|
+
};
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Fully reversible via `monitor.destroy()`.
|
|
61
|
+
|
|
62
|
+
## License
|
|
63
|
+
|
|
64
|
+
MIT © Ajdin Imsirovic
|
package/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@everystate/perf",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "EveryState Performance Monitor: Non-invasive performance monitoring with method wrapping, path heatmaps, timeline recording, browser overlay",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "index.js",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"everystate",
|
|
9
|
+
"performance",
|
|
10
|
+
"profiler",
|
|
11
|
+
"event-state",
|
|
12
|
+
"reactive",
|
|
13
|
+
"devtools",
|
|
14
|
+
"path-heatmap",
|
|
15
|
+
"timeline",
|
|
16
|
+
"monitoring",
|
|
17
|
+
"prepend-pattern"
|
|
18
|
+
],
|
|
19
|
+
"author": {
|
|
20
|
+
"name": "Ajdin Imsirovic",
|
|
21
|
+
"url": "https://www.linkedin.com/in/ajdin-imsirovic"
|
|
22
|
+
},
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "https://github.com/ImsirovicAjdin/everystate-perf"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@uistate/perf": "^1.0.0"
|
|
30
|
+
}
|
|
31
|
+
}
|