@decky/ui 4.0.3 → 4.1.0

package/README.md

@@ -25,3 +25,6 @@ If you would like a feature added to decky-frontend-lib, please request it via a
 If you want to start making a plugin with decky-frontend-lib, please direct your attention to the [decky-plugin-template](https://github.com/SteamDeckHomebrew/decky-plugin-template) repository.
 
 This library can be found on [npm](https://www.npmjs.com/package/decky-frontend-lib) and as such you can pull it without a local copy for your project as needed.
+
+Tips for fixing failing module finds after Steam updates:
+- `Object.entries(DFL)` can point out any undefined exports

package/dist/components/ButtonItem.js

@@ -1,3 +1,5 @@
 import { CommonUIModule } from '../webpack';
-export const ButtonItem = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
-    mod?.render?.toString()?.includes('childrenContainerWidth:"min"'));
+import { createPropListRegex } from '../utils';
+const buttonItemRegex = createPropListRegex(["highlightOnFocus", "childrenContainerWidth"], false);
+export const ButtonItem = Object.values(CommonUIModule).find((mod) => (mod?.render?.toString && buttonItemRegex.test(mod.render.toString())) ||
+    mod?.render?.toString?.().includes('childrenContainerWidth:"min"'));

package/dist/components/Dialog.js

@@ -1,8 +1,15 @@
 import { CommonUIModule } from '../webpack';
-const CommonDialogDivs = Object.values(CommonUIModule).filter((m) => typeof m === 'object' && m?.render?.toString().includes('"div",Object.assign({},'));
+const CommonDialogDivs = Object.values(CommonUIModule).filter((m) => typeof m === 'object' && m?.render?.toString().includes('createElement("div",{...') ||
+    m?.render?.toString().includes('createElement("div",Object.assign({},'));
 const MappedDialogDivs = new Map(Object.values(CommonDialogDivs).map((m) => {
-    const renderedDiv = m.render({});
-    return [renderedDiv.props.className.split(' ')[0], m];
+    try {
+        const renderedDiv = m.render({});
+        return [renderedDiv.props.className.split(' ')[0], m];
+    }
+    catch (e) {
+        console.error("[DFL:Dialog]: failed to render common dialog component", e);
+        return [null, null];
+    }
 }));
 export const DialogHeader = MappedDialogDivs.get('DialogHeader');
 export const DialogSubHeader = MappedDialogDivs.get('DialogSubHeader');
@@ -12,8 +19,6 @@ export const DialogBodyText = MappedDialogDivs.get('DialogBodyText');
 export const DialogBody = MappedDialogDivs.get('DialogBody');
 export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection');
 export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader');
-export const DialogButtonPrimary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('DialogButton') && mod?.render?.toString()?.includes('Primary'));
-export const DialogButtonSecondary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('Object.assign({type:"button"') &&
-    mod?.render?.toString()?.includes('DialogButton') &&
-    mod?.render?.toString()?.includes('Secondary'));
+export const DialogButtonPrimary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Primary"'));
+export const DialogButtonSecondary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Secondary"'));
 export const DialogButton = DialogButtonSecondary;

package/dist/components/Dropdown.js

@@ -1,3 +1,5 @@
 import { CommonUIModule } from '../webpack';
+import { createPropListRegex } from '../utils';
 export const Dropdown = Object.values(CommonUIModule).find((mod) => mod?.prototype?.SetSelectedOption && mod?.prototype?.BuildMenu);
-export const DropdownItem = Object.values(CommonUIModule).find((mod) => mod?.toString()?.includes('"dropDownControlRef","description"'));
+const dropdownItemRegex = createPropListRegex(["dropDownControlRef", "description"], false);
+export const DropdownItem = Object.values(CommonUIModule).find((mod) => mod?.toString && dropdownItemRegex.test(mod.toString()));

package/dist/components/Focusable.js

@@ -1,2 +1,4 @@
 import { findModuleExport } from '../webpack';
