Best practice for DOM side effects
See original GitHub issueWhat is the recommended way of handling side effects for the DOM?
From what I can see there are two different types of DOM side-effects:
- Event related:
preventDefault(), stopPropagation(), stopImmediatePropagation(), event.dataTransfer, event.clipboardData
just to name a few - Methods of dom elements:
focus(), blur(), click(), dispatchEvent()
From my understanding, all these side-effects should happen inside a driver. Is there any official (or unofficial) driver that handles any of these side effects? In absence of such a driver, I’m currently putting all my side effects directly inside my component intents, eg. DOM.select('.x').events('click').do(event => event.preventDefault())
. This feels a bit hackish.
Also, assuming there would be a driver for every side-effect, it seems a bit tedious and error-prone to have to forward and merge all these “side-effect-sinks” up from each and every component. This also means that parent-components needs to be aware of all the sinks that needs to be forwarded up the chain. Or is there perhaps a better way?
Issue Analytics
- State:
- Created 8 years ago
- Reactions:2
- Comments:23 (14 by maintainers)
Top GitHub Comments
@whitecolor but then you would have to have
DOM.preventDefault()
cause the side effect so it would have no benefit over.do(event => event.preventDefault())
@staltz I think the link you provided (https://github.com/cyclejs/examples/blob/master/autocomplete-search/src/main.js#L21) actually highlights the problem. In the example a very specific driver is created, one that not only preventDefault() but also set focus if the event type is ‘blur’. If there was an official solution to handle this, hacks like this wouldn’t be necessary.
Also, I think this forces everyone to create their own drivers for handling a very common use case. Eventually we will have projects with side effects directly in their intents (like I’m currently doing 👎) or lots of different implementations of an event-driver doing pretty much the same thing which is also not very nice. I would expect this to already be solved by the framework, perhaps by
cycle-dom
?