Hook for getting updates on observable subscribers count change

[quixot1c]

Hi, I was wondering if there is a way to be notified when the amount of subscribers on an observable changes. Something like

subscribersChanged(observable, newCount => doSomething(newCount))

I implemented some sort of pipe equivalent to RxJS and I would like to have this functionality so I can unobserve the chain of observables in the pipe when the last observable isn't observed anymore.

[luwes]

It can be done I think but not in an easy way at the moment.
You would have to intercept the API of the Set that is assigned to data._observers.
Specifically the add() api. // data._observers.add(tracking);

sinuous/packages/sinuous/observable/src/observable.js

Line 120 in ece2c65

data._observers = new Set();

How I would try that is wrap the observable function:

function myObservable(value) {

	const o = observable(value);
	const MySet = o._observers; // watch out because underscore prefixes are mangled by Terser
	
	o._observers = MySetAPIIntercepted(MySet);

	return o;
}

[quixot1c]

I got it working with

function observabler<T>(value: T, onObserversChanged: (observers: Set<Function>) => void) {
	const o = observable<T>(value);
	//@ts-ignore
	const observers: Set<Function> = o.__o; // terser got to this ;(
	const addFn = observers.add.bind(observers);
	const deleteFn = observers.delete.bind(observers);
	
	observers.add = function(f: Function) {
		const added = addFn(f);
		onObserversChanged(observers);
		return added;
	}

	observers.delete = function(f: Function) {
		const success = deleteFn(f);
		onObserversChanged(observers);
		return success;
	}
	
	return o;
}

Note the __o that is needed because of the minification you mentioned. Now I'm only using this for a hobby project so it's not a very big deal but it would be cool if something like this could be added to the public API. Or just a way to get the observers of the observable via the public API.

[tsugabloom]

This is useful to me as well thanks for sharing that code! I have an element on the page for debugging which shows all active connections between observers and observables, but have been updating it manually by a button click 😅 This should let me auto update it (carefully without an infinite loop)