chore(*): run prettier

.github/workflows/docs.yaml

@@ -51,4 +51,4 @@ jobs:
           ssh: true
           directory: ./wiki
           repository: SteamDeckHomebrew/wiki
-          branch: main
+          branch: main

.releaserc.json

@@ -6,9 +6,9 @@
       {
         "preset": "angular",
         "releaseRules": [
-          {"type": "chore", "scope": "classes", "release": "patch"},
+          { "type": "chore", "scope": "classes", "release": "patch" },
-          {"type": "docs", "scope": "steamclient", "release": "patch"},
+          { "type": "docs", "scope": "steamclient", "release": "patch" },
-          {"type": "*", "scope": "docs", "release": false}
+          { "type": "*", "scope": "docs", "release": false }
         ]
       }
     ],

.vscode/tasks.json

@@ -1,15 +1,13 @@
 {
-	"version": "2.0.0",
+  "version": "2.0.0",
-	"tasks": [
+  "tasks": [
-		{
+    {
-			"type": "npm",
+      "type": "npm",
-			"script": "dev",
+      "script": "dev",
-			"problemMatcher": [
+      "problemMatcher": ["$tsc-watch"],
-				"$tsc-watch"
+      "label": "npm: dev",
-			],
+      "detail": "tsc -b -w",
-			"label": "npm: dev",
+      "isBackground": true
-			"detail": "tsc -b -w",
+    }
-			"isBackground": true
+  ]
-		}
+}
-	]
-}

README.md

@@ -20,7 +20,7 @@ This library can also theoretically be used to extend existing UI elements of th
 
 ### Getting Started (Developers)
 
-If you would like a feature added to decky-frontend-lib, please request it via a Github issue.  
+If you would like a feature added to decky-frontend-lib, please request it via a Github issue.
 
 If you want to start making a plugin with decky-frontend-lib, please direct your attention to the [decky-plugin-template](https://github.com/SteamDeckHomebrew/decky-plugin-template) repository.
 

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript',],
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
 };

globals.d.ts

@@ -1,5 +1,5 @@
 declare global {
-    interface Window {
+  interface Window {
-        SP_REACT: typeof React;
+    SP_REACT: typeof React;
-    }
+  }
-}
+}

src/class-mapper.ts

@@ -1,34 +1,34 @@
-import { Module, findAllModules } from "./webpack";
+import { Module, findAllModules } from './webpack';
 
 export interface ClassModule {
-    [name: string]: string
+  [name: string]: string;
-};
-  
-export const classMap: ClassModule[] = findAllModules((m: Module) => {
-    if (typeof m == "object" && !m.__esModule) {
-        const keys = Object.keys(m);
-        // special case some libraries
-        if (keys.length == 1 && m.version) return false;
-        // special case localization
-        if (keys.length > 1000 && m.AboutSettings) return false;
-  
-        return keys.length > 0 && keys.every(k => !Object.getOwnPropertyDescriptor(m, k)?.get && typeof m[k] == "string")
-    }
-    return false;
-});
-  
-export function findClass(name: string): string | void {
-    return classMap.find(m => m?.[name])?.[name];
 }
-  
+
-export function findClassModule(filter: (module: any) => boolean) : ClassModule | void {
+export const classMap: ClassModule[] = findAllModules((m: Module) => {
-    return classMap.find(m => filter(m));
+  if (typeof m == 'object' && !m.__esModule) {
+    const keys = Object.keys(m);
+    // special case some libraries
+    if (keys.length == 1 && m.version) return false;
+    // special case localization
+    if (keys.length > 1000 && m.AboutSettings) return false;
+
+    return keys.length > 0 && keys.every((k) => !Object.getOwnPropertyDescriptor(m, k)?.get && typeof m[k] == 'string');
+  }
+  return false;
+});
+
+export function findClass(name: string): string | void {
+  return classMap.find((m) => m?.[name])?.[name];
+}
+
+export function findClassModule(filter: (module: any) => boolean): ClassModule | void {
+  return classMap.find((m) => filter(m));
 }
 
 export function unminifyClass(minifiedClass: string): string | void {
-    for (let m of classMap) {
+  for (let m of classMap) {
-        for (let className of Object.keys(m)) {
+    for (let className of Object.keys(m)) {
-            if (m[className] == minifiedClass) return className;
+      if (m[className] == minifiedClass) return className;
-        }
     }
-}
+  }
+}

src/components/ButtonItem.tsx

@@ -7,9 +7,8 @@ export interface ButtonItemProps extends ItemProps {
   onClick?(e: MouseEvent): void;
   disabled?: boolean;
 }
-export const ButtonItem =
+export const ButtonItem = Object.values(CommonUIModule).find(
-  Object.values(CommonUIModule).find(
+  (mod: any) =>
-    (mod: any) =>
+    mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
-      mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
+    mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
-     mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+) as FC<ButtonItemProps>;
-  ) as FC<ButtonItemProps>;

src/components/Carousel.ts

@@ -20,4 +20,6 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   scrollToAlignment?: 'center';
 }
 
