chore(release): 4.9.0 [CI SKIP]

feat: add `MenuSeparator` component

.github/workflows/release.yaml

@@ -4,7 +4,7 @@ on:
   pull_request:
   push:
     branches:
-      - v4-dev
+      - main
 
 jobs:
   release:

CHANGELOG.md

@@ -1,3 +1,109 @@
+# [4.9.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.3...v4.9.0) (2025-01-02)
+
+
+### Features
+
+* add MenuSeparator component ([484a882](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/484a882015ceb51c2c80e08151e79056e751ac15))
+
+## [4.8.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.2...v4.8.3) (2024-12-14)
+
+
+### Bug Fixes
+
+* **utils:** add new nav root name ([a43cd7f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a43cd7f3c56a2e30e332417e5b4abde8f4492be1))
+
+## [4.8.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.1...v4.8.2) (2024-11-20)
+
+
+### Bug Fixes
+
+* **Footer:** add missing focus/nav properties ([#113](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/113)) ([8117693](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/8117693427e4dba2f3b5bd24f36704d8d5e65ae2))
+
+## [4.8.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.0...v4.8.1) (2024-10-11)
+
+
+### Bug Fixes
+
+* **DialogCheckbox:** prevent some potential issues in dialogcheckbox ([bf58e08](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bf58e08e4b5b183737c9ad43a858b642ce593f93))
+* prevent issues where toString may not be a function (what) ([e965816](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e96581614471524cbf91bf962742df867ba3c3e9))
+
+# [4.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.4...v4.8.0) (2024-10-05)
+
+
+### Bug Fixes
+
+* **components/Modal:** dont break in desktop ui ([bea9ac7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bea9ac777452b883c2f3f3ebf8510c22c4577cd0))
+* **components/Router:** dont break in desktop ui ([980df68](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/980df687e7b7bf389f478e831f992fb9475eeb15))
+
+
+### Features
+
+* **utils/react:** add some window-related utils ([063dedb](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/063dedbbc1573a825571c675bf6bfa8a1bc1c6cd))
+
+## [4.7.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.3...v4.7.4) (2024-10-04)
+
+
+### Bug Fixes
+
+* **DialogCheckbox:** don't access getters to prevent their side effects from breaking the component ([241b22c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/241b22cad711621a1695dfd11da857f13c3fffdf))
+
+## [4.7.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.2...v4.7.3) (2024-10-03)
+
+
+### Bug Fixes
+
+* **components:** fix missing components on oct 2 2024 beta ([0f9fb5a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0f9fb5a3b8ef4f9978025a28323ab080fb0e7a4c))
+
+## [4.7.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.1...v4.7.2) (2024-09-16)
+
+
+### Bug Fixes
+
+* **utils:** fix potential race condition in findSP ([3aa07dc](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/3aa07dc9ce798ff8d1148424ee9e8a8bf2ba78c6))
+
+## [4.7.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.0...v4.7.1) (2024-08-08)
+
+
+### Bug Fixes
+
+* **utils/react:** fix potential race condition in injectFCTrampoline ([4c97097](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4c97097757919580a380b70785e6c161de6b03cc))
+
+# [4.7.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.6.0...v4.7.0) (2024-07-28)
+
+
+### Features
+
+* **router:** support desktop bpm overlay ([7eb484d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7eb484d55c6be6e7844878eb47eda55591a6cf51))
+
+# [4.6.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.5.0...v4.6.0) (2024-07-26)
+
+
+### Features
+
+* **classMapper:** add findClassByName back ([2b8d2ae](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2b8d2ae4dbd9a0c4a59a43be0101a0a8fe1c518f))
+
+# [4.5.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.4.0...v4.5.0) (2024-07-24)
+
+
+### Features
+
+* **classMapper:** add classModuleMap, make findClass require ID ([a370c1f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a370c1f7d3dca0db56a346c98c28ed9681a415e0))
+* **webpack:** refactor to prepare for classMapper changes ([d83bada](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d83bada4af2d16c750955de9a52f94a0080a2c14))
+
+# [4.4.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.3.1...v4.4.0) (2024-07-18)
+
+
+### Features
+
+* **utils/react:** add injectFCTrampoline ([44fdf9e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/44fdf9ed3b9a676a88b0ddc6a1c2c89d46ff7651))
+
+## [4.3.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.3.0...v4.3.1) (2024-07-17)
+
+
+### Bug Fixes
+
+* **Menu/MenuGroup:** rewrite filter to work on beta and prevent future errors ([d64c42a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d64c42ac310d3c3266c4ff610d9ec5ab6c7707b6))
+
 # [4.3.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.2.2...v4.3.0) (2024-07-09)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.3.0",
+  "version": "4.9.0",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/class-mapper.ts

@@ -1,10 +1,10 @@
-import { Module, findAllModules } from './webpack';
+import { Module, ModuleID, createModuleMapping } from './webpack';
 
 export interface ClassModule {
   [name: string]: string;
 }
 
-export const classMap: ClassModule[] = findAllModules((m: Module) => {
+export const classModuleMap: Map<ModuleID, ClassModule> = createModuleMapping((m: Module) => {
   if (typeof m == 'object' && !m.__esModule) {
     const keys = Object.keys(m);
     // special case some libraries
@@ -17,8 +17,14 @@ export const classMap: ClassModule[] = findAllModules((m: Module) => {
   return false;
 });
 
-export function findClass(name: string): string | void {
-  return classMap.find((m) => m?.[name])?.[name];
+export const classMap = [...classModuleMap.values()];
+
+export function findClass(id: string, name: string): string | void {
+  return classModuleMap.get(id)?.[name];
+}
+
+export function findClassByName(name: string): string | void {
+  return classMap.find((m) => m[name])?.[name];
 }
 
 export function findClassModule(filter: (module: any) => boolean): ClassModule | void {
@@ -26,7 +32,7 @@ export function findClassModule(filter: (module: any) => boolean): ClassModule |
 }
 
 export function unminifyClass(minifiedClass: string): string | void {
-  for (let m of classMap) {
+  for (let m of classModuleMap.values()) {
     for (let className of Object.keys(m)) {
       if (m[className] == minifiedClass) return className;
     }

src/components/Dialog.ts

@@ -78,11 +78,11 @@ export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection
 export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader') as FC<DialogCommonProps>;
 
 export const DialogButtonPrimary = Object.values(CommonUIModule).find(
-  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Primary"'),
+  (mod: any) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Primary"'),
 ) as FC<DialogButtonProps>;
 
 export const DialogButtonSecondary = Object.values(CommonUIModule).find(
-  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Secondary"')
+  (mod: any) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Secondary"')
 ) as FC<DialogButtonProps>;
 
 // This is the "main" button. The Primary can act as a submit button,

src/components/DialogCheckbox.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 
-import { findModule } from '../webpack';
+import { findModuleExport } from '../webpack';
 import { DialogCommonProps } from './Dialog';
 import { FooterLegendProps } from './FooterLegend';
 
@@ -18,19 +18,16 @@ export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProp
   onClick?(evt: Event): void;
 }
 
-export const DialogCheckbox = Object.values(
-  findModule((m: any) => {
-    if (typeof m !== 'object') return false;
-    for (const prop in m) {
-      if (m[prop]?.prototype?.GetPanelElementProps) return true;
-    }
-    return false;
-  }),
-).find(
-  (m: any) =>
-    m.contextType &&
-    m.prototype?.render.toString().includes('fallback:') &&
-    m?.prototype?.SetChecked &&
-    m?.prototype?.Toggle &&
-    m?.prototype?.GetPanelElementProps,
+// Do not access KeyDown, SetChecked, Toggle here as they are getters and accessing them outside of a render breaks them globally
+export const DialogCheckbox = findModuleExport(e =>
+  e?.prototype &&
+  typeof e?.prototype == "object" &&
+  "GetPanelElementProps" in e?.prototype &&
+  "SetChecked" in e?.prototype &&
+  "Toggle" in e?.prototype &&
+  // beta || stable as of oct 2 2024
+  (e?.prototype?.render?.toString?.().includes('="DialogCheckbox"') || (
+    e.contextType &&
+    e.prototype?.render?.toString?.().includes('fallback:')
+  ))
 ) as FC<DialogCheckboxProps>;

src/components/FocusRing.ts

@@ -11,5 +11,5 @@ export interface FocusRingProps {
 }
 
 export const FocusRing = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.GetShowDebugFocusRing())'),
+  e?.toString?.()?.includes('.GetShowDebugFocusRing())'),
 ) as FC<FocusRingProps>;

src/components/FooterLegend.ts

@@ -31,11 +31,42 @@ export enum GamepadButton {
   STEAM_GUIDE,
   STEAM_QUICK_MENU,
 }
-export declare enum NavEntryPositionPreferences {
+export enum NavEntryPositionPreferences {
+  /**
+   * Always give focus to the first child element.
+   */
   FIRST,
+
+  /**
+   * Always give focus to the last child element.
+   */
   LAST,
+
+  /**
+   * Give focus to the child element that would maintain the flow in the X axis.
+   * 
+   * Imagine you have a calculator window with 9 standard buttons.
+   * You have 3 rows of buttons, with 3 buttons per row.
+   * If you select button with number 8 and navigate down, the buttons
+   * will be navigated in the following order 8->5->3.
+   * The flow is maintained for the X axis while you're navigating the Y axis.
+   */
   MAINTAIN_X,
+
+  /**
+   * Give focus to the child element that would maintain the flow in the Y axis.
+   * 
+   * Imagine you have a calculator window with 9 standard buttons.
+   * You have 3 columns of buttons, with 3 buttons per column.
+   * If you select button with number 4 and navigate right, the buttons
+   * will be navigated in the following order 4->5->6.
+   * The flow is maintained for the Y axis while you're navigating the X axis.
+   */
   MAINTAIN_Y,
+
+  /**
+   * Give focus to the first child element with `preferredFocus == true` prop.
+   */
   PREFERRED_CHILD,
 }
 export interface GamepadEventDetail {
@@ -48,6 +79,25 @@ export declare type ActionDescriptionMap = {
 };
 export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
+  /**
+   * Navigation entry strategy to be used when gaining focus during navigation.
+   * 
+   * This is meant to be used on a parent container that has children. Once the
+   * container (e.g. Focusable) is navigated to and has children in it, the children
+   * is then navigated to (focused) using the provided strategy.
+   * 
+   * If no strategy is provided, it seems that the `NavEntryPositionPreferences.FIRST`
+   * is used initialy, but for the next time the parent remembers previously focused
+   * child and focused back on it instead.
+   */
+  navEntryPreferPosition?: NavEntryPositionPreferences;
+
+  /**
+   * Mark the element as the preferred child (to be focused) whenever the parent uses the
+   * `NavEntryPositionPreferences.PREFERRED_CHILD` navigation strategy.
+   */
+  preferredFocus?: boolean;
+
   actionDescriptionMap?: ActionDescriptionMap;
   onOKActionDescription?: ReactNode;
   onCancelActionDescription?: ReactNode;

src/components/Menu.ts

@@ -1,7 +1,6 @@
 import { FC, ReactNode } from 'react';
 
-import { fakeRenderComponent } from '../utils';
-import { Export, findModuleExport } from '../webpack';
+import { Export, findModuleByExport, findModuleExport } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
 
 export const showContextMenu: (children: ReactNode, parent?: EventTarget) => void = findModuleExport(
@@ -26,12 +25,8 @@ export interface MenuGroupProps {
   children?: ReactNode;
 }
 
-export const MenuGroup: FC<MenuGroupProps> = findModuleExport(
-  (e: Export) =>
-    (e?.toString()?.includes?.('bInGamepadUI:') &&
-      fakeRenderComponent(() => e({ overview: { appid: 7 } }), {useContext: () => ({IN_GAMEPADUI: true})})?.type?.prototype?.RenderSubMenu) ||
-    (e?.prototype?.RenderSubMenu && e?.prototype?.ShowSubMenu)
-);
+const MenuGoupModule = findModuleByExport(e => e?.prototype?.Focus && e?.prototype?.OnOKButton && e?.prototype?.render?.toString().includes?.(`"emphasis"==this.props.tone`));
+export const MenuGroup: FC<MenuGroupProps> = MenuGoupModule && Object.values(MenuGoupModule).find((e: Export) => typeof e == "function" && e?.toString?.()?.includes("bInGamepadUI:"));
 export interface MenuItemProps extends FooterLegendProps {
   bInteractableItem?: boolean;
   onClick?(evt: Event): void;
@@ -47,7 +42,11 @@ export interface MenuItemProps extends FooterLegendProps {
 
 export const MenuItem: FC<MenuItemProps> = findModuleExport(
   (e: Export) =>
-    e?.render?.toString()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
+    e?.render?.toString?.()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
+);
+
+export const MenuSeparator: FC = findModuleExport(
+  (e: Export) => typeof e === 'function' && /className:.+?\.ContextMenuSeparator/.test(e.toString()),
 );
 
 /*

src/components/Modal.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 
 import { findSP } from '../utils';
-import { Export, findModule, findModuleByExport, findModuleExport } from '../webpack';
+import { Export, findModule, findModuleDetailsByExport, findModuleExport } from '../webpack';
 
 // All of the popout options + strTitle are related. Proper usage is not yet known...
 export interface ShowModalProps {
@@ -50,7 +50,7 @@ export const showModal = (
     bHideMainWindowForPopouts: false,
   },
 ): ShowModalResult => {
-  return showModalRaw(modal, parent || findSP(), props.strTitle, props, undefined, {
+  return showModalRaw(modal, parent || findSP() || window, props.strTitle, props, undefined, {
     bHideActions: props.bHideActionIcons,
   });
 };
@@ -98,14 +98,14 @@ export const ModalRoot = Object.values(
 
     return false;
   }) || {},
-)?.find((x: any) => x?.type?.toString()?.includes('((function(){')) as FC<ModalRootProps>;
+)?.find((x: any) => x?.type?.toString?.()?.includes('((function(){')) as FC<ModalRootProps>;
 
 interface SimpleModalProps {
   active?: boolean;
   children: ReactNode;
 }
 
-const ModalModule = findModuleByExport((e: Export) => e?.toString().includes('.ModalPosition,fallback:'), 5);
+const [ModalModule, _ModalPosition] = findModuleDetailsByExport((e: Export) => e?.toString().includes('.ModalPosition'), 5)
 
 const ModalModuleProps = ModalModule ? Object.values(ModalModule) : [];
 
@@ -114,6 +114,4 @@ export const SimpleModal = ModalModuleProps.find((prop) => {
   return string?.includes('.ShowPortalModal()') && string?.includes('.OnElementReadyCallbacks.Register(');
 }) as FC<SimpleModalProps>;
 
-export const ModalPosition = ModalModuleProps.find((prop) =>
-  prop?.toString().includes('.ModalPosition,fallback:'),
-) as FC<SimpleModalProps>;
+export const ModalPosition = _ModalPosition as FC<SimpleModalProps>;

src/components/Panel.ts

@@ -22,5 +22,5 @@ export interface PanelSectionRowProps {
   children?: ReactNode;
 }
 export const PanelSectionRow = Object.values(mod).filter(
-  (exp: any) => !exp?.toString()?.includes('.PanelSection'),
+  (exp: any) => !exp?.toString?.()?.includes('.PanelSection'),
 )[0] as FC<PanelSectionRowProps>;

src/components/ProgressBar.ts

@@ -24,11 +24,11 @@ export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
 }
 
 export const ProgressBar = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.ProgressBar,"standard"=='),
+  e?.toString?.()?.includes('.ProgressBar,"standard"=='),
 ) as FC<ProgressBarProps>;
 
 export const ProgressBarWithInfo = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.ProgressBarFieldStatus},'),
+  e?.toString?.()?.includes('.ProgressBarFieldStatus},'),
 ) as FC<ProgressBarWithInfoProps>;
 
 const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);

src/components/SliderField.ts

@@ -29,5 +29,6 @@ export interface SliderFieldProps extends ItemProps {
 }
 
 export const SliderField = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.toString()?.includes('SliderField,fallback'),
+  // stable || beta as of oct 2 2024
+  mod?.toString?.()?.includes('SliderField,fallback') || mod?.toString?.()?.includes("SliderField\",")
 ) as FC<SliderFieldProps>;

src/components/Tabs.tsx

@@ -1,9 +1,6 @@
-import { FC, ReactNode, createElement, useEffect, useState } from 'react';
-
-import { fakeRenderComponent, findInReactTree, sleep } from '../utils';
-import { Export, findModuleByExport } from '../webpack';
+import { FC, ReactNode } from 'react';
+import { findModuleByExport } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
-import { SteamSpinner } from './SteamSpinner';
 
 /**
  * Individual tab objects for the Tabs component
@@ -65,63 +62,9 @@ export interface TabsProps {
   autoFocusContents?: boolean;
 }
 
-let tabsComponent: any;
-
-const getTabs = async () => {
-  if (tabsComponent) return tabsComponent;
-  // @ts-ignore
-  while (!window?.DeckyPluginLoader?.routerHook?.routes) {
-    console.debug('[DFL:Tabs]: Waiting for Decky router...');
-    await sleep(500);
-  }
-  return (tabsComponent = fakeRenderComponent(
-    () => {
-      return findInReactTree(
-        findInReactTree(
-          // @ts-ignore
-          window.DeckyPluginLoader.routerHook.routes
-            .find((x: any) => x.props.path == '/library/app/:appid/achievements')
-            .props.children.type(),
-          (x) => x?.props?.scrollTabsTop,
-        ).type({ appid: 1 }),
-        (x) => x?.props?.tabs,
-      ).type;
-    },
-    {
-      useRef: () => ({ current: { reaction: { track: () => {} } } }),
-      useContext: () => ({ match: { params: { appid: 1 } } }),
-      useMemo: () => ({ data: {} }),
-    },
-  ));
-};
-
-let oldTabs: any;
-
-try {
-  const oldTabsModule = findModuleByExport((e: Export) => e.Unbleed);
-  if (oldTabsModule)
-    oldTabs = Object.values(oldTabsModule).find((x: any) => x?.type?.toString()?.includes('((function(){'));
-} catch (e) {
-  console.error('Error finding oldTabs:', e);
-}
+const tabsModule = findModuleByExport(e => e?.toString?.()?.includes(".TabRowTabs") && e?.toString?.()?.includes("activeTab:"));
 
 /**
  * Tabs component as used in the library and media tabs. See {@link TabsProps}.
- * Unlike other components in `decky-frontend-lib`, this requires Decky Loader to be running.
  */
-export const Tabs = (oldTabs ||
-  ((props: TabsProps) => {
-    const found = tabsComponent;
-    const [tc, setTC] = useState<FC<TabsProps>>(found);
-    useEffect(() => {
-      if (found) return;
-      (async () => {
-        console.debug('[DFL:Tabs]: Finding component...');
-        const t = await getTabs();
-        console.debug('[DFL:Tabs]: Found!');
-        setTC(t);
-      })();
-    }, []);
-    console.log('tc', tc);
-    return tc ? createElement(tc, props) : <SteamSpinner />;
-  })) as FC<TabsProps>;
+export const Tabs = tabsModule && Object.values(tabsModule).find((e: any) => e?.type?.toString?.()?.includes("((function()")) as FC<TabsProps>;

src/components/Toggle.ts

@@ -10,5 +10,5 @@ export interface ToggleProps {
 }
 
 export const Toggle = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('.ToggleOff)'),
+  mod?.render?.toString?.()?.includes('.ToggleOff)'),
 ) as FC<ToggleProps>;

src/components/ToggleField.ts

@@ -11,5 +11,6 @@ export interface ToggleFieldProps extends ItemProps {
 }
 
 export const ToggleField = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('ToggleField,fallback'),
+  // stable || beta as of oct 2 2024
+  mod?.render?.toString?.()?.includes('ToggleField,fallback') || mod?.render?.toString?.()?.includes("ToggleField\",")
 ) as FC<ToggleFieldProps>;

src/custom-hooks/useQuickAccessVisible.ts

@@ -11,12 +11,14 @@ function getQuickAccessWindow(): Window | null {
 
 /**
  * Returns state indicating the visibility of quick access menu.
+ * 
+ * @deprecated moved to @decky/api
  *
  * @returns `true` if quick access menu is visible and `false` otherwise.
  *
  * @example
  * import { FC, useEffect } from "react";
- * import { useQuickAccessVisible } from "decky-frontend-lib";
+ * import { useQuickAccessVisible } from "@decky/ui";
  *
  * export const PluginPanelView: FC<{}> = ({ }) => {
  *   const isVisible = useQuickAccessVisible();

src/globals/stores.ts

@@ -1,3 +1,4 @@
+import { WindowRouter } from '../modules/Router';
 import { AppDetails, LogoPosition, SteamAppOverview } from './SteamClient';
 declare global {
   interface Window {
@@ -46,5 +47,11 @@ declare global {
       GetCustomLogoPosition: (app: SteamAppOverview) => LogoPosition | null;
       SaveCustomLogoPosition: (app: SteamAppOverview, logoPositions: LogoPosition) => any;
     };
+    SteamUIStore: {
+      GetFocusedWindowInstance: () => WindowRouter;
+    };
+    securitystore: {
+      IsLockScreenActive: () => boolean;
+    };
   }
 }

src/modules/Router.ts

@@ -1,4 +1,4 @@
-import { sleep } from '../utils';
+import Logger from '../logger';
 import { Export, findModuleExport } from '../webpack';
 
 export enum SideMenu {
@@ -88,14 +88,23 @@ export interface WindowStore {
 
 export interface Router {
   WindowStore?: WindowStore;
+  /** @deprecated use {@link Navigation} instead */
   CloseSideMenus(): void;
+  /** @deprecated use {@link Navigation} instead */
   Navigate(path: string): void;
+  /** @deprecated use {@link Navigation} instead */
   NavigateToAppProperties(): void;
+  /** @deprecated use {@link Navigation} instead */
   NavigateToExternalWeb(url: string): void;
+  /** @deprecated use {@link Navigation} instead */
   NavigateToInvites(): void;
+  /** @deprecated use {@link Navigation} instead */
   NavigateToChat(): void;
+  /** @deprecated use {@link Navigation} instead */
   NavigateToLibraryTab(): void;
+  /** @deprecated use {@link Navigation} instead */
   NavigateToLayoutPreview(e: unknown): void;
+  /** @deprecated use {@link Navigation} instead */
   OpenPowerMenu(unknown?: any): void;
   get RunningApps(): AppOverview[];
   get MainRunningApp(): AppOverview | undefined;
@@ -117,58 +126,58 @@ export interface Navigation {
   OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
   OpenMainMenu(): void;
   OpenPowerMenu(unknown?: any): void;
+  /** if calling this to perform navigation, call it after Navigate to prevent a race condition in desktop Big Picture mode that hides the overlay unintentionally */
   CloseSideMenus(): void;
 }
 
 export let Navigation = {} as Navigation;
 
+const logger = new Logger("Navigation");
+
 try {
-  (async () => {
-    let InternalNavigators: any = {};
-    if (!Router.NavigateToAppProperties || (Router as unknown as any).deckyShim) {
-      function initInternalNavigators() {
-        try {
-          InternalNavigators = findModuleExport((e: Export) => e.GetNavigator && e.SetNavigator)?.GetNavigator();
-        } catch (e) {
-          console.error('[DFL:Router]: Failed to init internal navigators, trying again');
-        }
+  function createNavigationFunction(fncName: string, handler?: (win: any) => any) {
+    return (...args: any) => {
+      let win: WindowRouter | undefined;
+      try {
+        win = window.SteamUIStore.GetFocusedWindowInstance();
+      } catch (e) {
+        logger.warn("Navigation interface failed to call GetFocusedWindowInstance", e);
       }
-      initInternalNavigators();
-      while (!InternalNavigators?.AppProperties) {
-        console.log('[DFL:Router]: Trying to init internal navigators again');
-        await sleep(2000);
-        initInternalNavigators();
+      if (!win) {
+        logger.warn("Navigation interface could not find any focused window. Falling back to Main Window Instance");
+        win = Router.WindowStore?.GamepadUIMainWindowInstance || Router?.WindowStore?.SteamUIWindows?.[0];
+      }
+
+      if (win) {
+        try {
+          const thisObj = handler && handler(win);
+          (thisObj || win)[fncName](...args);
+        } catch (e) {
+          logger.error("Navigation handler failed", e);
+        }
+      } else {
+        logger.error("Navigation interface could not find a window to navigate");
       }
     }
-    const newNavigation = {
-      Navigate: Router.Navigate?.bind(Router),
-      NavigateBack: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateBack?.bind(
-        Router.WindowStore.GamepadUIMainWindowInstance,
-      ),
-      NavigateToAppProperties: InternalNavigators?.AppProperties || Router.NavigateToAppProperties?.bind(Router),
-      NavigateToExternalWeb: InternalNavigators?.ExternalWeb || Router.NavigateToExternalWeb?.bind(Router),
-      NavigateToInvites: InternalNavigators?.Invites || Router.NavigateToInvites?.bind(Router),
-      NavigateToChat: InternalNavigators?.Chat || Router.NavigateToChat?.bind(Router),
-      NavigateToLibraryTab: InternalNavigators?.LibraryTab || Router.NavigateToLibraryTab?.bind(Router),
-      NavigateToLayoutPreview: Router.NavigateToLayoutPreview?.bind(Router),
-      NavigateToSteamWeb: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateToSteamWeb?.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;
+  }
+  const newNavigation = {
+    Navigate: createNavigationFunction("Navigate"),
+    NavigateBack: createNavigationFunction("NavigateBack"),
+    NavigateToAppProperties: createNavigationFunction("AppProperties", win => win.Navigator),
+    NavigateToExternalWeb: createNavigationFunction("ExternalWeb", win => win.Navigator),
+    NavigateToInvites: createNavigationFunction("Invites", win => win.Navigator),
+    NavigateToChat: createNavigationFunction("Chat", win => win.Navigator),
+    NavigateToLibraryTab: createNavigationFunction("LibraryTab", win => win.Navigator),
+    NavigateToLayoutPreview: Router.NavigateToLayoutPreview?.bind(Router),
+    NavigateToSteamWeb: createNavigationFunction("NavigateToSteamWeb"),
+    OpenSideMenu: createNavigationFunction("OpenSideMenu", win => win.MenuStore),
+    OpenQuickAccessMenu: createNavigationFunction("OpenQuickAccessMenu", win => win.MenuStore),
+    OpenMainMenu: createNavigationFunction("OpenMainMenu", win => win.MenuStore),
+    CloseSideMenus: createNavigationFunction("CloseSideMenus", win => win.MenuStore),
+    OpenPowerMenu: Router.OpenPowerMenu?.bind(Router),
+  } as Navigation;
 
-    Object.assign(Navigation, newNavigation);
-  })();
+  Object.assign(Navigation, newNavigation);
 } catch (e) {
-  console.error('[DFL:Router]: Error initializing Navigation interface', e);
+  logger.error('Error initializing Navigation interface', e);
 }

src/utils/index.ts

@@ -1,7 +1,8 @@
 export * from './patcher';
-export * from './react';
-export * from './react-patching';
 export * from './static-classes';
+export * from './react/react';
+export * from './react/fc';
+export * from './react/treepatcher';
 
 declare global {
   var FocusNavController: any;
@@ -24,7 +25,7 @@ export function findSP(): Window {
   if (document.title == 'SP') return window;
   // new (SP as popup)
   const navTrees = getGamepadNavigationTrees();
-  return navTrees?.find((x: any) => x.m_ID == 'root_1_').Root.Element.ownerDocument.defaultView;
+  return navTrees?.find((x: any) => x.m_ID == 'GamepadUI_Full_Root' || x.m_ID == 'root_1_')?.Root?.Element?.ownerDocument?.defaultView;
 }
 
 /**
@@ -39,6 +40,6 @@ export function getFocusNavController(): any {
  */
 export function getGamepadNavigationTrees(): any {
   const focusNav = getFocusNavController();
-  const context = focusNav.m_ActiveContext || focusNav.m_LastActiveContext;
+  const context = focusNav?.m_ActiveContext || focusNav?.m_LastActiveContext;
   return context?.m_rgGamepadNavigationTrees;
 }

src/utils/react/fc.ts

@@ -0,0 +1,139 @@
+// Utilities for patching function components
+import { createElement, type FC } from 'react';
+import { applyHookStubs, removeHookStubs } from './react';
+import Logger from '../../logger';
+
+export interface FCTrampoline {
+    component: FC
+}
+
+let loggingEnabled = false;
+
+export function setFCTrampolineLoggingEnabled(value: boolean = true) { loggingEnabled = value };
+
+let logger = new Logger('FCTrampoline');
+
+/**
+ * Directly hooks a function component from its reference, redirecting it to a user-patchable wrapper in its returned object.
+ * This only works if the original component when called directly returns either nothing, null, or another child element.
+ * 
+ * This works by tricking react into thinking it's a class component by cleverly working around its class component checks,
+ * keeping the unmodified function component intact as a mostly working constructor (as it is impossible to direcly modify a function),
+ * stubbing out hooks to prevent errors by detecting setter/getter triggers that occur direcly before/after the class component is instantiated by react,
+ * and creating a fake class component render method to trampoline out into your own handler.
+ * 
+ * Due to the nature of this method of hooking a component, please only use this where it is *absolutely necessary.*
+ * Incorrect hook stubs can cause major instability, be careful when writing them. Refer to fakeRenderComponent for the hook stub implementation.
+ * Make sure your hook stubs can handle all the cases they could possibly need to within the component you are injecting into.
+ * You do not need to worry about its children, as they are never called due to the first instance never actually rendering.
+ */
+export function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoline {
+    // It needs to be wrapped so React doesn't infinitely call the fake class render method.
+    const newComponent = function (this: any, ...args: any) {
+        loggingEnabled && logger.debug("new component rendering with props", args);
+        return component.apply(this, args);
+    }
+    const userComponent = { component: newComponent };
+    // Create a fake class component render method
+    component.prototype.render = function (...args: any[]) {
+        loggingEnabled && logger.debug("rendering trampoline", args, this);
+        // Pass through rendering via creating the component as a child so React can use function component logic instead of class component logic (setting up the hooks)
+        return createElement(userComponent.component, this.props, this.props.children);
+    };
+    component.prototype.isReactComponent = true;
+    let stubsApplied = false;
+    let oldCreateElement = window.SP_REACT.createElement;
+
+    const applyStubsIfNeeded = () => {
+        if (!stubsApplied) {
+            loggingEnabled && logger.debug("applied stubs");
+            stubsApplied = true;
+            applyHookStubs(customHooks)
+            // we have to redirect this to return an object with component's prototype as a constructor returning a value overrides its prototype
+            window.SP_REACT.createElement = () => {
+                loggingEnabled && logger.debug("createElement hook called");
+                loggingEnabled && console.trace("createElement trace");
+                return Object.create(component.prototype);
+            };
+        }
+    }
+
+    const removeStubsIfNeeded = () => {
+        if (stubsApplied) {
+            loggingEnabled && logger.debug("removed stubs");
+            stubsApplied = false;
+            removeHookStubs();
+            window.SP_REACT.createElement = oldCreateElement;
+        }
+    }
+
+    let renderHookStep = 0;
+
+    // Accessed two times, once directly before class instantiation, and again in some extra logic we don't need to worry about that we hanlde below just in case.
+    Object.defineProperty(component, "contextType", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get contexttype", this, stubsApplied, renderHookStep);
+            loggingEnabled && console.trace("contextType trace");
+            if (renderHookStep == 0) renderHookStep = 1;
+            else if (renderHookStep == 3) renderHookStep = 4;
+            return this._contextType;
+        },
+        set: function (value) {
+            this._contextType = value;
+        }
+    });
+
+    // Always accessed directly after contextType for the path we want to catch.
+    Object.defineProperty(component, "contextTypes", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get contexttypes", this, stubsApplied, renderHookStep);
+            loggingEnabled && console.trace("contextTypes trace");
+            if (renderHookStep == 1) {
+                renderHookStep = 2;
+                applyStubsIfNeeded();
+            };
+            return this._contextTypes;
+        },
+        set: function (value) {
+            this._contextTypes = value;
+        }
+    });
+
+    // Set directly after class is instantiated
+    Object.defineProperty(component.prototype, "updater", {
+        configurable: true,
+        get: function () {
+            return this._updater;
+        },
+        set: function (value) {
+            loggingEnabled && logger.debug("set updater", this, value, stubsApplied, renderHookStep);
+            loggingEnabled && console.trace("updater trace");
+            if (renderHookStep == 2) {
+                renderHookStep = 0;
+                removeStubsIfNeeded();
+            }
+            return this._updater = value;
+        }
+    });
+
+    // Prevents the second contextType+contextTypes access from leaving its hooks around
+    Object.defineProperty(component, "getDerivedStateFromProps", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied, renderHookStep);
+            loggingEnabled && console.trace("getDerivedStateFromProps trace");
+            if (renderHookStep == 2) {
+                renderHookStep = 0;
+                removeStubsIfNeeded();
+            }
+            return this._getDerivedStateFromProps;
+        },
+        set: function (value) {
+            this._getDerivedStateFromProps = value;
+        }
+    });
+
+    return userComponent;
+}

src/utils/react/react.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Ref, useState } from 'react';
 
 // this shouldn't need to be redeclared but it does for some reason
 
@@ -30,13 +31,15 @@ export function createPropListRegex(propList: string[], fromStart: boolean = tru
   return new RegExp(regexString);
 }
 
-export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
+let oldHooks = {};
+
+export function applyHookStubs(customHooks: any = {}): any {
   const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
     .current;
 
   // TODO: add more hooks
 
-  let oldHooks = {
+  oldHooks = {
     useContext: hooks.useContext,
     useCallback: hooks.useCallback,
     useLayoutEffect: hooks.useLayoutEffect,
@@ -60,9 +63,22 @@ export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
 
   Object.assign(hooks, customHooks);
 
-  const res = fun(hooks);
+  return hooks;
+}
 
+export function removeHookStubs() {
+  const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
+    .current;
   Object.assign(hooks, oldHooks);
+  oldHooks = {};
+}
+
+export function fakeRenderComponent(fun: Function, customHooks?: any): any {
+  const hooks = applyHookStubs(customHooks);
+
+  const res = fun(hooks); // TODO why'd we do this?
+
+  removeHookStubs();
 
   return res;
 }
@@ -89,19 +105,15 @@ export function wrapReactClass(node: any, prop: any = 'type') {
 
 export function getReactRoot(o: HTMLElement | Element | Node) {
   return (
-    // @ts-expect-error 7053
-    o[Object.keys(o).find((k) => k.startsWith('__reactContainer$')) as string] ||
-    // @ts-expect-error 7053
-    o['_reactRootContainer']?._internalRoot?.current
+    (o as any)[Object.keys(o).find((k) => k.startsWith('__reactContainer$')) as string] ||
+    (o as any)['_reactRootContainer']?._internalRoot?.current
   );
 }
 
 export function getReactInstance(o: HTMLElement | Element | Node) {
   return (
-    // @ts-expect-error 7053
-    o[Object.keys(o).find((k) => k.startsWith('__reactFiber')) as string] ||
-    // @ts-expect-error 7053
-    o[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string]
+    (o as any)[Object.keys(o).find((k) => k.startsWith('__reactFiber')) as string] ||
+    (o as any)[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string]
   );
 }
 
@@ -139,3 +151,21 @@ export const findInReactTree = (node: any, filter: findInTreeFilter) =>
     // Specialised findInTree for React nodes
     walkable: ['props', 'children', 'child', 'sibling'],
   });
+
+/**
+ * Finds the parent window of a DOM element
+ */
+export function getParentWindow<WindowType = Window>(elem: HTMLElement | null): WindowType | null | undefined {
+  return elem?.ownerDocument?.defaultView as any;
+}
+
+/**
+ * React hook to find the host window of a component
+ * Pass the returned ref into a React element and window will be its host window.
+ * @returns [ref, window]
+ */
+export function useWindowRef<RefElementType extends HTMLElement, WindowType = Window>(): [Ref<RefElementType>, WindowType | null | undefined] {
+  const [win, setWin] = useState<WindowType | null | undefined>(null);
+
+  return [(elem) => setWin(getParentWindow<WindowType>(elem)), win];
+}

src/utils/react/treepatcher.ts

@@ -1,5 +1,5 @@
-import Logger from '../logger';
-import { GenericPatchHandler, afterPatch } from './patcher';
+import Logger from '../../logger';
+import { GenericPatchHandler, afterPatch } from '../patcher';
 import { wrapReactClass, wrapReactType } from './react';
 
 // TODO max size limit? could implement as a class extending map perhaps

src/webpack.ts

@@ -9,20 +9,21 @@ declare global {
 const logger = new Logger('Webpack');
 
 // In most case an object with getters for each property. Look for the first call to r.d in the module, usually near or at the top.
+export type ModuleID = string; // number string
 export type Module = any;
 export type Export = any;
 type FilterFn = (module: any) => boolean;
 type ExportFilterFn = (moduleExport: any, exportName?: any) => boolean;
 type FindFn = (module: any) => any;
 
-export let modules: any = [];
+export let modules = new Map<ModuleID, Module>();
 
 function initModuleCache() {
   const startTime = performance.now();
   logger.group('Webpack Module Init');
   // Webpack 5, currently on beta
   // Generate a fake module ID
-  const id = Math.random(); // really should be an int and not a float but who cares
+  const id = Symbol("@decky/ui");
   let webpackRequire!: ((id: any) => Module) & { m: object };
   // Insert our module in a new chunk.
   // The module will then be called with webpack's internal require function as its first argument
@@ -39,14 +40,14 @@ function initModuleCache() {
   );
 
   // Loop over every module ID
-  for (let i of Object.keys(webpackRequire.m)) {
+  for (let id of Object.keys(webpackRequire.m)) {
     try {
-      const module = webpackRequire(i);
+      const module = webpackRequire(id);
       if (module) {
-        modules.push(module);
+        modules.set(id, module);
       }
     } catch (e) {
-      logger.debug('Ignoring require error for module', i, e);
+      logger.debug('Ignoring require error for module', id, e);
     }
   }
 
@@ -56,7 +57,7 @@ function initModuleCache() {
 initModuleCache();
 
 export const findModule = (filter: FilterFn) => {
-  for (const m of modules) {
+  for (const m of modules.values()) {
     if (m.default && filter(m.default)) return m.default;
     if (filter(m)) return m;
   }
@@ -65,8 +66,8 @@ export const findModule = (filter: FilterFn) => {
 export const findModuleDetailsByExport = (
   filter: ExportFilterFn,
   minExports?: number,
-): [module: Module | undefined, moduleExport: any, exportName: any] => {
-  for (const m of modules) {
+): [module: Module | undefined, moduleExport: any, exportName: any, moduleID: string | undefined] => {
+  for (const [id, m] of modules) {
     if (!m) continue;
     for (const mod of [m.default, m]) {
       if (typeof mod !== 'object') continue;
@@ -75,7 +76,7 @@ export const findModuleDetailsByExport = (
         if (mod?.[exportName]) {
           const filterRes = filter(mod[exportName], exportName);
           if (filterRes) {
-            return [mod, mod[exportName], exportName];
+            return [mod, mod[exportName], exportName, id];
           } else {
             continue;
           }
@@ -83,7 +84,7 @@ export const findModuleDetailsByExport = (
       }
     }
   }
-  return [undefined, undefined, undefined];
+  return [undefined, undefined, undefined, undefined];
 };
 
 export const findModuleByExport = (filter: ExportFilterFn, minExports?: number) => {
@@ -98,7 +99,7 @@ export const findModuleExport = (filter: ExportFilterFn, minExports?: number) =>
  * @deprecated use findModuleExport instead
  */
 export const findModuleChild = (filter: FindFn) => {
-  for (const m of modules) {
+  for (const m of modules.values()) {
     for (const mod of [m.default, m]) {
       const filterRes = filter(mod);
       if (filterRes) {
@@ -110,10 +111,13 @@ export const findModuleChild = (filter: FindFn) => {
   }
 };
 
+/**
+ * @deprecated use createModuleMapping instead
+ */
 export const findAllModules = (filter: FilterFn) => {
   const out = [];
 
-  for (const m of modules) {
+  for (const m of modules.values()) {
     if (m.default && filter(m.default)) out.push(m.default);
     if (filter(m)) out.push(m);
   }
@@ -121,7 +125,18 @@ export const findAllModules = (filter: FilterFn) => {
   return out;
 };
 
-export const CommonUIModule = modules.find((m: Module) => {
+export const createModuleMapping = (filter: FilterFn) => {
+  const mapping = new Map<ModuleID, Module>();
+
+  for (const [id, m] of modules) {
+    if (m.default && filter(m.default)) mapping.set(id, m.default);
+    if (filter(m)) mapping.set(id, m);
+  }
+
+  return mapping;
+};
+
+export const CommonUIModule = findModule((m: Module) => {
   if (typeof m !== 'object') return false;
   for (let prop in m) {
     if (m[prop]?.contextType?._currentValue && Object.keys(m).length > 60) return true;