-export const Focusable = findModuleExport((e) => e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'));
+import { createPropListRegex } from '../utils';
+const focusableRegex = createPropListRegex(["flow-children", "onActivate", "onCancel", "focusClassName", "focusWithinClassName"]);
+export const Focusable = findModuleExport((e) => e?.render?.toString && focusableRegex.test(e.render.toString()));

package/dist/components/Menu.js

@@ -1,6 +1,7 @@
 import { fakeRenderComponent } from '../utils';
 import { findModuleExport } from '../webpack';
-export const showContextMenu = findModuleExport((e) => typeof e === 'function' && e.toString().includes('stopPropagation))'));
+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) ||

package/dist/components/ProgressBar.js

@@ -1,4 +1,6 @@
 import { findModuleExport } from '../webpack';
+import { createPropListRegex } from '../utils';
 export const ProgressBar = findModuleExport((e) => e?.toString()?.includes('.ProgressBar,"standard"=='));
 export const ProgressBarWithInfo = findModuleExport((e) => e?.toString()?.includes('.ProgressBarFieldStatus},'));
-export const ProgressBarItem = findModuleExport((e) => e?.toString()?.includes('"indeterminate","nTransitionSec"'));
+const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);
+export const ProgressBarItem = findModuleExport((e) => e?.toString && progressBarItemRegex.test(e.toString()));

package/dist/components/SidebarNavigation.js

@@ -1,2 +1,4 @@
 import { findModuleExport } from '../webpack';
-export const SidebarNavigation = findModuleExport((e) => e?.toString()?.includes('"disableRouteReporting"'));
+import { createPropListRegex } from '../utils';
+const sidebarNavigationRegex = createPropListRegex(["pages", "fnSetNavigateToPage", "disableRouteReporting"]);
+export const SidebarNavigation = findModuleExport((e) => e?.toString && sidebarNavigationRegex.test(e.toString()));

package/dist/components/Spinner.js

@@ -1,2 +1,2 @@
 import { IconsModule } from '../webpack';
-export const Spinner = Object.values(IconsModule).find((mod) => mod?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()));
+export const Spinner = Object.values(IconsModule)?.find((mod) => mod?.toString && /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()));

package/dist/utils/react.d.ts

@@ -4,6 +4,7 @@ declare global {
         SP_REACT: typeof React;
     }
 }
+export declare function createPropListRegex(propList: string[], fromStart?: boolean): RegExp;
 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

@@ -2,6 +2,16 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
     if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
     return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
 };
+export function createPropListRegex(propList, fromStart = true) {
+    let regexString = fromStart ? "const\{" : "";
+    propList.forEach((prop, propIdx) => {
+        regexString += `"?${prop}"?:[a-zA-Z_$]{1,2}`;
+        if (propIdx < propList.length - 1) {
+            regexString += ",";
+        }
+    });
+    return new RegExp(regexString);
+}
 export function fakeRenderComponent(fun, customHooks = {}) {
     const hooks = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
         .current;

package/dist/webpack.js

@@ -98,5 +98,5 @@ export const CommonUIModule = modules.find((m) => {
     }
     return false;
 });
-export const IconsModule = findModuleByExport((e) => e?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()));
+export const IconsModule = findModuleByExport((e) => e?.toString && /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()));
 export const ReactRouter = findModuleByExport((e) => e.computeRootMatch);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.0.3",
+  "version": "4.1.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/components/ButtonItem.ts