-export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as VFC<CarouselProps & RefAttributes<HTMLDivElement>>;
+export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as VFC<
+  CarouselProps & RefAttributes<HTMLDivElement>
+>;

src/components/ControlsList.tsx

@@ -1,9 +1,13 @@
-import { Export, findModuleExport } from '../webpack';
 import { FC } from 'react';
 
+import { Export, findModuleExport } from '../webpack';
+
 export interface ControlsListProps {
   alignItems?: 'left' | 'right' | 'center';
   spacing?: 'standard' | 'extra';
 }
 
-export const ControlsList: FC<ControlsListProps> = findModuleExport((e: Export) => e?.toString && e.toString().includes('().ControlsListChild') && e.toString().includes('().ControlsListOuterPanel'));
+export const ControlsList: FC<ControlsListProps> = findModuleExport(
+  (e: Export) =>
+    e?.toString && e.toString().includes('().ControlsListChild') && e.toString().includes('().ControlsListOuterPanel'),
+);

src/components/Dialog.tsx

@@ -11,7 +11,7 @@ export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
 export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps {
   /**
    * Enables/disables the focus around the button.
-   * 
+   *
    * @note
    * Default value depends on context, so setting it to `false` will enable it.
    */
@@ -19,25 +19,25 @@ export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps
 
   /**
    * Disables the button - assigned `on*` methods will not be invoked if clicked.
-   * 
+   *
    * @note
-   * Depending on where it is, it might still get focus. In such case it can be 
+   * Depending on where it is, it might still get focus. In such case it can be
    * partially disabled separately.
-   * 
+   *
    * @see focusable.
    */
   disabled?: boolean;
 
   /**
    * Enables/disables the navigation based focus on button - you won't be able to navigate to
-   * it via the gamepad or keyboard. 
+   * it via the gamepad or keyboard.
-   * 
+   *
    * @note
    * If set to `false`, it still can be clicked and **WILL** become focused until navigated away.
    * Depending on the context of where the button is, even a disabled button can focused.
    */
   focusable?: boolean;
-  
+
   onClick?(e: MouseEvent): void;
   onPointerDown?(e: PointerEvent): void;
   onPointerUp?(e: PointerEvent): void;

src/components/DialogCheckbox.tsx

@@ -18,16 +18,19 @@ export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProp
   onClick?(evt: Event): void;
 }
 
-export const DialogCheckbox = Object.values(findModule((m: any) => {
+export const DialogCheckbox = Object.values(
-  if (typeof m !== 'object') return false;
+  findModule((m: any) => {
-  for (const prop in m) {
+    if (typeof m !== 'object') return false;
-    if (m[prop]?.prototype?.GetPanelElementProps) return true;
+    for (const prop in m) {
-  }
+      if (m[prop]?.prototype?.GetPanelElementProps) return true;
-  return false;
+    }
-})).find((m: any) =>
+    return false;
-  m.contextType &&
+  }),
-  m.prototype?.render.toString().includes('fallback:') &&
+).find(
-  m?.prototype?.SetChecked &&
+  (m: any) =>
-  m?.prototype?.Toggle &&
+    m.contextType &&
-  m?.prototype?.GetPanelElementProps
+    m.prototype?.render.toString().includes('fallback:') &&
+    m?.prototype?.SetChecked &&
+    m?.prototype?.Toggle &&
+    m?.prototype?.GetPanelElementProps,
 ) as FC<DialogCheckboxProps>;

src/components/Field.tsx

@@ -23,4 +23,6 @@ export interface FieldProps extends FooterLegendProps {
   onClick?: (e: CustomEvent | MouseEvent) => void;
 }
 
-export const Field = findModuleExport((e: Export) => e?.render?.toString().includes('"shift-children-below"')) as FC<FieldProps & RefAttributes<HTMLDivElement>>;
+export const Field = findModuleExport((e: Export) => e?.render?.toString().includes('"shift-children-below"')) as FC<
+  FieldProps & RefAttributes<HTMLDivElement>
+>;

src/components/FocusRing.ts

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

src/components/Focusable.tsx

@@ -13,4 +13,6 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
   onCancel?: (e: CustomEvent) => void;
 }
 
