Add watch operator

src/index.ts

@@ -1,4 +1,5 @@
 export * from './defs/index.js';
 export * from './manager.js';
+export * from './operators/index.js';
 export * from './refs/index.js';
 export * from './stores/index.js';

src/operators/index.ts

@@ -0,0 +1 @@
+export * from './watch.js';

src/operators/watch.ts

@@ -0,0 +1,20 @@
+import { OffFn } from '@jujulego/event-tree';
+
+import { Ref } from '../refs/index.js';
+
+// Types
+export type WatchCleanUp = () => void;
+export type WatchFn<D> = (data: D) => WatchCleanUp | undefined;
+
+// Operator
+export function watch$<D>(ref: Ref<D>, fn: WatchFn<D>): OffFn {
+  let cleanUp: WatchCleanUp | undefined;
+
+  return ref.subscribe((data: D) => {
+    if (cleanUp) {
+      cleanUp();
+    }
+
+    cleanUp = fn(data);
+  });
+}

tests/operators/watch.test.ts

@@ -0,0 +1,42 @@
+import { vi } from 'vitest';
+
+import { var$, watch$ } from '@/src/index.js';
+
+// Tests
+describe('watch$', () => {
+  it('should call fn when the reference changes', () => {
+    const ref = var$<number>();
+    const fn = vi.fn();
+
+    watch$(ref, fn);
+    ref.mutate(42);
+
+    expect(fn).toHaveBeenCalledWith(42);
+  });
+
+  it('should call cb before next fn call', () => {
+    const ref = var$<number>();
+    const cb = vi.fn();
+
+    watch$(ref, () => cb);
+    ref.mutate(41);
+
+    expect(cb).not.toHaveBeenCalled();
+
+    ref.mutate(42);
+
+    expect(cb).toHaveBeenCalled();
+  });
+
+  it('should not call fn if off has been called', () => {
+    const ref = var$<number>();
+    const fn = vi.fn();
+
+    const off = watch$(ref, fn);
+    off();
+
+    ref.mutate(42);
+
+    expect(fn).not.toHaveBeenCalled();
+  });
+});