Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

I recently mentioned this in a comment but I can’t find it anymore. @cheap-glitch also mentioned it in

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:3
  • Comments:17 (17 by maintainers)

github_iconTop GitHub Comments

fregantecommented, Jul 31, 2022

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)) {
	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.

kidonngcommented, Aug 4, 2022

I put my code into a package 👉

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

josh/selector-observer: Allows you to monitor DOM ... - GitHub
selector -observer allows you to monitor DOM elements that match a CSS selector. Rather than imperatively querying the DOM, register an observer for...
Read more >
Fregante - Twitter
I'd really benefit from having a React and HTML expert one chat away for "best practice" questions. I can't really trust SO answers...
Read more >
Can I use... Support tables for HTML5, CSS3, etc - CanIUse
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Read more >
AbortSignal - Web APIs - MDN Web Docs - Mozilla
The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort ......
Read more >
Web Platform Design Principles - W3C
Abstract. This document contains a set of design principles to be used when designing web platform technologies. These principles have been ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found