From: =?UTF-8?q?Jaras=C5=82a=C5=AD=20Viktor=C4=8Dyk?= <ugzuzg@gmail.com>
To: ~avery/public-inbox@lists.sr.ht
Cc: =?UTF-8?q?Jaras=C5=82a=C5=AD=20Viktor=C4=8Dyk?= <ugzuzg@gmail.com>
Subject: [PATCH crankshaft v2 3/3] Add types for events and callbacks
Date: Thu,  1 Sep 2022 18:57:45 +0200
Message-Id: <20220901165745.197501-3-ugzuzg@gmail.com>
In-Reply-To: <20220901165745.197501-1-ugzuzg@gmail.com>
References: <20220901165745.197501-1-ugzuzg@gmail.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit

smm.addEventListener can now automatically determine the event arg type based on the string supplied to it.
---
 .../menu-manager/deck/menu-injector-deck.tsx  |  12 +-
 injected/src/smm.ts                           | 124 ++++++++++--------
 injected/src/tab-observer.ts                  |   7 +-
 3 files changed, 82 insertions(+), 61 deletions(-)

diff --git a/injected/src/menu-manager/deck/menu-injector-deck.tsx b/injected/src/menu-manager/deck/menu-injector-deck.tsx
index f8a82a8..0cdef73 100644
--- a/injected/src/menu-manager/deck/menu-injector-deck.tsx
+++ b/injected/src/menu-manager/deck/menu-injector-deck.tsx
@@ -1,7 +1,7 @@
 import { dcCreateElement } from '../../dom-chef';
 import { GamepadHandler } from '../../gamepad';
 import { DECK_SELECTORS } from '../../selectors';
-import { SMM } from '../../smm';
+import { eventTypeSwitchToLocation, SMM } from '../../smm';
 import { deleteAll } from '../../util';
 import { MenuInjector, MenuItem, MenuManager } from '../menu-manager';
 import styles from './menu-injector-deck.css';
