@everystate/perf

Performance monitoring for EveryState stores via the prepend pattern

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.

Installation

npm install @everystate/perf @everystate/core

Quick Start

import { createEveryState } from '@everystate/core';
import { createPerfMonitor, mountOverlay } from '@everystate/perf';

const store = createEveryState({ count: 0 });

// Wrap store with performance monitoring
const monitor = createPerfMonitor(store, {
  maxEvents: 10000,
  trackValues: false,
  trackGets: false
});

// Mount browser overlay
mountOverlay(monitor, document.body);

// Use store normally - all operations are tracked
store.set('count', 1);
store.subscribe('count', (val) => console.log(val));

Features

• Method wrapping intercepts set, get, subscribe, batch, setMany
• Path heatmaps see which paths are accessed most often
• Timeline recording sub-millisecond timing for every operation
• Browser overlay floating panel with live stats, draggable, collapsible
• Downloadable reports export JSON for analysis
• Zero impact overlay refreshes at ~2fps, minimal performance overhead

The Prepend Pattern

The monitor wraps store methods without modifying the original source:

const _origSet = store.set;
store.set = function(path, value) {
  const start = performance.now();
  const result = _origSet.call(this, path, value);
  const duration = performance.now() - start;
  recordEvent({ type: 'set', path, duration });
  return result;
};

Fully reversible via monitor.destroy().

License

MIT © Ajdin Imsirovic