@decky/ui 4.2.2 → 4.3.1

package/dist/components/Menu.js

@@ -1,9 +1,7 @@
-import { fakeRenderComponent } from '../utils';
-import { findModuleExport } from '../webpack';
+import { findModuleByExport, findModuleExport } from '../webpack';
 export const showContextMenu = findModuleExport((e) => typeof e === 'function' && e.toString().includes('GetContextMenuManagerFromWindow(')
     && e.toString().includes('.CreateContextMenuInstance('));
 export const Menu = findModuleExport((e) => e?.prototype?.HideIfSubmenu && e?.prototype?.HideMenu);
-export const MenuGroup = findModuleExport((e) => (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 = MenuGoupModule && Object.values(MenuGoupModule).find((e) => typeof e == "function" && e?.toString()?.includes("bInGamepadUI:"));
 export const MenuItem = findModuleExport((e) => e?.render?.toString()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter));

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -1,5 +1,6 @@
 export * from './patcher';
 export * from './react';
+export * from './react-patching';
 export * from './static-classes';
 export function joinClassNames(...classes) {
     return classes.join(' ');

package/dist/utils/patcher.d.ts

@@ -2,7 +2,7 @@ export declare let callOriginal: symbol;
 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;
     property: string;
@@ -15,4 +15,3 @@ export interface Patch {
 export declare function beforePatch(object: any, property: string, handler: (args: any[]) => any, options?: PatchOptions): Patch;
 export declare function afterPatch(object: any, property: string, handler: (args: any[], ret: any) => any, options?: PatchOptions): Patch;
 export declare function replacePatch(object: any, property: string, handler: (args: any[]) => any, options?: PatchOptions): Patch;
-export {};

package/dist/utils/react-patching.d.ts

@@ -0,0 +1,7 @@
+import { GenericPatchHandler } from './patcher';
+export type GenericNodeStep = (node: any) => any;
+export type NodeStep = GenericNodeStep;
+export type ReactPatchHandler = GenericPatchHandler;
+export declare function setReactPatcherLoggingEnabled(value?: boolean): void;
+export declare function setReactPatcherPerformanceLoggingEnabled(value?: boolean): void;
+export declare function createReactTreePatcher(steps: NodeStep[], handler: GenericPatchHandler, debugName?: string): GenericPatchHandler;

package/dist/utils/react-patching.js

@@ -0,0 +1,75 @@
+import Logger from '../logger';
+import { afterPatch } from './patcher';
+import { wrapReactClass, wrapReactType } from './react';
+let loggingEnabled = false;
+let perfLoggingEnabled = false;
+export function setReactPatcherLoggingEnabled(value = true) { loggingEnabled = value; }
+;
+export function setReactPatcherPerformanceLoggingEnabled(value = true) { perfLoggingEnabled = value; }
+;
+function patchComponent(node, handler, steps, step, caches, logger, prop = 'type') {
+    loggingEnabled && logger.group('Patching node:', node);
+    switch (typeof node?.[prop]) {
+        case 'function':
+            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) {
+                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);
+                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, handler, steps, step, caches, logger) {
+    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, steps, step, caches, logger) {
+    loggingEnabled && logger.debug(`Creating handler for step ${step}`);
+    return (_, tree) => handleStep(tree, handler, steps, step, caches, logger);
+}
+export function createReactTreePatcher(steps, handler, debugName = 'ReactPatch') {
+    const caches = [];
+    const logger = new Logger(`ReactTreePatcher -> ${debugName}`);
+    loggingEnabled && logger.debug('Init with options:', steps, debugName);
+    return createStepHandler(handler, steps, 0, caches, logger);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.2.2",
+  "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",

package/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;

package/src/utils/index.ts

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

package/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;

package/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);
+}