anthonyshort / deku

Render interfaces using pure functions and virtual DOM
https://github.com/anthonyshort/deku/tree/master/docs
3.41k stars 130 forks source link

Idea for window/document listeners, and possibly context/state #408

Open ashaffer opened 8 years ago

ashaffer commented 8 years ago

I was thinking about binding listeners to window/document/body, which right now kind of sucks. You have to wire that up outside of your component system, track the handler yourself, remove it when you're destroyed, etc. It's a hassle, and as far as I can tell, there's no reason we can't just re-use the normal declarative syntax for these as well, by leveraging special components, e.g.:

import {Body} from 'deku'

function Dropdown () {
  return (
    <Body onClick={close}>
      <div>{children}</div>
    </Body>
  )
}

Similarly with other types of events. popstate, resize, etc. I've implemented these ideas in vdux like this for an idea of how this could work. This cleans up code that needs to do these things enormously, and maybe most importantly decouples them from effect management systems, which makes components more portable and reusable. Not to mention that it just generally limits the number of abstractions to be learned and considered.

I think you can also use this pattern for other types of effectful things, like context/state (similarly to react-redux's Provide component).

Thoughts?