-export const Focusable = findModuleExport((e: Export) => e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",')) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;
+export const Focusable = findModuleExport((e: Export) =>
+  e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'),
+) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;

src/components/FooterLegend.ts

@@ -36,7 +36,7 @@ export declare enum NavEntryPositionPreferences {
   LAST,
   MAINTAIN_X,
   MAINTAIN_Y,
-  PREFERRED_CHILD
+  PREFERRED_CHILD,
 }
 export interface GamepadEventDetail {
   button: number;
@@ -44,8 +44,8 @@ export interface GamepadEventDetail {
   source: number;
 }
 export declare type ActionDescriptionMap = {
-  [key in GamepadButton]?: ReactNode
+  [key in GamepadButton]?: ReactNode;
-}
+};
 export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
   actionDescriptionMap?: ActionDescriptionMap;

src/components/Marquee.tsx

@@ -15,4 +15,6 @@ export interface MarqueeProps {
   children: React.ReactNode;
 }
 
-export const Marquee: FC<MarqueeProps> = findModuleExport((e: Export) => e?.toString && e.toString().includes('.Marquee') && e.toString().includes('--fade-length'));
+export const Marquee: FC<MarqueeProps> = findModuleExport(
+  (e: Export) => e?.toString && e.toString().includes('.Marquee') && e.toString().includes('--fade-length'),
+);

src/components/Panel.tsx

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

src/components/ProgressBar.tsx

@@ -22,8 +22,14 @@ export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
   sOperationText?: ReactNode;
 }
 
-export const ProgressBar = findModuleExport((e: Export) => e?.toString()?.includes('.ProgressBar,"standard"==')) as VFC<ProgressBarProps>;
+export const ProgressBar = findModuleExport((e: Export) =>
+  e?.toString()?.includes('.ProgressBar,"standard"=='),
+) as VFC<ProgressBarProps>;
 
-export const ProgressBarWithInfo = findModuleExport((e: Export) => e?.toString()?.includes('.ProgressBarFieldStatus},')) as VFC<ProgressBarWithInfoProps>;
+export const ProgressBarWithInfo = findModuleExport((e: Export) =>
+  e?.toString()?.includes('.ProgressBarFieldStatus},'),
+) as VFC<ProgressBarWithInfoProps>;
 
-export const ProgressBarItem = findModuleExport((e: Export) => e?.toString()?.includes('"indeterminate","nTransitionSec"')) as VFC<ProgressBarItemProps>;
+export const ProgressBarItem = findModuleExport((e: Export) =>
+  e?.toString()?.includes('"indeterminate","nTransitionSec"'),
+) as VFC<ProgressBarItemProps>;

src/components/Scroll.tsx

@@ -2,10 +2,14 @@ import { FC, ReactNode } from 'react';
 
 import { Export, findModuleByExport, findModuleExport } from '../webpack';
 
-const ScrollingModule = findModuleByExport((e: Export) => e?.render?.toString?.().includes("{case\"x\":"));
+const ScrollingModule = findModuleByExport((e: Export) => e?.render?.toString?.().includes('{case"x":'));
 
 const ScrollingModuleProps = ScrollingModule ? Object.values(ScrollingModule) : [];
 
-export const ScrollPanel = ScrollingModuleProps.find((prop: any) => prop?.render?.toString?.().includes("{case\"x\":")) as FC<{ children?: ReactNode }>;
+export const ScrollPanel = ScrollingModuleProps.find((prop: any) =>
+  prop?.render?.toString?.().includes('{case"x":'),
+) as FC<{ children?: ReactNode }>;
 
