Dedupe event listeners

Currently, each instead of Perimeter will register a mousemove and resize listener on window. While I don’t recommend having tons of these on a single page, it may be better for performance to register a single listener and iterate over each registered instance. So we need to:

• Determine if its more performant to use a single listener (maybe browsers can parallelize multiple listeners better?)
• Find a universal way for each instance to register with a global listener. The easiest solution may be to track a property on the global window but other suggestions welcome

[jnsdls]

I agree that it’s quite a bit of moving parts if you want to make it conditional and let people pass their own register & remove listeners functions. (I like the customizability aspect but I’m not sure if it’s necessary, we should just come up with the 90 percentile best solution and go with that.)

In my proposed solution we could handle the “global vs non-global” problem very simply by the way:

1. check if there is a MouseMoveProvider on the context
2. if yes -> subscribe || if no -> use own window.eventListener

and then if we wanted to go super deep we could still do the eventManager as a potential prop to (think history in React-Router)

EDIT: Also first we should experiment and prove that it’s actually beneficial to have 1 global listener rather than a bunch of listeners. (I’m confident it is, but need to test what impact it makes anyways.)

[jnsdls]

Feels like a good place to use a MouseMoveProvider component wrapping the application (like the Provider from react-redux) and providing a subscription method to move events on the context -> the Perimeter component on componentWillMount subscribes to the MouseMoveProvider via the exposed context method and unsubscribes on componentWillUnmount

I feel like that should work?

Sorry for the terrible formatting, I’m on my phone. Happy to submit a PR once I get to work that implements this.