diff --git a/app/assets/javascripts/helpers/event_hub_factory.js b/app/assets/javascripts/helpers/event_hub_factory.js index 62af67d3ef3..ddfae7e9de3 100644 --- a/app/assets/javascripts/helpers/event_hub_factory.js +++ b/app/assets/javascripts/helpers/event_hub_factory.js @@ -1,16 +1,12 @@ /** * 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 * [MIT License][2] © [Jason Miller][3] * * [1]: https://github.com/developit/mitt * [2]: https://opensource.org/licenses/MIT * [3]: https://jasonformat.com/ - * [4]: https://gitlab.com/gitlab-org/gitlab/-/issues/223864 */ class EventHub { constructor() { @@ -91,9 +87,6 @@ class EventHub { * - $once * - $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. */ export default () => { diff --git a/doc/development/fe_guide/vue3_migration.md b/doc/development/fe_guide/vue3_migration.md index 2b783eb21b7..6e994d5e95d 100644 --- a/doc/development/fe_guide/vue3_migration.md +++ b/doc/development/fe_guide/vue3_migration.md @@ -37,32 +37,8 @@ If you need cross-component communication (between different Vue apps), then per **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 to create new ones.