-export const ScrollPanelGroup: FC<{ children?: ReactNode }> = findModuleExport((e: Export) => e?.render?.toString().includes(".FocusVisibleChild()),[])"));
+export const ScrollPanelGroup: FC<{ children?: ReactNode }> = findModuleExport((e: Export) =>
+  e?.render?.toString().includes('.FocusVisibleChild()),[])'),
+);

src/components/SidebarNavigation.tsx

@@ -23,4 +23,6 @@ export interface SidebarNavigationProps {
   onPageRequested?: (page: string) => void;
 }
 
-export const SidebarNavigation = findModuleExport((e: Export) => e?.toString()?.includes('"disableRouteReporting"')) as VFC<SidebarNavigationProps>;
+export const SidebarNavigation = findModuleExport((e: Export) =>
+  e?.toString()?.includes('"disableRouteReporting"'),
+) as VFC<SidebarNavigationProps>;

src/components/SteamSpinner.tsx

@@ -2,4 +2,6 @@ import { FC, SVGAttributes } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
-export const SteamSpinner = findModuleExport((e: Export) => e?.toString?.()?.includes('Steam Spinner') && e?.toString?.()?.includes('src')) as FC<SVGAttributes<SVGElement>>;
+export const SteamSpinner = findModuleExport(
+  (e: Export) => e?.toString?.()?.includes('Steam Spinner') && e?.toString?.()?.includes('src'),
+) as FC<SVGAttributes<SVGElement>>;

src/components/Tabs.tsx

