chore(deps-dev): bump tough-cookie from 4.1.2 to 4.1.4 (#108)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/release.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup | Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Setup | Dependencies
         run: npm i -g pnpm && pnpm i --frozen-lockfile
       - name: Build

.releaserc.json

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

CHANGELOG.md

@@ -1,3 +1,57 @@
+# [3.25.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.24.5...v3.25.0) (2024-03-09)
+
+
+### Bug Fixes
+
+* **staticclasses:** unbreak on latest beta ([17b99df](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/17b99dfed8e4e146d0f4f5e78a950db5b10ae2b4))
+
+
+### Features
+
+* **classMapper:** add class mapper ([a8eeb91](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a8eeb917e22ef72905d448e159d70375ebf77ba6))
+
+## [3.24.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.24.4...v3.24.5) (2024-02-03)
+
+
+### Bug Fixes
+
+* **finds:** make modal and scroll components work on latest betaa ([c2b0fad](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c2b0fad298512aa8778c677275bd497bd8f7b00e))
+
+## [3.24.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.24.3...v3.24.4) (2024-01-22)
+
+
+### Bug Fixes
+
+* **types:** fix incorrect `as` on many components leading to any types ([bb12921](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bb129218634b77ddb1d73b0fe38a91898073707c))
+
+## [3.24.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.24.2...v3.24.3) (2024-01-20)
+
+
+### Bug Fixes
+
+* **router:** wait 2s if internal navigators init fails ([95d977d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/95d977df452d3b73b007c98854deab1842fa6fbf))
+
+## [3.24.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.24.1...v3.24.2) (2024-01-20)
+
+
+### Bug Fixes
+
+* **navigation:** Fix on chromium 109 ([#100](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/100)) ([ebf496b](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/ebf496bf61cffa1a5205b4a094fd2279011bffa9))
+
+## [3.24.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.24.0...v3.24.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **utils/react:** support react 18, add getReactRoot ([11dd82b](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/11dd82bbb1814ac4d2fa9d381372e325daba2558))
+
+# [3.24.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.23.1...v3.24.0) (2023-12-03)
+
+
+### Features
+
+* **static-classes:** add BasicAppDetailsSectionStylerClasses ([#99](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/99)) ([e27b638](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e27b638d26e41332b1554dbd55ca0c55a1821138))
+
 ## [3.23.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.23.0...v3.23.1) (2023-11-09)
 
 

package.json

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

src/class-mapper.ts

@@ -0,0 +1,34 @@
+import { Module, findAllModules } from "./webpack";
+
+export interface ClassModule {
+    [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 {
+    return classMap.find(m => filter(m));
+}
+
+export function unminifyClass(minifiedClass: string): string | void {
+    for (let m of classMap) {
+        for (let className of Object.keys(m)) {
+            if (m[className] == minifiedClass) return className;
+        }
+    }
+}

src/deck-components/ButtonItem.tsx

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

src/deck-components/Modal.tsx

@@ -155,15 +155,24 @@ export const ModalRoot = (Object.values(
     }
   })) as FC<ModalRootProps>;
 
-interface SimpleModalProps{
-  active?: boolean,
-  children: ReactNode
+interface SimpleModalProps {
+  active?: boolean;
+  children: ReactNode;
 }
 
-const ModalModule = findModule((mod) => {
-  if (typeof mod !== 'object' || !mod.__esModule) return undefined;
-  if (mod.SimpleModal && mod.ModalPosition) return mod;
-})
+const ModalModule = findModule((mod: any) => {
+  if (typeof mod !== 'object') return false;
+  for (let prop in mod) {
+    if (Object.keys(mod).length > 4 && mod[prop]?.toString().includes('.ModalPosition,fallback:')) return true;
+  }
+  return false;
+});
 
-export const SimpleModal = ModalModule.SimpleModal  as FC<SimpleModalProps>
-export const ModalPosition = ModalModule.ModalPosition  as FC<SimpleModalProps>
+const ModalModuleProps = ModalModule ? Object.values(ModalModule) : [];
+
+export const SimpleModal = ModalModuleProps.find(prop => {
+  const string = prop?.toString()
+  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>;

src/deck-components/Panel.tsx

@@ -29,5 +29,5 @@ export interface PanelSectionRowProps {
 }
 // New as of Feb 22 2023 Beta || Old
 export const PanelSectionRow =
-  mod.PanelSectionRow ||
-  (Object.values(mod).filter((exp: any) => !exp?.toString()?.includes('.PanelSection'))[0] as FC<PanelSectionRowProps>);
+  (mod.PanelSectionRow ||
+  Object.values(mod).filter((exp: any) => !exp?.toString()?.includes('.PanelSection'))[0]) as FC<PanelSectionRowProps>;

src/deck-components/Router.tsx

@@ -136,7 +136,7 @@ try {
           InternalNavigators = findModuleChild((m: any) => {
             if (typeof m !== 'object') return undefined;
             for (let prop in m) {
-              if (m[prop]?.GetNavigator) {
+              if (m[prop]?.GetNavigator && m[prop]?.SetNavigator) {
                 return m[prop];
               }
             }
@@ -148,7 +148,7 @@ try {
       initInternalNavigators();
       while (!InternalNavigators?.AppProperties) {
         console.log('[DFL:Router]: Trying to init internal navigators again');
-        await sleep(100);
+        await sleep(2000);
         initInternalNavigators();
       }
     }
@@ -160,7 +160,7 @@ try {
       NavigateToAppProperties: InternalNavigators?.AppProperties || Router.NavigateToAppProperties?.bind(Router),
       NavigateToExternalWeb: InternalNavigators?.ExternalWeb || Router.NavigateToExternalWeb?.bind(Router),
       NavigateToInvites: InternalNavigators?.Invites || Router.NavigateToInvites?.bind(Router),
-      NavigateToChat: Router.NavigateToChat?.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(

src/deck-components/Scroll.tsx

@@ -1,14 +1,22 @@
-import { FC, ReactNode } from "react";
-import { findModuleChild, findModule } from "../webpack";
+import { FC, ReactNode } from 'react';
+
+import { findModule, findModuleChild } from '../webpack';
 
 const ScrollingModule = findModule((mod) => {
-  if (typeof mod !== 'object' || !mod.__esModule) return undefined;
-  if (mod.ScrollPanel) return mod;
+  if (typeof mod !== 'object') return false;
+  for (let prop in mod) {
+    if (mod[prop]?.render?.toString?.().includes("{case\"x\":")) return true;
+  }
+  return false;
 });
 
-export const ScrollPanel: FC<{ children?: ReactNode; }> = ScrollingModule.ScrollPanel;
+const ScrollingModuleProps = ScrollingModule ? Object.values(ScrollingModule) : [];
 
-export const ScrollPanelGroup: FC<{ children?: ReactNode; }> = findModuleChild((mod) => {
-  if (typeof mod !== 'object' || !mod.__esModule) return undefined;
-  return mod.ScrollPanelGroup;
-})
+export const ScrollPanel = ScrollingModuleProps.find((prop: any) => prop?.render?.toString?.().includes("{case\"x\":")) as FC<{ children?: ReactNode }>;
+
+export const ScrollPanelGroup: FC<{ children?: ReactNode }> = findModuleChild((mod) => {
+  if (typeof mod !== 'object') return undefined;
+  for (let prop in mod) {
+    if (mod[prop]?.render?.toString().includes(".FocusVisibleChild()),[])")) return mod[prop];
+  }
+});

src/deck-components/Tabs.tsx

@@ -112,12 +112,12 @@ try {
 }
 
 /**
- * Tabs component as used in the library and media tabs. See {@link TabsProps}
+ * 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) => {
+  (oldTabs ||
+  ((props: TabsProps) => {
     const found = tabsComponent;
     const [tc, setTC] = useState<FC<TabsProps>>(found);
     useEffect(() => {
@@ -131,4 +131,4 @@ export const Tabs =
     }, []);
     console.log('tc', tc);
     return tc ? createElement(tc, props) : <SteamSpinner />;
-  }) as FC<TabsProps>);
+  })) as FC<TabsProps>;

src/deck-components/static-classes.ts

@@ -667,53 +667,83 @@ type MainMenuAppRunningClasses = Record<
   string
 >;
 
+type BasicAppDetailsSectionStylerClasses = Record<
+  | "duration-app-launch"
+  | "headerPadding"
+  | "Header"
+  | "AppDetailsContent"
+  | "AppDetailsContainer"
+  | "AppDetailsRoot"
+  | "GameInfoContainer"
+  | "GameInfoQuickLinks"
+  | "GameInfoCollections"
+  | "CollectionsHeader"
+  | "PlaySection"
+  | "ActionRow"
+  | "AppDetailSectionList"
+  | "AppActionButton"
+  | "ActionButtonAndStatusPanel"
+  | "AppButtons"
+  | "InvertFocusedIcon"
+  | "DeckVerifiedFeedbackContainer"
+  | "DeckVerifiedFeedbackConfirmationContainer"
+  | "DeckVerifiedFeedbackButton"
+  | "DeckVerifiedFeedbackQuestion"
+  | "DeckVerifiedFeedbackConfirmation",
+  string
+>;
+
 export const quickAccessMenuClasses: QuickAccessMenuClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.Title?.includes('quickaccessmenu'),
+  (mod) => typeof mod === 'object' && mod?.Title && mod?.QuickAccessMenu && mod?.BatteryDetailsLabels,
 );
 /**
  * @depreciated please use quickAccessMenuClasses instead
  */
 export const staticClasses = quickAccessMenuClasses;
 export const scrollPanelClasses: ScrollPanelClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.ScrollPanel?.includes('scrollpanel'),
+  (mod) => typeof mod === 'object' && mod?.ScrollPanel,
 );
 /**
  * @depreciated please use scrollPanelClasses instead
  */
 export const scrollClasses = scrollPanelClasses;
+// TODO refactor to use class mapper
 export const gamepadDialogClasses: GamepadDialogClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.GamepadDialogContent?.includes('gamepaddialog'),
+  (mod) => typeof mod === 'object' && mod?.GamepadDialogContent,
 );
 export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule(
-  (mod) => typeof mod === 'object' && typeof mod?.PanelSection === 'string' && mod?.PanelSection?.includes('quickaccesscontrols'),
+  (mod) => typeof mod === 'object' && typeof mod?.PanelSection === 'string' && mod?.PanelSection,
 );
 export const updaterFieldClasses: UpdaterFieldClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.OOBEUpdateStatusContainer?.includes('updaterfield'),
+  (mod) => typeof mod === 'object' && mod?.OOBEUpdateStatusContainer,
 );
 export const playSectionClasses: PlaySectionClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.Container?.includes('appdetailsplaysection'),
+  (mod) => typeof mod === 'object' && mod?.Container,
 );
 export const gamepadSliderClasses: GamepadSliderClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.SliderControlPanelGroup?.includes('gamepadslider'),
+  (mod) => typeof mod === 'object' && mod?.SliderControlPanelGroup,
 );
 export const appDetailsHeaderClasses: AppDetailsHeaderClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.TopCapsule?.includes('sharedappdetailsheader'),
+  (mod) => typeof mod === 'object' && mod?.TopCapsule,
 );
 export const appDetailsClasses: AppDetailsClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.HeaderLoaded?.includes('appdetails_'),
+  (mod) => typeof mod === 'object' && mod?.HeaderLoaded,
 );
 export const gamepadUIClasses: GamepadUIClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.BasicUiRoot?.includes('gamepadui_'),
+  (mod) => typeof mod === 'object' && mod?.BasicUiRoot,
 );
 export const gamepadTabbedPageClasses: GamepadTabbedPageClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.GamepadTabbedPage?.includes('gamepadtabbedpage_')
+  (mod) => typeof mod === 'object' && mod?.GamepadTabbedPage
 );
 export const gamepadContextMenuClasses: GamepadContextMenuClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.BasicContextMenuModal?.includes('gamepadcontextmenu')
+  (mod) => typeof mod === 'object' && mod?.BasicContextMenuModal
 );
 export const achievementClasses: AchievementClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.AchievementListItemBase?.includes('achievementslist')
+  (mod) => typeof mod === 'object' && mod?.AchievementListItemBase
 );
 export const mainMenuAppRunningClasses: MainMenuAppRunningClasses = findModule(
-  (mod) => typeof mod === 'object' && mod?.MainMenuAppRunning?.includes('mainmenuapprunning')
-);
+  (mod) => typeof mod === 'object' && mod?.MainMenuAppRunning
+);
+export const basicAppDetailsSectionStylerClasses: BasicAppDetailsSectionStylerClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.AppDetailsRoot
+);

src/index.ts

@@ -6,3 +6,4 @@ export * from './deck-hooks';
 export * from './plugin';
 export * from './webpack';
 export * from './utils';
+export * from './class-mapper';

src/utils/react.ts

@@ -58,13 +58,25 @@ export function wrapReactClass(node: any, prop: any = 'type') {
     return node[prop];
   } else {
     const cls = node[prop];
-    const wrappedCls = class extends cls { static __DECKY_WRAPPED = true; };
+    const wrappedCls = class extends cls {
+      static __DECKY_WRAPPED = true;
+    };
     return (node[prop] = wrappedCls);
   }
 }
 
+export function getReactRoot(o: HTMLElement | Element | Node) {
+  return (
+    o[Object.keys(o).find((k) => k.startsWith('__reactContainer$')) as string] ||
+    o['_reactRootContainer']?._internalRoot?.current
+  );
+}
+
 export function getReactInstance(o: HTMLElement | Element | Node) {
-  return o[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string];
+  return (
+    o[Object.keys(o).find((k) => k.startsWith('__reactFiber')) as string] ||
+    o[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string]
+  );
 }
 
 // Based on https://github.com/GooseMod/GooseMod/blob/9ef146515a9e59ed4e25665ed365fd72fc0dcf23/src/util/react.js#L20