@decky/ui 4.3.1 → 4.4.0

package/dist/utils/index.d.ts

@@ -1,7 +1,8 @@
 export * from './patcher';
-export * from './react';
-export * from './react-patching';
 export * from './static-classes';
+export * from './react/react';
+export * from './react/fc';
+export * from './react/treepatcher';
 declare global {
     var FocusNavController: any;
     var GamepadNavTree: any;

package/dist/utils/index.js

@@ -1,7 +1,8 @@
 export * from './patcher';
-export * from './react';
-export * from './react-patching';
 export * from './static-classes';
+export * from './react/react';
+export * from './react/fc';
+export * from './react/treepatcher';
 export function joinClassNames(...classes) {
     return classes.join(' ');
 }

package/dist/utils/react/fc.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+export interface FCTrampoline {
+    component: FC;
+}
+export declare function setFCTrampolineLoggingEnabled(value?: boolean): void;
+export declare function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoline;

package/dist/utils/react/fc.js

@@ -0,0 +1,74 @@
+import { createElement } from 'react';
+import { applyHookStubs, removeHookStubs } from './react';
+import Logger from '../../logger';
+let loggingEnabled = false;
+export function setFCTrampolineLoggingEnabled(value = true) { loggingEnabled = value; }
+;
+let logger = new Logger('FCTrampoline');
+export function injectFCTrampoline(component, customHooks) {
+    const newComponent = function (...args) {
+        loggingEnabled && logger.debug("new component rendering with props", args);
+        return component.apply(this, args);
+    };
+    const userComponent = { component: newComponent };
+    component.prototype.render = function (...args) {
+        loggingEnabled && logger.debug("rendering trampoline", args, this);
+        return createElement(userComponent.component, this.props, this.props.children);
+    };
+    component.prototype.isReactComponent = true;
+    let stubsApplied = false;
+    let oldCreateElement = window.SP_REACT.createElement;
+    const applyStubsIfNeeded = () => {
+        if (!stubsApplied) {
+            loggingEnabled && logger.debug("applied stubs");
+            stubsApplied = true;
+            applyHookStubs(customHooks);
+            window.SP_REACT.createElement = () => {
+                loggingEnabled && logger.debug("createElement hook called");
+                return Object.create(component.prototype);
+            };
+        }
+    };
+    const removeStubsIfNeeded = () => {
+        if (stubsApplied) {
+            loggingEnabled && logger.debug("removed stubs");
+            stubsApplied = false;
+            removeHookStubs();
+            window.SP_REACT.createElement = oldCreateElement;
+        }
+    };
+    Object.defineProperty(component, "contextType", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get contexttype", this, stubsApplied);
+            applyStubsIfNeeded();
+            return this._contextType;
+        },
+        set: function (value) {
+            this._contextType = value;
+        }
+    });
+    Object.defineProperty(component, "getDerivedStateFromProps", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied);
+            removeStubsIfNeeded();
+            return this._getDerivedStateFromProps;
+        },
+        set: function (value) {
+            this._getDerivedStateFromProps = value;
+        }
+    });
+    Object.defineProperty(component.prototype, "updater", {
+        configurable: true,
+        get: function () {
+            return this._updater;
+        },
+        set: function (value) {
+            loggingEnabled && logger.debug("set updater", this, value, stubsApplied);
+            removeStubsIfNeeded();
+            return this._updater = value;
+        }
+    });
+    return userComponent;
+}

package/dist/utils/{react.d.ts → react/react.d.ts}

@@ -5,6 +5,8 @@ declare global {
     }
 }
 export declare function createPropListRegex(propList: string[], fromStart?: boolean): RegExp;
+export declare function applyHookStubs(customHooks?: any): any;
+export declare function removeHookStubs(): void;
 export declare function fakeRenderComponent(fun: Function, customHooks?: any): any;
 export declare function wrapReactType(node: any, prop?: any): any;
 export declare function wrapReactClass(node: any, prop?: any): any;

package/dist/utils/{react.js → react/react.js}

@@ -12,10 +12,11 @@ export function createPropListRegex(propList, fromStart = true) {
     });
     return new RegExp(regexString);
 }
