@everystate/perf v1.0.5

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().

Documentation

Full documentation available at everystate.dev.

Ecosystem

| Package | Description | License | |---|---|---| | @everystate/aliases | Ergonomic single-character and short-name DOM aliases for vanilla JS | MIT | | @everystate/angular | Angular adapter: usePath, useIntent, useWildcard, useAsync — bridges store to Angular signals | MIT | | @everystate/core | Path-based state management with wildcard subscriptions and async support | MIT | | @everystate/css | Reactive CSSOM engine: design tokens, typed validation, WCAG enforcement, all via path-based state | MIT | | @everystate/examples | Example applications and patterns | MIT | | @everystate/perf | Performance monitoring overlay | MIT | | @everystate/react | React hooks adapter: usePath, useIntent, useAsync hooks and EventStateProvider | MIT | | @everystate/renderer | Direct-binding reactive renderer: bind-*, set, each attributes. Zero build step | MIT | | @everystate/router | SPA routing as state | MIT | | @everystate/solid | Solid adapter: usePath, useIntent, useWildcard, useAsync — bridges store to Solid signals | MIT | | @everystate/test | Event-sequence testing for EveryState stores. Zero dependency. | MIT | | @everystate/types | Typed dot-path autocomplete for EveryState stores | MIT | | @everystate/view | State-driven view: DOMless resolve + surgical DOM projector. View tree as first-class state | MIT | | @everystate/vue | Vue 3 composables adapter: provideStore, usePath, useIntent, useWildcard, useAsync | MIT |

License

MIT © Ajdin Imsirovic