@@ -109,8 +109,7 @@ try {
  * 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 =
+export const Tabs = (oldTabs ||
-  (oldTabs ||
   ((props: TabsProps) => {
     const found = tabsComponent;
     const [tc, setTC] = useState<FC<TabsProps>>(found);

src/components/index.ts

@@ -22,4 +22,4 @@ export * from './Tabs';
 export * from './TextField';
 export * from './Toggle';
 export * from './ToggleField';
-export * from './Scroll';
+export * from './Scroll';

src/custom-hooks/useQuickAccessVisible.tsx

@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react';
+
 import { getGamepadNavigationTrees } from '../utils';
 
 function getQuickAccessWindow(): Window | null {
   const navTrees = getGamepadNavigationTrees();
-  return navTrees.find((tree: any) => tree?.id === 'QuickAccess-NA')?.m_Root?.m_element?.ownerDocument.defaultView ?? null;
+  return (
+    navTrees.find((tree: any) => tree?.id === 'QuickAccess-NA')?.m_Root?.m_element?.ownerDocument.defaultView ?? null
+  );
 }
 
 /**

src/globals/SteamClient.ts

@@ -227,7 +227,7 @@ export interface LogoPosition {
   pinnedPosition: LogoPinPositions;
   nWidthPct: number;
   nHeightPct: number;
-};
+}
 
 export interface AppDetails {
   achievements: AppAchievements;

src/globals/index.ts

@@ -1,2 +1,2 @@
-export * from "./SteamClient";
+export * from './SteamClient';
-export * from "./stores";
+export * from './stores';

src/logger.ts

@@ -22,43 +22,26 @@ export const group = (name: string, ...args: any[]) => {
 
 export const groupEnd = (name: string, ...args: any[]) => {
   console.groupEnd();
-  if (args?.length > 0) console.log(
+  if (args?.length > 0)
-    `^ %c @decky/ui %c ${name} %c`,
+    console.log(
-    bgStyle1,
+      `^ %c @decky/ui %c ${name} %c`,
-    'background: #1abc9c; color: black;',
+      bgStyle1,
-    'background: transparent;',
+      'background: #1abc9c; color: black;',
-    ...args,
+      'background: transparent;',
-  );
+      ...args,
+    );
 };
 
 export const debug = (name: string, ...args: any[]) => {
-  console.debug(
+  console.debug(`%c @decky/ui %c ${name} %c`, bgStyle1, 'background: #1abc9c; color: black;', 'color: blue;', ...args);
-    `%c @decky/ui %c ${name} %c`,
-    bgStyle1,
-    'background: #1abc9c; color: black;',
-    'color: blue;',
-    ...args,
-  );
 };
 
 export const warn = (name: string, ...args: any[]) => {
-  console.warn(
+  console.warn(`%c @decky/ui %c ${name} %c`, bgStyle1, 'background: #ffbb00; color: black;', 'color: blue;', ...args);
-    `%c @decky/ui %c ${name} %c`,
-    bgStyle1,
-    'background: #ffbb00; color: black;',
-    'color: blue;',
-    ...args,
-  );
 };
 
 export const error = (name: string, ...args: any[]) => {
-  console.error(
+  console.error(`%c @decky/ui %c ${name} %c`, bgStyle1, 'background: #FF0000;', 'background: transparent;', ...args);
-    `%c @decky/ui %c ${name} %c`,
-    bgStyle1,
-    'background: #FF0000;',
-    'background: transparent;',
-    ...args,
-  );
 };
 
 class Logger {
@@ -90,5 +73,5 @@ class Logger {
     groupEnd(this.name, ...args);
   }
 }
-  
+
-export default Logger;
+export default Logger;

src/modules/index.ts

@@ -1 +1 @@
-export * from './Router';
+export * from './Router';

src/utils/react.ts

@@ -68,14 +68,16 @@ 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] || o['_reactRootContainer']?._internalRoot?.current
+    o[Object.keys(o).find((k) => k.startsWith('__reactContainer$')) as string] ||
+    o['_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] || o[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string]
+    o[Object.keys(o).find((k) => k.startsWith('__reactFiber')) as string] ||
+    o[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string]
   );
 }
 

src/utils/static-classes.ts

@@ -543,153 +543,153 @@ type GamepadTabbedPageClasses = Record<
 >;
 
 type GamepadContextMenuClasses = Record<
-  | "duration-app-launch"
+  | 'duration-app-launch'
-  | "BasicContextMenuModal"
+  | 'BasicContextMenuModal'
-  | "BasicContextMenuHeader"
+  | 'BasicContextMenuHeader'
-  | "BasicContextMenuHeaderShrinkableSpacing"
+  | 'BasicContextMenuHeaderShrinkableSpacing'
-  | "BasicContextMenuContainer"
+  | 'BasicContextMenuContainer'
-  | "slideInAnimation"
+  | 'slideInAnimation'
-  | "contextMenu"
+  | 'contextMenu'
-  | "contextMenuContents"
+  | 'contextMenuContents'
-  | "hasSubMenu"
+  | 'hasSubMenu'
-  | "contextMenuFade"
+  | 'contextMenuFade'
-  | "contextMenuItem"
+  | 'contextMenuItem'
-  | "active"
+  | 'active'
-  | "Selected"
+  | 'Selected'
-  | "Focused"
+  | 'Focused'
-  | "Positive"
+  | 'Positive'
-  | "Emphasis"
+  | 'Emphasis'
-  | "Destructive"
+  | 'Destructive'
-  | "Capitalized"
+  | 'Capitalized'
-  | "MenuSectionHeader"
+  | 'MenuSectionHeader'
-  | "UpperCase"
+  | 'UpperCase'
-  | "SubMenu"
+  | 'SubMenu'
-  | "ContextMenuSeparator"
+  | 'ContextMenuSeparator'
-  | "Label"
+  | 'Label'
-  | "Arrow"
+  | 'Arrow'
-  | "ItemFocusAnim-darkerGrey-nocolor"
+  | 'ItemFocusAnim-darkerGrey-nocolor'
-  | "ItemFocusAnim-darkerGrey"
+  | 'ItemFocusAnim-darkerGrey'
-  | "ItemFocusAnim-darkGrey"
+  | 'ItemFocusAnim-darkGrey'
-  | "ItemFocusAnim-grey"
+  | 'ItemFocusAnim-grey'
-  | "ItemFocusAnimBorder-darkGrey"
+  | 'ItemFocusAnimBorder-darkGrey'
-  | "ItemFocusAnim-green"
+  | 'ItemFocusAnim-green'
-  | "focusAnimation"
+  | 'focusAnimation'
-  | "hoverAnimation",
+  | 'hoverAnimation',
   string
 >;
 
 type AchievementClasses = Record<
-  | "nAchievementHeight"
+  | 'nAchievementHeight'
-  | "nGlobalAchievementHeight"
+  | 'nGlobalAchievementHeight'
-  | "nAchievementsListTitleHeight"
+  | 'nAchievementsListTitleHeight'
-  | "nAchievementGap"
+  | 'nAchievementGap'
-  | "AchievementList"
+  | 'AchievementList'
-  | "ListTitle"
+  | 'ListTitle'
-  | "AchievementListItemBase"
+  | 'AchievementListItemBase'
-  | "Container"
+  | 'Container'
-  | "Content"
+  | 'Content'
-  | "Right"
+  | 'Right'
-  | "Footer"
+  | 'Footer'
-  | "AchievementTitle"
+  | 'AchievementTitle'
-  | "AchievementDescription"
+  | 'AchievementDescription'
-  | "AchievementGlobalPercentage"
+  | 'AchievementGlobalPercentage'
-  | "InBody"
+  | 'InBody'
-  | "VerticalContent"
+  | 'VerticalContent'
-  | "UnlockDate"
+  | 'UnlockDate'
-  | "AlignEnd"
+  | 'AlignEnd'
-  | "ProgressBar"
+  | 'ProgressBar'
-  | "ProgressCount"
+  | 'ProgressCount'
-  | "AchievementContent"
+  | 'AchievementContent'
-  | "HiddenAchievementContent"
+  | 'HiddenAchievementContent'
-  | "FriendAchievementFooter"
+  | 'FriendAchievementFooter'
-  | "GlobalPercentage"
+  | 'GlobalPercentage'
-  | "UserUnlockDateTime"
+  | 'UserUnlockDateTime'
-  | "GlobalAchievementsListHeader"
+  | 'GlobalAchievementsListHeader'
-  | "SearchField"
+  | 'SearchField'
-  | "Avatar"
+  | 'Avatar'
-  | "HeaderText"
+  | 'HeaderText'
-  | "GlobalAchievementListItem"
+  | 'GlobalAchievementListItem'
-  | "UnlockContainer"
+  | 'UnlockContainer'
-  | "Info"
+  | 'Info'
-  | "Title"
+  | 'Title'
-  | "Description"
+  | 'Description'
-  | "Percent"
+  | 'Percent'
-  | "ImageContainer"
+  | 'ImageContainer'
-  | "ProgressFill"
+  | 'ProgressFill'
-  | "SpoilerWarning"
+  | 'SpoilerWarning'
-  | "Hidden"
+  | 'Hidden'
-  | "ComparisonAchieverColumn"
+  | 'ComparisonAchieverColumn'
-  | "ComparisonAchieverInfo"
+  | 'ComparisonAchieverInfo'
-  | "ProgressContainer"
+  | 'ProgressContainer'
-  | "ProgressLabel"
+  | 'ProgressLabel'
-  | "Secondary"
+  | 'Secondary'
-  | "AvatarContainer"
+  | 'AvatarContainer'
-  | "Unachieved",
+  | 'Unachieved',
   string
 >;
 
 type MainMenuAppRunningClasses = Record<
-  | "duration-app-launch"
+  | 'duration-app-launch'
-  | "ScrollMask"
+  | 'ScrollMask'
-  | "HideMask"
+  | 'HideMask'
-  | "MainMenuAppRunning"
+  | 'MainMenuAppRunning'
-  | "MenuOpen"
+  | 'MenuOpen'
-  | "NavigationColumn"
+  | 'NavigationColumn'
-  | "ControllerColumnFocused"
+  | 'ControllerColumnFocused'
-  | "NavColumnFocused"
+  | 'NavColumnFocused'
-  | "NavigationBox"
+  | 'NavigationBox'
-  | "NavigationMenuItem"
+  | 'NavigationMenuItem'
-  | "ItemFocusAnim-darkerGrey"
+  | 'ItemFocusAnim-darkerGrey'
-  | "Active"
+  | 'Active'
-  | "Disabled"
+  | 'Disabled'
-  | "SwitchAppsTitle"
+  | 'SwitchAppsTitle'
-  | "SelectableAppWindow"
+  | 'SelectableAppWindow'
-  | "ActiveDot"
+  | 'ActiveDot'
-  | "NavigationMenuItemSeparator"
+  | 'NavigationMenuItemSeparator'
-  | "AppColumn"
+  | 'AppColumn'
-  | "FocusedColumn"
+  | 'FocusedColumn'
-  | "AppColumnContent"
+  | 'AppColumnContent'
-  | "ActiveContent"
+  | 'ActiveContent'
-  | "CurrentGameBackground"
+  | 'CurrentGameBackground'
-  | "CurrentGameLogo"
+  | 'CurrentGameLogo'
-  | "OverlayAchievements"
+  | 'OverlayAchievements'
-  | "Container"
+  | 'Container'
-  | "OverlayGuides"
+  | 'OverlayGuides'
-  | "OverlayNotes"
+  | 'OverlayNotes'
-  | "OverlayInplaceBrowser"
+  | 'OverlayInplaceBrowser'
-  | "ItemFocusAnim-darkerGrey-nocolor"
+  | 'ItemFocusAnim-darkerGrey-nocolor'
-  | "ItemFocusAnim-darkGrey"
+  | 'ItemFocusAnim-darkGrey'
-  | "ItemFocusAnim-grey"
+  | 'ItemFocusAnim-grey'
-  | "ItemFocusAnimBorder-darkGrey"
+  | 'ItemFocusAnimBorder-darkGrey'
-  | "ItemFocusAnim-green"
+  | 'ItemFocusAnim-green'
-  | "focusAnimation"
+  | 'focusAnimation'
-  | "hoverAnimation",
+  | 'hoverAnimation',
   string
 >;
 
 type BasicAppDetailsSectionStylerClasses = Record<
-  | "duration-app-launch"
+  | 'duration-app-launch'
-  | "headerPadding"
+  | 'headerPadding'
-  | "Header"
+  | 'Header'
-  | "AppDetailsContent"
+  | 'AppDetailsContent'
-  | "AppDetailsContainer"
+  | 'AppDetailsContainer'
-  | "AppDetailsRoot"
+  | 'AppDetailsRoot'
-  | "GameInfoContainer"
+  | 'GameInfoContainer'
-  | "GameInfoQuickLinks"
+  | 'GameInfoQuickLinks'
-  | "GameInfoCollections"
+  | 'GameInfoCollections'
-  | "CollectionsHeader"
+  | 'CollectionsHeader'
-  | "PlaySection"
+  | 'PlaySection'
-  | "ActionRow"
+  | 'ActionRow'
-  | "AppDetailSectionList"
+  | 'AppDetailSectionList'
-  | "AppActionButton"
+  | 'AppActionButton'
-  | "ActionButtonAndStatusPanel"
+  | 'ActionButtonAndStatusPanel'
-  | "AppButtons"
+  | 'AppButtons'
-  | "InvertFocusedIcon"
+  | 'InvertFocusedIcon'
-  | "DeckVerifiedFeedbackContainer"
+  | 'DeckVerifiedFeedbackContainer'
-  | "DeckVerifiedFeedbackConfirmationContainer"
+  | 'DeckVerifiedFeedbackConfirmationContainer'
-  | "DeckVerifiedFeedbackButton"
+  | 'DeckVerifiedFeedbackButton'
-  | "DeckVerifiedFeedbackQuestion"
+  | 'DeckVerifiedFeedbackQuestion'
-  | "DeckVerifiedFeedbackConfirmation",
+  | 'DeckVerifiedFeedbackConfirmation',
   string
 >;
 
@@ -700,9 +700,7 @@ export const quickAccessMenuClasses: QuickAccessMenuClasses = findModule(
  * @depreciated please use quickAccessMenuClasses instead
  */
 export const staticClasses = quickAccessMenuClasses;
-export const scrollPanelClasses: ScrollPanelClasses = findModule(
+export const scrollPanelClasses: ScrollPanelClasses = findModule((mod) => typeof mod === 'object' && mod?.ScrollPanel);
-  (mod) => typeof mod === 'object' && mod?.ScrollPanel,
-);
 /**
  * @depreciated please use scrollPanelClasses instead
  */
@@ -717,33 +715,27 @@ export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule
 export const updaterFieldClasses: UpdaterFieldClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.OOBEUpdateStatusContainer,
 );
-export const playSectionClasses: PlaySectionClasses = findModule(
+export const playSectionClasses: PlaySectionClasses = findModule((mod) => typeof mod === 'object' && mod?.Container);
-  (mod) => typeof mod === 'object' && mod?.Container,
-);
 export const gamepadSliderClasses: GamepadSliderClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.SliderControlPanelGroup,
 );
 export const appDetailsHeaderClasses: AppDetailsHeaderClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.TopCapsule,
 );
-export const appDetailsClasses: AppDetailsClasses = findModule(
+export const appDetailsClasses: AppDetailsClasses = findModule((mod) => typeof mod === 'object' && mod?.HeaderLoaded);
-  (mod) => typeof mod === 'object' && mod?.HeaderLoaded,
+export const gamepadUIClasses: GamepadUIClasses = findModule((mod) => typeof mod === 'object' && mod?.BasicUiRoot);
-);
-export const gamepadUIClasses: GamepadUIClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.BasicUiRoot,
-);
 export const gamepadTabbedPageClasses: GamepadTabbedPageClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.GamepadTabbedPage
+  (mod) => typeof mod === 'object' && mod?.GamepadTabbedPage,
 );
 export const gamepadContextMenuClasses: GamepadContextMenuClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.BasicContextMenuModal