@@ -2,13 +2,15 @@ import { FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
 import { ItemProps } from './Item';
+import { createPropListRegex } from '../utils';
 
 export interface ButtonItemProps extends ItemProps {
   onClick?(e: MouseEvent): void;
   disabled?: boolean;
 }
+const buttonItemRegex = createPropListRegex(["highlightOnFocus", "childrenContainerWidth"], false);
 export const ButtonItem = Object.values(CommonUIModule).find(
   (mod: any) =>
-    mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
-    mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+    (mod?.render?.toString && buttonItemRegex.test(mod.render.toString())) || 
+    mod?.render?.toString?.().includes('childrenContainerWidth:"min"'),
 ) as FC<ButtonItemProps>;

package/src/components/Dialog.ts

@@ -52,13 +52,19 @@ export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps
 }
 
 const CommonDialogDivs = Object.values(CommonUIModule).filter(
-  (m: any) => typeof m === 'object' && m?.render?.toString().includes('"div",Object.assign({},'),
+  (m: any) => typeof m === 'object' && m?.render?.toString().includes('createElement("div",{...') ||
+  m?.render?.toString().includes('createElement("div",Object.assign({},'),
 );
 const MappedDialogDivs = new Map(
   Object.values(CommonDialogDivs).map((m: any) => {
-    const renderedDiv = m.render({});
-    // Take only the first class name segment as it identifies the element we want
-    return [renderedDiv.props.className.split(' ')[0], m];
+    try {
+      const renderedDiv = m.render({});
+      // Take only the first class name segment as it identifies the element we want
+      return [renderedDiv.props.className.split(' ')[0], m];
+    } catch (e) {
+      console.error("[DFL:Dialog]: failed to render common dialog component", e);
+      return [null, null];
+    }
   }),
 );
 
@@ -72,14 +78,11 @@ export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection
 export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader') as FC<DialogCommonProps>;
 
 export const DialogButtonPrimary = Object.values(CommonUIModule).find(
-  (mod: any) => mod?.render?.toString()?.includes('DialogButton') && mod?.render?.toString()?.includes('Primary'),
+  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Primary"'),
 ) as FC<DialogButtonProps>;
 
 export const DialogButtonSecondary = Object.values(CommonUIModule).find(
-  (mod: any) =>
-    mod?.render?.toString()?.includes('Object.assign({type:"button"') &&
-    mod?.render?.toString()?.includes('DialogButton') &&
-    mod?.render?.toString()?.includes('Secondary'),
+  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Secondary"')
 ) as FC<DialogButtonProps>;
 
 // This is the "main" button. The Primary can act as a submit button,

package/src/components/Dropdown.ts

