chore(release): 3.7.12 [CI SKIP]

fix(Item): change title and description types to ReactNode

.github/workflows/docs.yaml

@@ -29,12 +29,13 @@ jobs:
       - name: Setup | Dependencies
         run: |
           cd lib
-          npm ci
+          npm i -g pnpm
+          pnpm i --frozen-lockfile
 
       - name: Build Docs
         run: |
           cd lib
-          npm run docs -- --out ../wiki/api-docs/decky-frontend-lib
+          pnpm run docs --out ../wiki/api-docs/decky-frontend-lib
 
       - name: Commit files
         run: |

CHANGELOG.md

@@ -1,3 +1,67 @@
+## [3.7.12](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.11...v3.7.12) (2022-10-29)
+
+
+### Bug Fixes
+
+* **Item:** change title and description types to ReactNode ([0ed054f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0ed054fae972ffd36299b142bd693f80388480a6))
+
+## [3.7.11](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.10...v3.7.11) (2022-10-28)
+
+
+### Bug Fixes
+
+* **package.json:** train wtf ([789e163](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/789e16380fd01a6b46188c7a1174a55c18c8dead))
+
+## [3.7.10](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.9...v3.7.10) (2022-10-28)
+
+
+### Bug Fixes
+
+* **tabs:** shut up typescript ([75f3588](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/75f35882f27252e1255208953a6e801c68d5dcec))
+
+## [3.7.9](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.8...v3.7.9) (2022-10-28)
+
+
+### Bug Fixes
+
+* **tabs:** fix on stable for real this time i think ([a074277](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a074277bb58428a64295154ebf96aceb96e654a7))
+
+## [3.7.8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.7...v3.7.8) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** fix this time for real ([#44](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/44)) ([cfef1dc](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cfef1dc320a5f649d66c3af365cd6aa2d88e46ea))
+
+## [3.7.7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.6...v3.7.7) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** remove incompatible properties ([#42](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/42)) ([0010a1f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0010a1fceedc417aa25b709d066341da97d42444))
+
+## [3.7.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.5...v3.7.6) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** add override for onClick type ([#43](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/43)) ([fe75dfb](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/fe75dfb5f4fb1ec9417cc07dc714c71820945748))
+
+## [3.7.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.4...v3.7.5) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** add types for focusing field ([#41](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/41)) ([bedb6b8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bedb6b8bb90e021a60e47a93709d6f48e0bd75c6))
+
+## [3.7.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.3...v3.7.4) (2022-10-26)
+
+
+### Bug Fixes
+
+* **docs:** change arg format ([ed0b92d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/ed0b92de2ec13a585f6524b45eef0ab538d87448))
+* **tabs:** fix on stable ([f16e0b2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f16e0b29f8e1de500e8f436db659d1ad99d4eaa6))
+
 ## [3.7.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.2...v3.7.3) (2022-10-25)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.7.3",
+  "version": "3.7.12",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -54,6 +54,7 @@
     "husky": "^8.0.1",
     "import-sort-style-module": "^6.0.0",
     "jest": "^27.5.1",
+    "minimist": "^1.2.6",
     "prettier": "^2.7.1",
     "prettier-plugin-import-sort": "^0.0.7",
     "semantic-release": "^19.0.3",
@@ -78,8 +79,5 @@
       "style": "module",
       "parser": "typescript"
     }
-  },
-  "dependencies": {
-    "minimist": "^1.2.6"
   }
 }

pnpm-lock.yaml

@@ -25,9 +25,6 @@ specifiers:
   typedoc-plugin-missing-exports: ^1.0.0
   typescript: ^4.6.3
 
-dependencies:
-  minimist: 1.2.6
-
 devDependencies:
   '@commitlint/cli': 17.0.2
   '@commitlint/config-conventional': 17.0.2
@@ -41,6 +38,7 @@ devDependencies:
   husky: 8.0.1
   import-sort-style-module: 6.0.0
   jest: 27.5.1
+  minimist: 1.2.6
   prettier: 2.7.1
   prettier-plugin-import-sort: 0.0.7_prettier@2.7.1
   semantic-release: 19.0.3
@@ -3735,6 +3733,7 @@ packages:
 
   /minimist/1.2.6:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+    dev: true
 
   /modify-values/1.0.1:
     resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}

src/deck-components/Field.tsx

@@ -1,9 +1,9 @@
-import { FC, HTMLAttributes, ReactNode, RefAttributes } from 'react';
+import { FC, ReactNode, RefAttributes } from 'react';
 
 import { findModuleChild } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
 
-export interface FieldProps extends HTMLAttributes<HTMLDivElement>, FooterLegendProps {
+export interface FieldProps extends FooterLegendProps {
   label?: ReactNode;
   bottomSeparator?: 'standard' | 'thick' | 'none';
   description?: ReactNode;
@@ -18,6 +18,9 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement>, FooterLegend
   highlightOnFocus?: boolean;
   indentLevel?: number;
   verticalAlignment?: 'center' | 'none'; // Alligns inline label with children
+  focusable?: boolean; // Allows to get focus without any focusable children or on* callbacks
+  onActivate?: (e: CustomEvent | MouseEvent) => void;
+  onClick?: (e: CustomEvent | MouseEvent) => void;
 }
 
 export const Field = findModuleChild((m) => {

src/deck-components/Item.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 
 export interface ItemProps {
-  label?: string;
+  label?: ReactNode;
-  description?: string;
+  description?: ReactNode;
   layout?: 'below' | 'inline';
   icon?: ReactNode;
   bottomSeparator?: 'standard' | 'thick' | 'none';

src/deck-components/Tabs.tsx

@@ -1,6 +1,7 @@
-import { createElement, FC, ReactNode, useEffect, useState } from 'react';
+import { FC, ReactNode, createElement, useEffect, useState } from 'react';
 
 import { fakeRenderComponent, findInReactTree, sleep } from '../utils';
+import { findModule } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
 import { SteamSpinner } from './SteamSpinner';
 
@@ -64,56 +65,70 @@ export interface TabsProps {
   autoFocusContents?: boolean;
 }
 
-declare global {
-  interface Window {
-    DeckyPluginLoader: any;
-  }
-}
-
 let tabsComponent: any;
 
 const getTabs = async () => {
-    if (tabsComponent) return tabsComponent
+  if (tabsComponent) return tabsComponent;
-    while (!window?.DeckyPluginLoader?.routerHook?.routes) {
+  // @ts-ignore
-        console.debug("[DFL:Tabs]: Waiting for Decky router...")
+  while (!window?.DeckyPluginLoader?.routerHook?.routes) {
-        await sleep(500);
+    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 = findModule((m: any) => {
+    if (typeof m !== 'object') return false;
+    for (let prop in m) {
+      if (m[prop]?.Unbleed) return true;
     }
-    return tabsComponent = fakeRenderComponent(
+    return false;
-        () => {
+  });
-          return findInReactTree(
+  if (oldTabsModule)
-            findInReactTree(
+    oldTabs = Object.values(oldTabsModule).find((x: any) => x?.type?.toString()?.includes('((function(){'));
-              window.DeckyPluginLoader.routerHook.routes
+} catch (e) {
-                .find((x: any) => x.props.path == '/library/app/:appid/achievements')
+  console.error('Error finding oldTabs:', e);
-                .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: {} }),
-        },
-    );
 }
 
 /**
  * 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 = ((props: TabsProps) => {
+export const Tabs =
+  oldTabs ||
+  (((props: TabsProps) => {
     const found = tabsComponent;
     const [tc, setTC] = useState<FC<TabsProps>>(found);
     useEffect(() => {
-        if (found) return;
+      if (found) return;
-        (async()=> {
+      (async () => {
-            console.debug("[DFL:Tabs]: Finding component...")
+        console.debug('[DFL:Tabs]: Finding component...');
-            const t = await getTabs();
+        const t = await getTabs();
-            console.debug("[DFL:Tabs]: Found!")
+        console.debug('[DFL:Tabs]: Found!');
-            setTC(t);
+        setTC(t);
-        })();
+      })();
-    }, [])
+    }, []);
-    console.log("tc", tc);
+    console.log('tc', tc);
-    return tc ? createElement(tc, props) : <SteamSpinner/>;
+    return tc ? createElement(tc, props) : <SteamSpinner />;
-}) as FC<TabsProps>;
+  }) as FC<TabsProps>);

src/utils/index.ts

@@ -10,7 +10,7 @@ export function sleep(ms: number) {
 }
 
 /**
- * Finds the SP window, since it is a render target as of {10-19-2022}'s beta
+ * Finds the SP window, since it is a render target as of 10-19-2022's beta
  */
 export function findSP(): Window {
   // old (SP as host)