@@ -89,8 +89,12 @@ export class MenuInjectorDeck implements MenuInjector {
   }
 
   private listenToNavigationChanges() {
-    this.smm.addEventListener('switchToPlugins', () => {
-      this.openPluginsPage();
+    this.smm.addEventListener(eventTypeSwitchToLocation, (e) => {
+      if (e.detail.pathname === '/routes/blank/cs-plugins') {
+        this.openPluginsPage();
+      } else {
+        this.closeActivePage();
+      }
     });
   }
 
@@ -122,6 +126,8 @@ export class MenuInjectorDeck implements MenuInjector {
   }
 
   private async closePluginsPage(forward = false) {
+    if (!this.pageContainer.isConnected) return;
+
     this.activePluginId = undefined;
     this.activePluginEl = undefined;
     // Clear active menu item
diff --git a/injected/src/smm.ts b/injected/src/smm.ts
index 2689405..32d255a 100644
--- a/injected/src/smm.ts
+++ b/injected/src/smm.ts
@@ -19,52 +19,28 @@ import { info } from './util';
 
 type PluginId = string;
 
-type AddEventListenerArgs = Parameters<EventTarget['addEventListener']>;
-
-// TODO: there's probably a better way to do these EventTarget types
-
-type SMMEventType =
-  | typeof eventTypeSwitchToUnknownPage
-  | typeof eventTypeSwitchToHome
-  | typeof eventTypeSwitchToCollections
-  | typeof eventTypeSwitchToAppDetails
-  | typeof eventTypeSwitchToAppProperties
-  | typeof eventTypeSwitchToPlugins
-  | typeof eventTypeLockScreenOpened
-  | typeof eventTypeLockScreenClosed;
-
-type SMMEvent =
-  | EventSwitchToUnknownPage
-  | EventSwitchToHome
-  | EventSwitchToCollections
-  | EventSwitchToAppDetails
-  | EventSwitchToAppProperties
-  | EventSwitchToPlugins
-  | EventLockScreenOpened
-  | EventLockScreenClosed;
-
-const eventTypeSwitchToUnknownPage = 'switchToUnknownPage' as const;
+export const eventTypeSwitchToUnknownPage = 'switchToUnknownPage' as const;
 class EventSwitchToUnknownPage extends CustomEvent<void> {
   constructor() {
     super(eventTypeSwitchToUnknownPage);
   }
 }
 
-const eventTypeSwitchToHome = 'switchToHome' as const;
+export const eventTypeSwitchToHome = 'switchToHome' as const;
 class EventSwitchToHome extends CustomEvent<void> {
   constructor() {
     super(eventTypeSwitchToHome);
   }
 }
 
-const eventTypeSwitchToCollections = 'switchToCollections' as const;
+export const eventTypeSwitchToCollections = 'switchToCollections' as const;
 class EventSwitchToCollections extends CustomEvent<void> {
   constructor() {
     super(eventTypeSwitchToCollections);
   }
 }
 
-const eventTypeSwitchToAppDetails = 'switchToAppDetails' as const;
+export const eventTypeSwitchToAppDetails = 'switchToAppDetails' as const;
 type eventDetailsSwitchToAppDetails = { appId: string; appName: string };
 class EventSwitchToAppDetails extends CustomEvent<eventDetailsSwitchToAppDetails> {
   constructor(detail: eventDetailsSwitchToAppDetails) {
@@ -72,34 +48,79 @@ class EventSwitchToAppDetails extends CustomEvent<eventDetailsSwitchToAppDetails
   }
 }
 
-const eventTypeSwitchToAppProperties = 'switchToAppProperties' as const;
+export const eventTypeSwitchToAppProperties = 'switchToAppProperties' as const;
 class EventSwitchToAppProperties extends CustomEvent<AppPropsApp> {
   constructor(detail: AppPropsApp) {
     super(eventTypeSwitchToAppProperties, { detail });
   }
 }
 
-const eventTypeSwitchToPlugins = 'switchToPlugins' as const;
-class EventSwitchToPlugins extends CustomEvent<void> {
-  constructor() {
-    super(eventTypeSwitchToPlugins);
+export const eventTypeSwitchToLocation = 'switchToLocation' as const;
+type eventDetailsSwitchToLocation = Location;
+class EventSwitchToLocation extends CustomEvent<eventDetailsSwitchToLocation> {
+  constructor(detail: eventDetailsSwitchToLocation) {
+    super(eventTypeSwitchToLocation, { detail });
   }
 }
 
-const eventTypeLockScreenOpened = 'lockScreenOpened' as const;
+export const eventTypeLockScreenOpened = 'lockScreenOpened' as const;
 class EventLockScreenOpened extends CustomEvent<void> {
   constructor() {
     super(eventTypeLockScreenOpened);
   }
 }
 
-const eventTypeLockScreenClosed = 'lockScreenClosed' as const;
+export const eventTypeLockScreenClosed = 'lockScreenClosed' as const;
 class EventLockScreenClosed extends CustomEvent<void> {
   constructor() {
     super(eventTypeLockScreenClosed);
   }
 }
 
+interface EventListenerObjectFor<T extends Event> {
+  handleEvent(evt: T): void;
+}
+interface EventListenerFor<T extends Event> {
+  (evt: T): void;
+}
+type EventListenerOrEventListenerObjectFor<T extends Event> =
+  | EventListenerFor<T>
+  | EventListenerObjectFor<T>;
+
+type SMMEventGroup<T extends string, E extends Event> = {
+  type: T;
+  event: E;
+};
+
+type SMMEvent =
+  | SMMEventGroup<typeof eventTypeSwitchToUnknownPage, EventSwitchToUnknownPage>
+  | SMMEventGroup<typeof eventTypeSwitchToHome, EventSwitchToHome>
+  | SMMEventGroup<typeof eventTypeSwitchToCollections, EventSwitchToCollections>
+  | SMMEventGroup<typeof eventTypeSwitchToAppDetails, EventSwitchToAppDetails>
+  | SMMEventGroup<
+      typeof eventTypeSwitchToAppProperties,
+      EventSwitchToAppProperties
+    >
+  | SMMEventGroup<typeof eventTypeSwitchToLocation, EventSwitchToLocation>
+  | SMMEventGroup<typeof eventTypeLockScreenOpened, EventLockScreenOpened>
+  | SMMEventGroup<typeof eventTypeLockScreenClosed, EventLockScreenClosed>;
+
+type MapToCallbacks<U extends SMMEvent> = U extends any
+  ? {
+      type: U['type'];
+      callback: EventListenerOrEventListenerObjectFor<U['event']> | null;
+      options: Parameters<EventTarget['addEventListener']>[2];
+    }
+  : never;
+type SMMEventCallback = MapToCallbacks<SMMEvent>;
+
+type SMMCallbackMap = {
+  [P in SMMEventCallback['type']]: Extract<
+    SMMEventCallback,
+    { type: P }
+  >['callback'];
+};
+
 /**
  * @public
  */
@@ -141,14 +162,7 @@ export class SMM extends EventTarget {
   // that plugin.
   private currentPlugin?: string;
   // Events attached by plugins
-  private attachedEvents: Record<
-    PluginId,
-    {
-      type: AddEventListenerArgs[0];
-      callback: AddEventListenerArgs[1];
-      options: AddEventListenerArgs[2];
-    }[]
-  >;
+  private attachedEvents: Record<PluginId, SMMEventCallback[]>;
 
   constructor(entry: Entry) {
     super();
@@ -287,10 +301,10 @@ export class SMM extends EventTarget {
   /**
    * @internal
    */
-  switchToPlugins() {
-    info('Switched to plugins');
+  switchToLocation(loc: Location) {
+    info('Switched to location');
 
-    this.dispatchEvent(new EventSwitchToPlugins());
+    this.dispatchEvent(new EventSwitchToLocation(loc));
   }
 
   /**
@@ -383,15 +397,15 @@ export class SMM extends EventTarget {
 
     if (this.attachedEvents[pluginId]) {
       for (const { type, callback, options } of this.attachedEvents[pluginId]) {
-        this.removeEventListener(type, callback, options);
+        this.removeEventListener(type, callback as EventListener, options);
       }
       delete this.attachedEvents[pluginId];
     }
   }
 
-  addEventListener(
-    type: SMMEventType,
-    callback: EventListenerOrEventListenerObject | null,
+  addEventListener<K extends keyof SMMCallbackMap>(
+    type: K,
+    callback: SMMCallbackMap[K],
     options?: boolean | AddEventListenerOptions
   ): void {
     if (this.currentPlugin) {
@@ -399,13 +413,17 @@ export class SMM extends EventTarget {
         this.attachedEvents[this.currentPlugin] = [];
       }
 
-      this.attachedEvents[this.currentPlugin].push({ type, callback, options });
+      this.attachedEvents[this.currentPlugin].push({
+        type,
+        callback,
+        options,
+      } as SMMEventCallback);
     }
 
-    super.addEventListener(type, callback, options);
+    super.addEventListener(type, callback as EventListener, options);
   }
 
-  dispatchEvent(event: SMMEvent): boolean {
+  dispatchEvent(event: SMMEvent['event']): boolean {
     return super.dispatchEvent(event);
   }
 
diff --git a/injected/src/tab-observer.ts b/injected/src/tab-observer.ts
index d8ea9ee..d9bfad9 100644
--- a/injected/src/tab-observer.ts
+++ b/injected/src/tab-observer.ts
@@ -14,6 +14,8 @@ export const createTabObserver = (smm: SMM, mainLibraryEl: HTMLElement) => {
   }
 
   const observer = new MutationObserver((_mutationsList) => {
+    smm.switchToLocation({ ...location });
+
     if (window.smmUIMode === 'deck') {
       if (document.querySelector(DECK_SELECTORS.lockScreenContainer)) {
         if (!smm.onLockScreen) {
@@ -81,11 +83,6 @@ export const createTabObserver = (smm: SMM, mainLibraryEl: HTMLElement) => {
       }
     }
 
-    if (location.pathname === '/routes/blank/cs-plugins') {
-      smm.switchToPlugins();
-      return;
-    }
-
     smm.switchToUnknownPage();
   });
 
-- 
2.37.3