feat(plugin): add menu and overlay patching api

fix(modals): fix ModalRoot again

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.18.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.3...v3.18.4) (2022-12-16)
+
+
+### Bug Fixes
+
+* **modals:** fix ModalRoot again ([fd94842](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/fd94842647e51dd9a104e170e0c5ee2bebce12d6))
+
+## [3.18.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.2...v3.18.3) (2022-12-12)
+
+
+### Bug Fixes
+
+* **Router:** update Router interface to SteamOS3.4 and add Navigation ([#52](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/52)) ([f0379e5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f0379e5d19279863b571e66918bc9107efedb612))
+
 ## [3.18.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.1...v3.18.2) (2022-12-11)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.18.2",
+  "version": "3.18.4",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/deck-components/Marquee.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, FC } from 'react';
+import { CSSProperties, FC, ReactNode } from 'react';
 
 import { findModuleChild } from '../webpack';
 
@@ -12,7 +12,7 @@ export interface MarqueeProps {
   resetOnPause?: boolean;
   style?: CSSProperties;
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const Marquee: FC<MarqueeProps> = findModuleChild((m) => {

src/deck-components/Modal.tsx

@@ -38,7 +38,7 @@ const showModalRaw:
       unknown1?: unknown,
       hideActions?: { bHideActions?: boolean },
       modalManager?: unknown,
-    ) => Promise<ShowModalResult>)
+    ) => ShowModalResult)
   | void = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
   for (let prop in m) {
@@ -52,16 +52,15 @@ const showModalRaw:
   }
 });
 
