Wrap `selector-observer` to add `AbortSignal`, better types, etc

I recently mentioned this in a comment but I can’t find it anymore. @cheap-glitch also mentioned it in https://github.com/refined-github/refined-github/pull/5726#pullrequestreview-1019332862

Here’s part of what I had in mind for a such a wrapper:

• accept signal
• use https://github.com/g-plane/typed-query-selector to automatically get types instead of using constructor
• better API (observeElement('a', cb) instead of observe('a',{add: cb}))
• more I can’t remember 🥲

[fregante]

That’s neat but if there are hundreds of elements, does it impact speed?

This is by far the most efficient, it has 3 parts:

1. Matching CSS selectors “live” (one of the most optimized paths in the browser)
2. animationend is triggered even with an empty @keyframes lol {}, which means it doesn’t trigger layout/render operations
3. Event bubbling and listening is far more efficient than MutationObserver

The best part is that the animation name (keyframes) is part of the event itself, so all we need is something like:

@keyframes collapsible-element-button {}
md-ref {animation: 1ms collapsible-element-button}

const tracked = new WeakMap()
document.addEventListener('animationstart', {target, animationName} => {
	if (animationName !== 'collapsible-element-button' || tracked.has(target)) {
		return
	}
	tracked.add(target);
	attachElement({anchor: target, after: () => <CollapsibleButton/>)})
});

If it really is this simple and efficient, Refined GitHub (and other extensions) could become an order or magnitude easier to manage. Imagine making every feature “declarative” this way, no more wonky listeners.

We can start by adding the CSS to our CSS files for now and maybe later wrap it all in a helper that generates the CSS rules as well as the listener. The only drawback of a dynamic CSS generator is that the CSS would need to be inserted as a literal style tag in the document, but that’s not something we need to deal with right now.

[kidonng]

I put my code into a package 👉 https://github.com/kidonng/animation-observer

It’s very simple but should do the work™️ you are welcome to try.