# Plan (YMMV)
1. Remove `ext.popups.renderer.mobileRenderer` and move `ext.popups.targets.mobileTarget` module (defined in `PopupsHooks#onResourceLoaderRegisterModules`).
2. Make EventLogging a hard dependency.
1. Since all logging is disabled by default, the complexity introduced by maintaining a soft dependency seems unnecessary.
3. Define and document the set of events that Hovercards should respond to.
4. Run QUnit tests in Node.js by repurposing [I00045bb9: Add isolated unit testing with npm run test:unit](https://gerrit.wikimedia.org/r/#/q/I00045bb914d101ff67398a891c9b42f387e5332c).
5. Move all DOM event handlers into a single file and add unit tests.
1. Each handler is a pure function that takes a DOM event and produces an object to be tracked with `mw.track`, e.g.
```lang=javascript
$( 'a' ).on(
'popups.mouseenter',
(event) => mw.track( 'ext.popups.event' onMouseEnter(event) )
);
```
6. Extract the API-related code from `ext.popups.renderer.article` to the `ext.popups.api` module.
1. Ensure that anchor `title` attribute manipulation and hook firing code is removed.
7. Extract the rendering code from the `ext.popups.renderer.article` module to the `ext.popups.renderer` module.
1. `mw.popups.render( data )` returns a DOM element ready to be inserted into the DOM.
2. The results of `mw.popups.render` may be cached in order to improve rendering performance but the caching behaviour should be distinct from the rendering behaviour.
8. Create the `ext.popups.controller` (or `.coordinator`) module, which contains the code responsible for maintaining the entire state of the system (which link is being interacted with, whether the link's title attribute should be scrubbed, timers, the render cache, the popup element and if it's visible or is being animated, etc.) by consuming `ext.popups.event` events and triggering actions when certain state transitions occur, i.e.
```lang=javascript
controller = createController( /* initialState = */ {} );
mw.trackSubscribe(
'ext.popups.event',
event => controller.onEvent( event )
);
```
## Considerations
1. Hovercards is event driven. We should consider using [RxJS](https://github.com/Reactive-Extensions/RxJS) to simplify a lot of the logic around subscribing to streams of DOM events and timers.
2. We should consider using [Redux](http://redux.js.org/) to implement `ext.popups.controller`.
1. It's 2kB.
2. It's predictable.
3. It has [a well-defined language that we can use to talk about modelling applications](http://redux.js.org/docs/basics/).
4. It's battle tested.