-const oldShowModalRaw:
+const oldShowModalRaw: ((modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => ShowModalResult) | void =
-  | ((modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => Promise<ShowModalResult>)
+  findModuleChild((m) => {
-  | void = findModuleChild((m) => {
+    if (typeof m !== 'object') return undefined;
-  if (typeof m !== 'object') return undefined;
+    for (let prop in m) {
-  for (let prop in m) {
+      if (typeof m[prop] === 'function' && m[prop].toString().includes('bHideMainWindowForPopouts:!0')) {
-    if (typeof m[prop] === 'function' && m[prop].toString().includes('bHideMainWindowForPopouts:!0')) {
+        return m[prop];
-      return m[prop];
+      }
     }
-  }
+  });
-});
 
 export const showModal = (
   modal: ReactNode,
@@ -70,7 +69,7 @@ export const showModal = (
     strTitle: 'Decky Dialog',
     bHideMainWindowForPopouts: false,
   },
-): Promise<ShowModalResult> => {
+): ShowModalResult => {
   if (showModalRaw) {
     return showModalRaw(modal, parent || findSP(), props.strTitle, props, undefined, {
       bHideActions: props.bHideActionIcons,
@@ -118,13 +117,13 @@ export const ConfirmModal = findModuleChild((m) => {
   }
 }) as FC<ConfirmModalProps>;
 
-// new
+// new as of december 2022 on beta
 export const ModalRoot = (Object.values(
   findModule((m: any) => {
     if (typeof m !== 'object') return false;
 
     for (let prop in m) {
-      if (m[prop]?.toString()?.includes('"ModalManager","DialogWrapper"')) {
+      if (m[prop]?.m_mapModalManager) {
         return true;
       }
     }
@@ -132,6 +131,20 @@ export const ModalRoot = (Object.values(
     return false;
   }) || {},
 )?.find((x: any) => x?.type?.toString()?.includes('((function(){')) ||
+  // before december 2022 beta
+  Object.values(
+    findModule((m: any) => {
+      if (typeof m !== 'object') return false;
+
+      for (let prop in m) {
+        if (m[prop]?.toString()?.includes('"ModalManager","DialogWrapper"')) {
+          return true;
+        }
+      }
+
+      return false;
+    }) || {},
+  )?.find((x: any) => x?.type?.toString()?.includes('((function(){')) ||
   // old
   findModuleChild((m) => {
     if (typeof m !== 'object') return undefined;

src/deck-components/Router.tsx

@@ -63,28 +63,38 @@ export type AppOverview = {
   sort_as: string;
 };
 
-export interface Router {
+export interface MenuStore {
-  CloseSideMenus(): void;
-  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
-  GetQuickAccessTab(): QuickAccessTab;
-  Navigate(path: string): void;
-  NavigateBackOrOpenMenu(): void;
-  NavigateToAppProperties(): void;
-  NavigateToBugForum(): void;
-  NavigateToExternalWeb(url: string): void;
-  NavigateToHelp(): void;
-  NavigateToInvites(): void;
-  NavigateToRunningApp(replace?: boolean): void;
-  NavigateToStorage(): void;
-  NavigateToStore(): void;
-  NavigateToStoreApp(appId: number | string): void;
-  NavigateToStoreFreeToPlay(): void;
-  NavigateToStoreManual(): void;
-  NavigateToStoreNewReleases(): void;
-  NavigateToStoreOnSale(): void;
-  ToggleSideMenu(sideMenu: SideMenu): void;
-  CloseSideMenus(): void;
   OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+}
+
+export interface WindowRouter {
+  BrowserWindow: Window;
+  MenuStore: MenuStore;
+  Navigate(path: string): void;
+  NavigateToChat(): void;
+  NavigateToSteamWeb(url: string): void;
+  NavigateBack(): void;
+  NavigateToWebRoute(unknown?: any, unknown2?: any): void;
+}
+
+export interface WindowStore {
+  GamepadUIMainWindowInstance?: WindowRouter; // Current
+  SteamUIWindows: WindowRouter[];
+  OverlayWindows: WindowRouter[]; // Used by desktop GamepadUI
+}
+
+export interface Router {
+  WindowStore?: WindowStore;
+  CloseSideMenus(): void;
+  Navigate(path: string): void;
+  NavigateToAppProperties(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
   OpenPowerMenu(unknown?: any): void;
   get RunningApps(): AppOverview[];
   get MainRunningApp(): AppOverview | undefined;
@@ -96,3 +106,51 @@ export const Router = findModuleChild((m: Module) => {
     if (m[prop]?.Navigate && m[prop]?.NavigationManager) return m[prop];
   }
 }) as Router;
+
+export interface Navigation {
+  Navigate(path: string): void;
+  NavigateBack(): void;
+  NavigateToAppProperties(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
+  NavigateToSteamWeb(url: string): void;
+  NavigateToWebRoute(unknown?: any, unknown2?: any): void;
+  OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+  OpenPowerMenu(unknown?: any): void;
+  CloseSideMenus(): void;
+}
+
+export const Navigation = {
+  Navigate: Router.Navigate.bind(Router),
+  NavigateBack: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateBack.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance,
+  ),
+  NavigateToAppProperties: Router.NavigateToAppProperties.bind(Router),
+  NavigateToExternalWeb: Router.NavigateToExternalWeb.bind(Router),
+  NavigateToInvites: Router.NavigateToInvites.bind(Router),
+  NavigateToChat: Router.NavigateToChat.bind(Router),
+  NavigateToLibraryTab: Router.NavigateToLibraryTab.bind(Router),
+  NavigateToLayoutPreview: Router.NavigateToLayoutPreview.bind(Router),
+  NavigateToSteamWeb: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateToSteamWeb.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance,
+  ),
+  NavigateToWebRoute: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateToWebRoute.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance,
+  ),
+  OpenSideMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenSideMenu.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+  ),
+  OpenQuickAccessMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenQuickAccessMenu.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+  ),
+  OpenMainMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenMainMenu.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+  ),
+  CloseSideMenus: Router.CloseSideMenus.bind(Router),
+  OpenPowerMenu: Router.OpenPowerMenu.bind(Router),
+} as Navigation;

src/plugin.tsx

@@ -21,6 +21,52 @@ interface ServerResponseError {
 
 export type ServerResponse<TRes> = ServerResponseSuccess<TRes> | ServerResponseError;
 
+export interface MainMenuItem {
+  /** Called when clicking this menu item, useful if you do not want to navigate to a route.
+   * For navigating to a route, use route instead. */
+  action?: () => void;
+  /** The route this menu item navigates to @example "/steamweb" */
+  route?: string;
+  /** Props for the route this item navigates to. Currently only used for /steamweb to determine what webpack to navigate to @example {url: 'https://store.steampowered.com/'} */
+  routeState?: any;
+  /** Label for this menu item, @example "Store" */
+  label: ReactNode;
+  /** Runs when this item is selected. Defaults to setting the focused app to null.
+   * If you override this you must also call the original to retain proper behaivour */
+  onFocus?: () => void;
+  /** Icon of this menu item, you probably want a react SVG node */
+  children: ReactNode;
+}
+
+export interface CustomMainMenuItem extends MainMenuItem {
+  index: number;
+}
+
+export interface MainMenuItemReactNode {
+  props: MainMenuItem;
+  type: ComponentType;
+  key: any;
+}
+
+export interface OverlayReactNode {
+  props: MainMenuItem;
+  type: ComponentType;
+}
+
+export type ItemPatch = (item: MainMenuItemReactNode) => MainMenuItemReactNode;
+export type OverlayPatch = (overlay: OverlayReactNode) => OverlayReactNode;
+
+export interface MenuHook {
+  addItem(item: CustomMainMenuItem): CustomMainMenuItem;
+  addPatch(path: string, patch: ItemPatch): ItemPatch;
+  addOverlayPatch(patch: OverlayPatch): OverlayPatch;
+  addOverlayComponent(component: ReactNode): ReactNode;
+  removePatch(path: string, patch: ItemPatch): void;
+  removeOverlayPatch(patch: OverlayPatch): void;
+  removeOverlayComponent(component: ReactNode): void;
+  removeItem(item: CustomMainMenuItem): void;
+}
+
 export type RoutePatch = (route: RouteProps) => RouteProps;
 
 export interface RouterHook {
@@ -59,6 +105,7 @@ export interface FilePickerRes {
 
 export interface ServerAPI {
   routerHook: RouterHook;
+  menuHook: MenuHook;
   toaster: Toaster;
   openFilePicker(startPath: string, includeFiles?: boolean, regex?: RegExp): Promise<FilePickerRes>;
   callPluginMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): Promise<ServerResponse<TRes>>;