Support auto-disposing nested effects

.changeset/heavy-turkeys-relate.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals-core": minor
+---
+
+Add support for auto-disposing nested effects

packages/core/src/index.ts

@@ -58,8 +58,8 @@ function endBatch() {
 		batchIteration++;
 
 		while (effect !== undefined) {
-			const next: Effect | undefined = effect._nextEffect;
-			effect._nextEffect = undefined;
+			const next: Effect | undefined = effect._nextBatchedEffect;
+			effect._nextBatchedEffect = undefined;
 			effect._flags &= ~NOTIFIED;
 
 			if (!(effect._flags & DISPOSED)) {
@@ -313,13 +313,27 @@ function returnComputed<T>(computed: Computed<T>): T {
 	return computed._value as T;
 }
 
+function disposeNestedEffects(context: Computed | Effect) {
+	let effect = context._effects;
+	if (effect !== undefined) {
+		do {
+			effect._dispose();
+			effect = effect._nextNestedEffect;
+		} while (effect !== undefined);
+		context._effects = undefined;
+	}
+}
+
 class Computed<T = any> extends Signal<T> {
 	/** @internal */
 	_compute: () => T;
 
 	/** @internal */
 	_sources?: Node = undefined;
 
+	/** @internal */
+	_effects?: Effect = undefined;
+
 	/** @internal */
 	_globalVersion = globalVersion - 1;
 
@@ -413,6 +427,8 @@ class Computed<T = any> extends Signal<T> {
 			}
 		}
 
+		disposeNestedEffects(this);
+
 		const prevValue = this._value;
 		const prevFlags = this._flags;
 		const prevContext = evalContext;
@@ -463,8 +479,10 @@ function endEffect(this: Effect, prevContext?: Computed | Effect) {
 
 class Effect {
 	_compute: () => void;
-	_sources?: Node = undefined;
-	_nextEffect?: Effect = undefined;
+	_sources?: Node;
+	_effects?: Effect;
+	_nextNestedEffect?: Effect;
+	_nextBatchedEffect?: Effect;
 	_flags = SHOULD_SUBSCRIBE;
 
 	constructor(compute: () => void) {
@@ -486,10 +504,14 @@ class Effect {
 		}
 		this._flags |= RUNNING;
 		this._flags &= ~DISPOSED;
+		disposeNestedEffects(this);
 
 		/*@__INLINE__**/ startBatch();
 		const prevContext = evalContext;
-
+		if (prevContext !== undefined) {
+			this._nextNestedEffect = prevContext._effects;
+			prevContext._effects = this;
+		}
 		evalContext = this;
 
 		prepareSources(this);
@@ -499,7 +521,7 @@ class Effect {
 	_notify() {
 		if (!(this._flags & NOTIFIED)) {
 			this._flags |= NOTIFIED;
-			this._nextEffect = batchedEffect;
+			this._nextBatchedEffect = batchedEffect;
 			batchedEffect = this;
 		}
 	}
@@ -511,6 +533,7 @@ class Effect {
 		for (let node = this._sources; node !== undefined; node = node._nextSource) {
 			node._source._unsubscribe(node);
 		}
+		disposeNestedEffects(this);
 		this._sources = undefined;
 		this._flags |= DISPOSED;
 	}

packages/core/test/signal.test.tsx

@@ -161,6 +161,74 @@ describe("effect()", () => {
 		expect(fn).to.throw(/Cycle detected/);
 	});
 
+	it("should automatically dispose nested effects on re-evaluation", () => {
+		const a = signal(0);
+		const b = signal(0);
+		const spyInner = sinon.spy(() => a.value + b.value);
+		const spyOuter = sinon.spy(() => {
+			a.value;
+			effect(spyInner);
+		});
+		effect(spyOuter);
+
+		expect(spyOuter).to.be.calledOnce;
+		expect(spyInner).to.be.calledOnce;
+		spyOuter.resetHistory();
+		spyInner.resetHistory();
+
+		a.value = 1;
+		expect(spyOuter).to.be.calledOnce;
+		expect(spyInner).to.be.calledOnce;
+		spyOuter.resetHistory();
+		spyInner.resetHistory();
+
+		b.value = 2;
+		expect(spyOuter).to.not.be.called;
+		expect(spyInner).to.be.calledOnce;
+	});
+
+	it("should automatically dispose nested effects on disposal", () => {
+		const a = signal(0);
+		const b = signal(0);
+		const spyInner = sinon.spy(() => a.value + b.value);
+		const spyOuter = sinon.spy(() => {
+			a.value;
+			effect(spyInner);
+		});
+		const dispose = effect(spyOuter);
+
+		expect(spyOuter).to.be.calledOnce;
+		expect(spyInner).to.be.calledOnce;
+		spyOuter.resetHistory();
+		spyInner.resetHistory();
+
+		dispose();
+
+		a.value = 1;
+		expect(spyOuter).not.to.be.called;
+		expect(spyInner).not.to.be.called;
+	});
+
+	it("should keep nested computed signals active even after enclosing effect", () => {
+		const a = signal(0);
+		const spy = sinon.spy(() => a.value);
+
+		let c!: Signal;
+		const dispose = effect(() => {
+			c = computed(() => {
+				a.value;
+				effect(spy);
+			});
+		});
+		dispose();
+		expect(spy).not.to.be.called;
+
+		c.value;
+		expect(spy).to.be.calledOnce;
+		a.value = 1;
+		expect(spy).to.be.calledTwice;
+	});
+
 	it("should allow disposing the effect multiple times", () => {
 		const dispose = effect(() => undefined);
 		dispose();
@@ -422,6 +490,32 @@ describe("computed()", () => {
 		expect(() => a.value).to.throw(/Cycle detected/);
 	});
 
+	it("should automatically dispose nested effects on re-evaluation", () => {
+		const a = signal(0);
+		const b = signal(0);
+		const spyInner = sinon.spy(() => a.value + b.value);
+		const spyOuter = sinon.spy(() => {
+			a.value;
+			effect(spyInner);
+		});
+		const c = computed(spyOuter);
+		c.value;
+		expect(spyOuter).to.be.calledOnce;
+		expect(spyInner).to.be.calledOnce;
+		spyOuter.resetHistory();
+		spyInner.resetHistory();
+
+		a.value = 1;
+		expect(spyOuter).not.to.be.called;
+		expect(spyInner).to.be.calledOnce;
+		spyOuter.resetHistory();
+		spyInner.resetHistory();
+
+		c.value;
+		expect(spyOuter).to.be.calledOnce;
+		expect(spyInner).to.be.calledOnce;
+	});
+
 	it("should not allow a computed signal to become a direct dependency of itself", () => {
 		const spy = sinon.spy(() => {
 			try {