+  (mod) => typeof mod === 'object' && mod?.BasicContextMenuModal,
 );
 export const achievementClasses: AchievementClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.AchievementListItemBase
+  (mod) => typeof mod === 'object' && mod?.AchievementListItemBase,
 );
 export const mainMenuAppRunningClasses: MainMenuAppRunningClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.MainMenuAppRunning
+  (mod) => typeof mod === 'object' && mod?.MainMenuAppRunning,
 );
 export const basicAppDetailsSectionStylerClasses: BasicAppDetailsSectionStylerClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.AppDetailsRoot
+  (mod) => typeof mod === 'object' && mod?.AppDetailsRoot,
 );

src/webpack.ts

@@ -1,4 +1,4 @@
-import Logger from "./logger";
+import Logger from './logger';
 
 declare global {
   interface Window {
@@ -6,7 +6,7 @@ declare global {
   }
 }
 
-const logger = new Logger("Webpack");
+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 Module = any;
@@ -19,11 +19,11 @@ export let modules: any = [];
 
 function initModuleCache() {
   const startTime = performance.now();
-  logger.group("Webpack Module Init");
+  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
-  let webpackRequire!: ((id: any) => Module) & {m: object};
+  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
   window.webpackChunksteamui.push([
@@ -34,7 +34,9 @@ function initModuleCache() {
     },
   ]);
 
-  logger.log("Initializing all modules. Errors here likely do not matter, as they are usually just failing module side effects.");
+  logger.log(
+    'Initializing all modules. Errors here likely do not matter, as they are usually just failing module side effects.',
+  );
 
   // Loop over every module ID
   for (let i of Object.keys(webpackRequire.m)) {
@@ -44,7 +46,7 @@ function initModuleCache() {
         modules.push(module);
       }
     } catch (e) {
-      logger.debug("Ignoring require error for module", i, e);
+      logger.debug('Ignoring require error for module', i, e);
     }
   }
 
@@ -60,7 +62,10 @@ export const findModule = (filter: FilterFn) => {
   }
 };
 
