feat: initialize background events (#280)

* Background Events POC

* Storage should not extend EventEmitter

* Update BackgroundEvents methods generic

* Do not emit storage event (for now)

src/background/container.ts

@@ -9,10 +9,12 @@ import {
 } from './services'
 import { createLogger, Logger } from '@/shared/logger'
 import { LOG_LEVEL } from '@/shared/defines'
+import { EventsService } from './services/events'
 
 interface Cradle {
   logger: Logger
   browser: Browser
+  events: EventsService
   storage: StorageService
   openPaymentsService: OpenPaymentsService
   monetizationService: MonetizationService
@@ -30,6 +32,7 @@ export const configureContainer = () => {
   container.register({
     logger: asValue(logger),
     browser: asValue(browser),
+    events: asClass(EventsService).singleton(),
     storage: asClass(StorageService)
       .singleton()
       .inject(() => ({

src/background/services/background.ts

@@ -120,9 +120,7 @@ export class Background {
 
             case PopupToBackgroundAction.UPDATE_RATE_OF_PAY:
               return success(
-                await this.storage.set({
-                  rateOfPay: message.payload.rateOfPay
-                })
+                await this.storage.updateRate(message.payload.rateOfPay)
               )
 
             case ContentToBackgroundAction.IS_TAB_MONETIZED:

src/background/services/events.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from 'events'
+
+interface BackgroundEvents {
+  'storage.rate_of_pay_update': {
+    rate: string
+  }
+}
+
+export class EventsService extends EventEmitter {
+  constructor() {
+    super()
+  }
+
+  on<TEvent extends keyof BackgroundEvents>(
+    eventName: TEvent,
+    listener: (param: BackgroundEvents[TEvent]) => void
+  ): this {
+    return super.on(eventName, listener)
+  }
+
+  once<TEvent extends keyof BackgroundEvents>(
+    eventName: TEvent,
+    listener: (param: BackgroundEvents[TEvent]) => void
+  ): this {
+    return super.once(eventName, listener)
+  }
+
+  emit<TEvent extends keyof BackgroundEvents>(
+    eventName: TEvent,
+    ...rest: undefined extends BackgroundEvents[TEvent]
+      ? [param?: BackgroundEvents[TEvent]]
+      : [param: BackgroundEvents[TEvent]]
+  ): boolean {
+    return super.emit(eventName, ...rest)
+  }
+
+  /**
+   * Use `on` instead of `addListener`
+   * @deprecated
+   */
+  addListener(): this {
+    throw new Error('Use `on` instead of `addListner`.')
+  }
+
+  /**
+   * Use `off` instead of `removeListener`
+   * @deprecated
+   */
+  removeListener(): this {
+    throw new Error('Use `off` instead of `removeListener`.')
+  }
+}

src/background/services/storage.ts

@@ -1,8 +1,8 @@
 import { Logger } from '@/shared/logger'
 import type { PopupStore, Storage, StorageKey } from '@/shared/types'
-import EventEmitter from 'events'
 import { type Browser } from 'webextension-polyfill'
 import { getCurrentActiveTab } from '../utils'
+import { EventsService } from './events'
 
 const defaultStorage = {
   connected: false,
@@ -21,12 +21,11 @@ const defaultStorage = {
 // Eg:
 // - rate of pay - we should recalculate the amount for every payment session
 // - enabling/disabling WM
-export class StorageService extends EventEmitter {
+export class StorageService {
   constructor(
     private browser: Browser,
-    private logger: Logger
+    private events: EventsService,
   ) {
-    super()
   }
 
   async get<TKey extends StorageKey>(
@@ -106,4 +105,8 @@ export class StorageService extends EventEmitter {
 
     return false
   }
+
+  async updateRate(rate: string): Promise<void> {
+    await this.set({ rateOfPay: rate })
+  }
 }