chore(release): 4.3.1 [CI SKIP]

.github/workflows/docs.yaml

@@ -12,19 +12,19 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           path: lib
       - name: Setup | Checkout wiki
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: SteamDeckHomebrew/wiki
           path: wiki
           ssh-key: ${{ secrets.SSH_DEPLOY_KEY }}
           persist-credentials: true
       - name: Setup | Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Setup | Dependencies

.github/workflows/release.yaml

@@ -12,11 +12,11 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Setup | Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
       - name: Setup | Dependencies

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [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)
+
+
+### Features
+
+* **utils:** react tree patching api ([2c3a9f8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2c3a9f81de0b63364bb31f4a4dd8e559784ece16))
+
+## [4.2.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.2.1...v4.2.2) (2024-07-04)
+
+
+### Bug Fixes
+
+* **SteamSpinner:** add background option ([c04f024](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c04f024b34b1148c965850965127f9fd44204157))
+
 ## [4.2.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.2.0...v4.2.1) (2024-06-27)
 
 

package.json

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

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;

src/components/SteamSpinner.ts

@@ -1,7 +1,12 @@
-import { FC, SVGAttributes } from 'react';
+import { FC, ReactNode, SVGAttributes } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
+interface SteamSpinnerProps {
+  children?: ReactNode;
+  background?: "transparent"; // defaults to black seemingly, but only "transparent" is checked against
+}
+
 export const SteamSpinner = findModuleExport(
   (e: Export) => e?.toString?.()?.includes('Steam Spinner') && e?.toString?.()?.includes('src'),
-) as FC<SVGAttributes<SVGElement>>;
+) as FC<SVGAttributes<SVGElement> & SteamSpinnerProps>;

src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './patcher';
 export * from './react';
+export * from './react-patching';
 export * from './static-classes';
 
 declare global {

src/utils/patcher.ts

@@ -6,7 +6,7 @@ export interface PatchOptions {
   singleShot?: boolean;
 }
 
-type GenericPatchHandler = (args: any[], ret?: any) => any;
+export type GenericPatchHandler = (args: any[], ret?: any) => any;
 
 export interface Patch {
   original: Function;

src/utils/react-patching.ts

@@ -0,0 +1,100 @@
+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
+type PatchedComponentCache = Map<any, any>;
+export type GenericNodeStep = (node: any) => any;
+// to patch a specific method of a class component other than render. TODO implement
+// export type ClassNodeStep = [finder: GenericNodeStep, method: string];
+// export type NodeStep = GenericNodeStep | ClassNodeStep;
+export type NodeStep = GenericNodeStep;
+export type ReactPatchHandler = GenericPatchHandler;
+
+// These will get *very* spammy.
+let loggingEnabled = false;
+let perfLoggingEnabled = false;
+
+export function setReactPatcherLoggingEnabled(value: boolean = true) { loggingEnabled = value };
+export function setReactPatcherPerformanceLoggingEnabled(value: boolean = true) { perfLoggingEnabled = value };
+
+function patchComponent(node: any, handler: GenericPatchHandler, steps: NodeStep[], step: number, caches: PatchedComponentCache[], logger: Logger, prop: string = 'type') {
+    loggingEnabled && logger.group('Patching node:', node);
+    // We need to take extra care to not mutate the original node.type
+    switch (typeof node?.[prop]) {
+        case 'function':
+            // Function component
+            const patch = afterPatch(node, prop, steps[step + 1] ? createStepHandler(handler, steps, step + 1, caches, logger) : handler);
+            loggingEnabled && logger.debug('Patched a function component', patch);
+            break;
+        case 'object':
+            if (node[prop]?.prototype?.render) {
+                // Class component
+                // TODO handle patching custom methods
+                wrapReactClass(node);
+                const patch = afterPatch(node[prop].prototype, 'render', steps[step + 1] ? createStepHandler(handler, steps, step + 1, caches, logger) : handler);
+                loggingEnabled && logger.debug('Patched class component', patch);
+            } else {
+                loggingEnabled && logger.debug('Patching forwardref/memo');
+                wrapReactType(node, prop);
+                // Step down the object
+                patchComponent(node[prop], handler, steps, step, caches, logger, node[prop]?.render ? 'render' : 'type'); 
+            }
+            break;
+        default:
+            logger.error('Unhandled component type', node);
+            break;
+    }
+    loggingEnabled && logger.groupEnd();
+}
+
+function handleStep(tree: any, handler: GenericPatchHandler, steps: NodeStep[], step: number, caches: PatchedComponentCache[], logger: Logger): any {
+    const startTime = (loggingEnabled || perfLoggingEnabled) ? performance.now() : 0;
+    const stepHandler = steps[step];
+    const cache = caches[step] || (caches[step] = new Map());
+    loggingEnabled && logger.debug(`Patch step ${step} running`, { tree, stepHandler, step, caches });
+
+    const node = stepHandler(tree);
+    if (node && node.type) {
+        loggingEnabled && logger.debug('Found node', node);
+    } else if (node) {
+        loggingEnabled && logger.error('Found node without type. Something is probably wrong.', node);
+        return tree;
+    } else {
+        loggingEnabled && logger.warn('Found no node. Depending on your usecase, this might be fine.', node);
+        return tree;
+    }
+
+    let cachedType;
+    if (cachedType = cache.get(node.type)) {
+        loggingEnabled && logger.debug('Found cached patched component', node);
+        node.type = cachedType;
+        (loggingEnabled || perfLoggingEnabled) && logger.debug(`Patch step ${step} took ${performance.now() - startTime}ms with cache`);
+        return tree;
+    }
+
+    const originalType = node.type;
+
+    patchComponent(node, handler, steps, step, caches, logger);
+
+    cache.set(originalType, node.type);
+
+    (loggingEnabled || perfLoggingEnabled) && logger.debug(`Patch step ${step} took ${performance.now() - startTime}ms`);
+    return tree;
+};
+
+function createStepHandler(handler: GenericPatchHandler, steps: NodeStep[], step: number, caches: PatchedComponentCache[], logger: Logger) {
+    loggingEnabled && logger.debug(`Creating handler for step ${step}`);
+    return (_: any, tree: any) => handleStep(tree, handler, steps, step, caches, logger);
+}
+
+// TODO handle createReactTreePatcher inside handler and cache it (or warn)
+export function createReactTreePatcher(steps: NodeStep[], handler: GenericPatchHandler, debugName: string = 'ReactPatch'): GenericPatchHandler {
+    const caches: PatchedComponentCache[] = [];
+
+    const logger = new Logger(`ReactTreePatcher -> ${debugName}`);
+
+    loggingEnabled && logger.debug('Init with options:', steps, debugName);
+
+    return createStepHandler(handler, steps, 0, caches, logger);
+}