Commit e6d4af24 authored by Miguel Rincon's avatar Miguel Rincon

Clarify usage of eventHubFactory

parent 356491bd
/** /**
* An event hub with a Vue instance like API * An event hub with a Vue instance like API
* *
* NOTE: There's an [issue open][4] to eventually remove this when some
* coupling in our codebase has been fixed.
*
* NOTE: This is a derivative work from [mitt][1] v1.2.0 which is licensed by * NOTE: This is a derivative work from [mitt][1] v1.2.0 which is licensed by
* [MIT License][2] © [Jason Miller][3] * [MIT License][2] © [Jason Miller][3]
* *
* [1]: https://github.com/developit/mitt * [1]: https://github.com/developit/mitt
* [2]: https://opensource.org/licenses/MIT * [2]: https://opensource.org/licenses/MIT
* [3]: https://jasonformat.com/ * [3]: https://jasonformat.com/
* [4]: https://gitlab.com/gitlab-org/gitlab/-/issues/223864
*/ */
class EventHub { class EventHub {
constructor() { constructor() {
...@@ -91,9 +87,6 @@ class EventHub { ...@@ -91,9 +87,6 @@ class EventHub {
* - $once * - $once
* - $emit * - $emit
* *
* Please note, this was once implemented with `mitt`, but since then has been reverted
* because of some API issues. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35074
*
* We'd like to shy away from using a full fledged Vue instance from this in the future. * We'd like to shy away from using a full fledged Vue instance from this in the future.
*/ */
export default () => { export default () => {
......
...@@ -37,32 +37,8 @@ If you need cross-component communication (between different Vue apps), then per ...@@ -37,32 +37,8 @@ If you need cross-component communication (between different Vue apps), then per
**What to use instead** **What to use instead**
Vue documentation recommends using the [mitt](https://github.com/developit/mitt) library. It's relatively small (200 bytes, compressed) and has a clear API: We have created a factory that you can use to instantiate a new [mitt](https://github.com/developit/mitt)-like event hub.
```javascript
import mitt from 'mitt'
const emitter = mitt()
// listen to an event
emitter.on('foo', e => console.log('foo', e) )
// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )
// fire an event
emitter.emit('foo', { a: 'b' })
// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo) // listen
emitter.off('foo', onFoo) // unlisten
```
**Event hub factory**
We have created a factory that you can use to instantiate a new mitt-based event hub.
This makes it easier to migrate existing event hubs to the new recommended approach, or This makes it easier to migrate existing event hubs to the new recommended approach, or
to create new ones. to create new ones.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment