Merge branch 'migrate-ide-event-bus' into 'master'

Migrate IDE event bus to mitt

Closes #216021

See merge request gitlab-org/gitlab!30639

app/assets/javascripts/helpers/event_hub_factory.js

+import mitt from 'mitt';
+
+export default () => {
+  const emitter = mitt();
+
+  emitter.$on = emitter.on;
+  emitter.$off = emitter.off;
+  emitter.$emit = emitter.emit;
+
+  return emitter;
+};

app/assets/javascripts/ide/eventhub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

doc/development/fe_guide/vue3_migration.md

@@ -12,11 +12,11 @@ Filters [are removed](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015
 
 Component's computed properties / methods or external helpers.
 
-## Event bus
+## Event hub
 
 **Why?**
 
-`$on` and `$off` methods [are removed](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md) from the Vue instance, so in Vue 3 it can't be used to create an event bus.
+`$on` and `$off` methods [are removed](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md) from the Vue instance, so in Vue 3 it can't be used to create an event hub.
 
 **What to use instead**
 
@@ -43,6 +43,21 @@ emitter.on('foo', onFoo)   // listen
 emitter.off('foo', onFoo)  // unlisten
 ```
 
+**Event hub factory**
+
+To make it easier for you to migrate existing event hubs to the new recommended approach, or simply
+to create new ones, we have created a factory that you can use to instantiate a new mitt-based
+event hub.
+
+```javascript
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
+```
+
+Event hubs created with the factory expose the same methods as Vue 2 event hubs (`$on`, `$off` and
+`$emit`), making them backward compatible with our previous approach.
+
 ## <template functional>
 
 **Why?**

package.json

@@ -100,6 +100,7 @@
     "lodash": "^4.17.15",
     "marked": "^0.3.12",
     "mermaid": "^8.4.8",
+    "mitt": "^1.2.0",
     "monaco-editor": "^0.18.1",
     "monaco-editor-webpack-plugin": "^1.7.0",
     "mousetrap": "^1.4.6",
@@ -217,4 +218,4 @@
     "node": ">=10.13.0",
     "yarn": "^1.10.0"
   }
-}
\ No newline at end of file
+}

spec/frontend/helpers/event_hub_factory_spec.js

+import createEventHub from '~/helpers/event_hub_factory';
+import mitt from 'mitt';
+
+jest.mock('mitt');
+
+mitt.mockReturnValue({
+  on: () => {},
+  off: () => {},
+  emit: () => {},
+});
+
+describe('event bus factory', () => {
+  let eventBus;
+
+  beforeEach(() => {
+    eventBus = createEventHub();
+  });
+
+  afterEach(() => {
+    eventBus = null;
+  });
+
+  it('creates an emitter', () => {
+    expect(mitt).toHaveBeenCalled();
+  });
+
+  it.each`
+    method
+    ${'on'}
+    ${'off'}
+    ${'emit'}
+  `('binds $$method to $method ', ({ method }) => {
+    expect(typeof eventBus[method]).toBe('function');
+    expect(eventBus[method]).toBe(eventBus[`$${method}`]);
+  });
+});

yarn.lock

@@ -7969,6 +7969,11 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
+mitt@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
+  integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"