@gluonjs/reactivity / packages/reactivity/src / EffectDebuggerEvent

Interface: EffectDebuggerEvent

Properties

effect

readonly effect: ReactiveEffectRunner

key?

readonly optional key?: unknown

newValue?

readonly optional newValue?: unknown

oldValue?

readonly optional oldValue?: unknown

target

readonly target: object

type

readonly type: TrackOperation | TriggerOperation

Example

Inspect which target, operation, and key caused a development effect to track or trigger:

import {
  batch,
  effect,
  nextTick,
  ref,
  stop,
  untracked,
  type EffectDebuggerEvent,
  type EffectOptions,
  type ReactiveEffectRunner,
  type TrackOperation,
  type TriggerOperation,
} from '@gluonjs/reactivity';

const count = ref(0);
const debugEvents: EffectDebuggerEvent[] = [];
const options: EffectOptions = {
  onTrack: (event) => debugEvents.push(event),
  onTrigger: (event) => debugEvents.push(event),
};
const runner: ReactiveEffectRunner<number> = effect(() => count.value, options);
batch(() => { count.value += 1; count.value += 1; });
const snapshot = untracked(() => count.value);
await nextTick();
stop(runner);
const track: TrackOperation = 'get';
const trigger: TriggerOperation = 'set';
console.log(snapshot, debugEvents.length, track, trigger);