@@ -2,6 +2,7 @@ import { ReactNode, FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
 import { ItemProps } from './Item';
+import { createPropListRegex } from '../utils';
 
 export interface SingleDropdownOption {
   data: any;
@@ -44,6 +45,7 @@ export const Dropdown = Object.values(CommonUIModule).find(
 
 export interface DropdownItemProps extends DropdownProps, ItemProps {}
 
+const dropdownItemRegex = createPropListRegex(["dropDownControlRef", "description"], false);
 export const DropdownItem = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.toString()?.includes('"dropDownControlRef","description"'),
+  mod?.toString && dropdownItemRegex.test(mod.toString()),
 ) as FC<DropdownItemProps>;

package/src/components/Focusable.ts

@@ -2,6 +2,7 @@ import { HTMLAttributes, ReactNode, RefAttributes, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
+import { createPropListRegex } from '../utils';
 
 export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLegendProps {
   children: ReactNode;
@@ -13,6 +14,8 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
   onCancel?: (e: CustomEvent) => void;
 }
 
+const focusableRegex = createPropListRegex(["flow-children", "onActivate", "onCancel", "focusClassName", "focusWithinClassName"]);
+
 export const Focusable = findModuleExport((e: Export) =>
-  e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'),
+  e?.render?.toString && focusableRegex.test(e.render.toString())
 ) as FC<FocusableProps & RefAttributes<HTMLDivElement>>;

package/src/components/Menu.ts

@@ -5,7 +5,8 @@ import { Export, findModuleExport } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
 
 export const showContextMenu: (children: ReactNode, parent?: EventTarget) => void = findModuleExport(
-  (e: Export) => typeof e === 'function' && e.toString().includes('stopPropagation))'),
+  (e: Export) => typeof e === 'function' && e.toString().includes('GetContextMenuManagerFromWindow(')
+  && e.toString().includes('.CreateContextMenuInstance('),
 );
 
 export interface MenuProps extends FooterLegendProps {

package/src/components/ProgressBar.ts

@@ -2,6 +2,7 @@ import { ReactNode, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 import { ItemProps } from './Item';
+import { createPropListRegex } from '../utils';
 
 export interface ProgressBarItemProps extends ItemProps {
   indeterminate?: boolean;
@@ -30,6 +31,7 @@ export const ProgressBarWithInfo = findModuleExport((e: Export) =>
   e?.toString()?.includes('.ProgressBarFieldStatus},'),
 ) as FC<ProgressBarWithInfoProps>;
 
+const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);
 export const ProgressBarItem = findModuleExport((e: Export) =>
-  e?.toString()?.includes('"indeterminate","nTransitionSec"'),
+  e?.toString && progressBarItemRegex.test(e.toString()),
 ) as FC<ProgressBarItemProps>;

package/src/components/SidebarNavigation.ts

@@ -1,6 +1,7 @@
 import { ReactNode, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
+import { createPropListRegex } from '../utils';
 
 export interface SidebarNavigationPage {
   title: ReactNode;
@@ -23,6 +24,7 @@ export interface SidebarNavigationProps {
   onPageRequested?: (page: string) => void;
 }
 
+const sidebarNavigationRegex = createPropListRegex(["pages", "fnSetNavigateToPage", "disableRouteReporting"]);
 export const SidebarNavigation = findModuleExport((e: Export) =>
-  e?.toString()?.includes('"disableRouteReporting"'),
+  e?.toString && sidebarNavigationRegex.test(e.toString()),
 ) as FC<SidebarNavigationProps>;

package/src/components/Spinner.ts

@@ -3,6 +3,6 @@ import { FC, SVGAttributes } from 'react';
 import { IconsModule } from '../webpack';
 
 // TODO type this and other icons?
-export const Spinner = Object.values(IconsModule).find(
-  (mod: any) => mod?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()),
+export const Spinner = Object.values(IconsModule)?.find(
+  (mod: any) => mod?.toString && /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()),
 ) as FC<SVGAttributes<SVGElement>>;

package/src/index.ts

@@ -13,8 +13,8 @@ export * from './class-mapper';
  * @deprecated use @decky/api instead
  */
 export const definePlugin = (fn: any): any => {
-    return (...args: any[]) => {
-      // TODO: Maybe wrap this
-      return fn(...args);
-    };
+  return (...args: any[]) => {
+    // TODO: Maybe wrap this
+    return fn(...args);
+  };
 };

package/src/utils/react.ts

@@ -8,6 +8,28 @@ declare global {
   }
 }
 
+/**
+ * Create a Regular Expression to search for a React component that uses certain props in order.
+ *
+ * @export
+ * @param {string[]} propList Ordererd list of properties to search for
+ * @returns {RegExp} RegEx to call .test(component.toString()) on
+ */
+export function createPropListRegex(propList: string[], fromStart: boolean = true): RegExp {
+  let regexString = fromStart ? "const\{" : "";
+  propList.forEach((prop: any, propIdx) => {
+    regexString += `"?${prop}"?:[a-zA-Z_$]{1,2}`;
+    if (propIdx < propList.length - 1) {
+      regexString += ",";
+    }
+  });
+
+  // TODO provide a way to enable this
+  // console.debug(`[DFL:Utils] createPropListRegex generated regex "${regexString}" for props`, propList);
+
+  return new RegExp(regexString);
+}
+
 export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
   const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
     .current;

package/src/webpack.ts

@@ -130,7 +130,7 @@ export const CommonUIModule = modules.find((m: Module) => {
 });
 
 export const IconsModule = findModuleByExport(
-  (e) => e?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()),
+  (e) => e?.toString && /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()),
 );
 
 export const ReactRouter = findModuleByExport((e) => e.computeRootMatch);