Improvements

[dy]

Hey @chrisguttandin thanks for your response. Following the offer, I'll just share some thoughts I had in mind regarding a very similar lib I imagined.

There's another lib btw rx-use - would be nice mentioning it as alternative, we need to support fellows.

Basically I imagined the following UI sources:

• [x] element attribute/attributes
• [ ] caret, pointer
• [ ] hotkey/keys
• [ ] scroll
• [ ] pinch, touch
• [ ] element classes
• [ ] element content
• [ ] cookie
• [ ] element focus state
• [ ] input values
• [ ] object property/properties accessor/observer
• [ ] location/history/hash
• [ ] local/session storage (can be observed from another frame)
• [ ] dark/light mode

That's more UI-focused and I'm not sure if that's good practice in general, but for some cases may be helpful.

Also - I had a bit of hard time using subscribable-things as direct ESM dependency − I ended up porting only a piece. Would it be useful to have a single dist ESM module, to allow easy manual include without tooling? Like this, but minified and without CJS legacy, to simply drop-in to any project in oldschool way but as ESM.

[chrisguttandin]

Thanks a lot @dy,

I created a separate issue for mentioning the alternatives.

Is there a way to observe element attribute changes or changes of the class list or even the content?

Maybe we can use this thread for discussing possible new functions and then create a new issue for each specific function which we want to add.

I know that I should modernize the way I publish packages. Do you have of a good example which I could use as a reference?

[dy]

Yeah, it's fairly straightforward to observe attribs via MutationObserver:

(observer = new MutationObserver(mutations => {...}))
.observe(targetNode,  { attributes: true, childList: false, subtree: false});

It would only need specific handler of mutations, and for content that's childList: true.

As for publishing packages - I personally decided to follow radically minimal style, without tooling or redundant dependencies as much as possible. Also dropped backwards-compat with CJS - lifetime isn't worth it - maintaining transient bundlers.

Examples I like: lukeed, developit. You can check templize as simple style I follow.

[chrisguttandin]

You mean adding a new function which wraps mutations() with some preconfigured options?

[dy]

I imagined something like

let attrValue = from(attr(element, 'attr-to-observe'))

That internally assigns MutationObserver to element.

[chrisguttandin]

I created #77 to add the attribute() function.

@dy Could you please take a look if you have a moment?

[chrisguttandin]

Now that the first item on the list is done, I wonder how we could implement observing the pointer? Would that be a global listener that emits the target of each event?

Or do you refer to the pointer within an input field?

[dy]

Some API examples are touch-pinch, touch-position. So it'd look like

import { pointer } from 'subscribable-things'

const subscribe = pointer(target=document)