-export function fakeRenderComponent(fun, customHooks = {}) {
+let oldHooks = {};
+export function applyHookStubs(customHooks = {}) {
     const hooks = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
         .current;
-    let oldHooks = {
+    oldHooks = {
         useContext: hooks.useContext,
         useCallback: hooks.useCallback,
         useLayoutEffect: hooks.useLayoutEffect,
@@ -35,8 +36,18 @@ export function fakeRenderComponent(fun, customHooks = {}) {
         return [val, (n) => (val = n)];
     };
     Object.assign(hooks, customHooks);
-    const res = fun(hooks);
+    return hooks;
+}
+export function removeHookStubs() {
+    const hooks = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
+        .current;
     Object.assign(hooks, oldHooks);
+    oldHooks = {};
+}
+export function fakeRenderComponent(fun, customHooks) {
+    const hooks = applyHookStubs(customHooks);
+    const res = fun(hooks);
+    removeHookStubs();
     return res;
 }
 export function wrapReactType(node, prop = 'type') {

package/dist/utils/{react-patching.d.ts → react/treepatcher.d.ts}

@@ -1,4 +1,4 @@
-import { GenericPatchHandler } from './patcher';
+import { GenericPatchHandler } from '../patcher';
 export type GenericNodeStep = (node: any) => any;
 export type NodeStep = GenericNodeStep;
 export type ReactPatchHandler = GenericPatchHandler;

package/dist/utils/{react-patching.js → react/treepatcher.js}

@@ -1,5 +1,5 @@
-import Logger from '../logger';
-import { afterPatch } from './patcher';
+import Logger from '../../logger';
+import { afterPatch } from '../patcher';
 import { wrapReactClass, wrapReactType } from './react';
 let loggingEnabled = false;
 let perfLoggingEnabled = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "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/utils/index.ts

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

package/src/utils/react/fc.ts

@@ -0,0 +1,109 @@
+// Utilities for patching function components
+import { createElement, type FC } from 'react';
+import { applyHookStubs, removeHookStubs } from './react';
+import Logger from '../../logger';
+
+export interface FCTrampoline {
+    component: FC
+}
+
+let loggingEnabled = false;
+
+export function setFCTrampolineLoggingEnabled(value: boolean = true) { loggingEnabled = value };
+
+let logger = new Logger('FCTrampoline');
+
+/**
+ * Directly hooks a function component from its reference, redirecting it to a user-patchable wrapper in its returned object.
+ * This only works if the original component when called directly returns either nothing, null, or another child element.
+ * 
+ * This works by tricking react into thinking it's a class component by cleverly working around its class component checks,
+ * keeping the unmodified function component intact as a mostly working constructor (as it is impossible to direcly modify a function),
+ * stubbing out hooks to prevent errors by detecting setter/getter triggers that occur direcly before/after the class component is instantiated by react,
+ * and creating a fake class component render method to trampoline out into your own handler.
+ * 
+ * Due to the nature of this method of hooking a component, please only use this where it is *absolutely necessary.*
+ * Incorrect hook stubs can cause major instability, be careful when writing them. Refer to fakeRenderComponent for the hook stub implementation.
+ * Make sure your hook stubs can handle all the cases they could possibly need to within the component you are injecting into.
+ * You do not need to worry about its children, as they are never called due to the first instance never actually rendering.
+ */
+export function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoline {
+    // It needs to be wrapped so React doesn't infinitely call the fake class render method.
+    const newComponent = function (this: any, ...args: any) {
+        loggingEnabled && logger.debug("new component rendering with props", args);
+        return component.apply(this, args);
+    }
+    const userComponent = { component: newComponent };
+    // Create a fake class component render method
+    component.prototype.render = function (...args: any[]) {
+        loggingEnabled && logger.debug("rendering trampoline", args, this);
+        // Pass through rendering via creating the component as a child so React can use function component logic instead of class component logic (setting up the hooks)
+        return createElement(userComponent.component, this.props, this.props.children);
+    };
+    component.prototype.isReactComponent = true;
+    let stubsApplied = false;
+    let oldCreateElement = window.SP_REACT.createElement;
+
+    const applyStubsIfNeeded = () => {
+        if (!stubsApplied) {
+            loggingEnabled && logger.debug("applied stubs");
+            stubsApplied = true;
+            applyHookStubs(customHooks)
+            // we have to redirect this to return an object with component's prototype as a constructor returning a value overrides its prototype
+            window.SP_REACT.createElement = () => {
+                loggingEnabled && logger.debug("createElement hook called");
+                return Object.create(component.prototype);
+            };
+        }
+    }
+
+    const removeStubsIfNeeded = () => {
+        if (stubsApplied) {
+            loggingEnabled && logger.debug("removed stubs");
+            stubsApplied = false;
+            removeHookStubs();
+            window.SP_REACT.createElement = oldCreateElement;
+        }
+    }
+
+    // Accessed two times, once directly before class instantiation, and again in some extra logic we don't need to worry about that we hanlde below just in case.
+    Object.defineProperty(component, "contextType", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get contexttype", this, stubsApplied);
+            applyStubsIfNeeded();
+            return this._contextType;
+        },
+        set: function (value) {
+            this._contextType = value;
+        }
+    });
+
+    // Undoes the second contextType access we can't detect shortly before render before it's able to cause any damage
+    Object.defineProperty(component, "getDerivedStateFromProps", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied);
+            removeStubsIfNeeded();
+            return this._getDerivedStateFromProps;
+        },
+        set: function (value) {
+            this._getDerivedStateFromProps = value;
+        }
+    });
+
+    // Set directly after class is instantiated
+    Object.defineProperty(component.prototype, "updater", {
+        configurable: true,
+        get: function () {
+            return this._updater;
+        },
+        set: function (value) {
+            loggingEnabled && logger.debug("set updater", this, value, stubsApplied);
+            removeStubsIfNeeded();
+            return this._updater = value;
+        }
+    });
+
+    return userComponent;
+}

package/src/utils/{react.ts → react/react.ts}

@@ -30,13 +30,15 @@ export function createPropListRegex(propList: string[], fromStart: boolean = tru
   return new RegExp(regexString);
 }
 
-export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
+let oldHooks = {};
+
+export function applyHookStubs(customHooks: any = {}): any {
   const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
     .current;
 
   // TODO: add more hooks
 
-  let oldHooks = {
+  oldHooks = {
     useContext: hooks.useContext,
     useCallback: hooks.useCallback,
     useLayoutEffect: hooks.useLayoutEffect,
@@ -60,9 +62,22 @@ export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
 
   Object.assign(hooks, customHooks);
 
-  const res = fun(hooks);
+  return hooks;
+}
 
+export function removeHookStubs() {
+  const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
+    .current;
   Object.assign(hooks, oldHooks);
+  oldHooks = {};
+}
+
+export function fakeRenderComponent(fun: Function, customHooks?: any): any {
+  const hooks = applyHookStubs(customHooks);
+
+  const res = fun(hooks); // TODO why'd we do this?
+
+  removeHookStubs();
 
   return res;
 }

package/src/utils/{react-patching.ts → react/treepatcher.ts}

@@ -1,5 +1,5 @@
-import Logger from '../logger';
-import { GenericPatchHandler, afterPatch } from './patcher';
+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