-export const findModuleDetailsByExport = (filter: ExportFilterFn, minExports?: number): [module: Module | undefined, moduleExport: any, exportName: any] => {
+export const findModuleDetailsByExport = (
+  filter: ExportFilterFn,
+  minExports?: number,
+): [module: Module | undefined, moduleExport: any, exportName: any] => {
   for (const m of modules) {
     if (!m) continue;
     for (const mod of [m.default, m]) {
@@ -79,15 +84,15 @@ export const findModuleDetailsByExport = (filter: ExportFilterFn, minExports?: n
     }
   }
   return [undefined, undefined, undefined];
-}
+};
 
 export const findModuleByExport = (filter: ExportFilterFn, minExports?: number) => {
   return findModuleDetailsByExport(filter, minExports)?.[0];
-}
+};
 
 export const findModuleExport = (filter: ExportFilterFn, minExports?: number) => {
   return findModuleDetailsByExport(filter, minExports)?.[1];
-}
+};
 
 /**
  * @deprecated use findModuleExport instead
@@ -124,6 +129,8 @@ export const CommonUIModule = modules.find((m: Module) => {
   return false;
 });
 
-export const IconsModule = findModuleByExport(e => e?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()));
+export const IconsModule = findModuleByExport(
+  (e) => e?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()),
+);
 
-export const ReactRouter = findModuleByExport(e => e.computeRootMatch);
+export const ReactRouter = findModuleByExport((e) => e.computeRootMatch);

typedoc.json

@@ -1,4 +1,4 @@
 {
-    "categorizeByGroup": false,
+  "categorizeByGroup": false,
-    "excludeExternals": true
+  "excludeExternals": true
-}
+}