@decky/ui 4.11.1 → 4.11.3

package/dist/components/Dialog.js

@@ -1,6 +1,9 @@
 import { CommonUIModule } from '../webpack';
-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 CommonDialogDivs = Object.values(CommonUIModule).filter((m) => typeof m === 'object' &&
+    (m?.render?.toString().includes('jsx)("div",{...') ||
+        m?.render?.toString().includes('jsx)("div",Object.assign({},')) ||
+    (m?.render?.toString().includes('createElement("div",{...') ||
+        m?.render?.toString().includes('createElement("div",Object.assign({},')));
 const MappedDialogDivs = new Map(Object.values(CommonDialogDivs).map((m) => {
     try {
         const renderedDiv = m.render({});

package/dist/components/ProgressBar.js

@@ -1,6 +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 ProgressBarWithInfo = findModuleExport((e) => e?.toString?.()?.includes('.ProgressBarFieldStatus,children') || e?.toString?.()?.includes('.ProgressBarFieldStatus},'));
 const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);
 export const ProgressBarItem = findModuleExport((e) => e?.toString && progressBarItemRegex.test(e.toString()));

package/dist/components/Scroll.js

@@ -2,4 +2,4 @@ import { findModuleByExport, findModuleExport } from '../webpack';
 const ScrollingModule = findModuleByExport((e) => e?.render?.toString?.().includes('{case"x":'));
 const ScrollingModuleProps = ScrollingModule ? Object.values(ScrollingModule) : [];
 export const ScrollPanel = ScrollingModuleProps.find((prop) => prop?.render?.toString?.().includes('{case"x":'));
-export const ScrollPanelGroup = findModuleExport((e) => e?.render?.toString().includes('.FocusVisibleChild()),[])'));
+export const ScrollPanelGroup = findModuleExport((e) => e?.render?.toString().includes('.FocusVisibleChild(),[])') || e?.render?.toString().includes('.FocusVisibleChild()),[])'));

package/dist/components/Spinner.d.ts

@@ -1,2 +1 @@
-import { FC, SVGAttributes } from 'react';
-export declare const Spinner: FC<SVGAttributes<SVGElement>>;
+export declare const Spinner: any;

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 = IconsModule && Object.values(IconsModule)?.find((mod) => mod?.toString && /Spinner\),children:\[\(0,\w+\.jsx\)\("path",\{d:"M18 /.test(mod.toString()) || /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()));

package/dist/components/Tabs.js

@@ -1,3 +1,3 @@
 import { findModuleByExport } from '../webpack';
 const tabsModule = findModuleByExport(e => e?.toString?.()?.includes(".TabRowTabs") && e?.toString?.()?.includes("activeTab:"));
-export const Tabs = tabsModule && Object.values(tabsModule).find((e) => e?.type?.toString?.()?.includes("((function()"));
+export const Tabs = tabsModule && Object.values(tabsModule).find((e) => e?.type?.toString?.()?.includes("(function()"));

package/dist/utils/react/fc.js

@@ -17,6 +17,9 @@ export function injectFCTrampoline(component, customHooks) {
     };
     component.prototype.isReactComponent = true;
     let stubsApplied = false;
+    const patchJsx = window.SP_REACTDOM.version.startsWith("19.");
+    let oldJsx = window.SP_JSX?.jsx;
+    let oldJsxs = window.SP_JSX?.jsxs;
     let oldCreateElement = window.SP_REACT.createElement;
     const applyStubsIfNeeded = () => {
         if (!stubsApplied) {
@@ -28,6 +31,18 @@ export function injectFCTrampoline(component, customHooks) {
                 loggingEnabled && console.trace("createElement trace");
                 return Object.create(component.prototype);
             };
+            if (patchJsx) {
+                window.SP_JSX.jsx = () => {
+                    loggingEnabled && logger.debug("jsx hook called");
+                    loggingEnabled && console.trace("jsx trace");
+                    return Object.create(component.prototype);
+                };
+                window.SP_JSX.jsxs = () => {
+                    loggingEnabled && logger.debug("jsxs hook called");
+                    loggingEnabled && console.trace("jsxs trace");
+                    return Object.create(component.prototype);
+                };
+            }
         }
     };
     const removeStubsIfNeeded = () => {
@@ -36,6 +51,10 @@ export function injectFCTrampoline(component, customHooks) {
             stubsApplied = false;
             removeHookStubs();
             window.SP_REACT.createElement = oldCreateElement;
+            if (patchJsx) {
+                window.SP_JSX.jsx = oldJsx;
+                window.SP_JSX.jsxs = oldJsxs;
+            }
         }
     };
     let renderHookStep = 0;

package/dist/webpack.js

@@ -117,5 +117,5 @@ export const CommonUIModule = findModule((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\),children:\[\(0,\w+\.jsx\)\("path",\{d:"M18 /.test(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.11.1",
+  "version": "4.11.3",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -57,7 +57,7 @@
     "minimist": "^1.2.8",
     "prettier": "^3.6.2",
     "prettier-plugin-import-sort": "^0.0.7",
-    "semantic-release": "^24.2.7",
+    "semantic-release": "^25.0.3",
     "shx": "^0.3.4",
     "ts-jest": "^29.4.1",
     "typedoc": "^0.25.13",

package/src/components/Dialog.ts

@@ -52,8 +52,17 @@ export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps
 }
 
 const CommonDialogDivs = Object.values(CommonUIModule).filter(
-  (m: any) => typeof m === 'object' && m?.render?.toString().includes('createElement("div",{...') ||
-  m?.render?.toString().includes('createElement("div",Object.assign({},'),
+  (m: any) => typeof m === 'object' && 
+  // New
+  (
+    m?.render?.toString().includes('jsx)("div",{...') ||
+    m?.render?.toString().includes('jsx)("div",Object.assign({},')
+  ) ||
+  // Old
+  (
+    m?.render?.toString().includes('createElement("div",{...') ||
+    m?.render?.toString().includes('createElement("div",Object.assign({},')
+  )
 );
 const MappedDialogDivs = new Map(
   Object.values(CommonDialogDivs).map((m: any) => {

package/src/components/ProgressBar.ts

@@ -28,7 +28,8 @@ export const ProgressBar = findModuleExport((e: Export) =>
 ) as FC<ProgressBarProps>;
 
 export const ProgressBarWithInfo = findModuleExport((e: Export) =>
-  e?.toString?.()?.includes('.ProgressBarFieldStatus},'),
+  // new || old
+  e?.toString?.()?.includes('.ProgressBarFieldStatus,children') || e?.toString?.()?.includes('.ProgressBarFieldStatus},'),
 ) as FC<ProgressBarWithInfoProps>;
 
 const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);

package/src/components/Scroll.ts

@@ -11,5 +11,6 @@ export const ScrollPanel = ScrollingModuleProps.find((prop: any) =>
 ) as FC<{ children?: ReactNode }>;
 
 export const ScrollPanelGroup: FC<{ children?: ReactNode }> = findModuleExport((e: Export) =>
-  e?.render?.toString().includes('.FocusVisibleChild()),[])'),
+  // new || old
+  e?.render?.toString().includes('.FocusVisibleChild(),[])') || e?.render?.toString().includes('.FocusVisibleChild()),[])'),
 );

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 = IconsModule && Object.values(IconsModule)?.find(
+  (mod: any) => mod?.toString && /Spinner\),children:\[\(0,\w+\.jsx\)\("path",\{d:"M18 /.test(mod.toString()) || /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()),
 ) as FC<SVGAttributes<SVGElement>>;

package/src/components/Tabs.ts

@@ -67,4 +67,4 @@ const tabsModule = findModuleByExport(e => e?.toString?.()?.includes(".TabRowTab
 /**
  * Tabs component as used in the library and media tabs. See {@link TabsProps}.
  */
-export const Tabs = tabsModule && Object.values(tabsModule).find((e: any) => e?.type?.toString?.()?.includes("((function()")) as FC<TabsProps>;
+export const Tabs = tabsModule && Object.values(tabsModule).find((e: any) => e?.type?.toString?.()?.includes("(function()")) as FC<TabsProps>;

package/src/utils/react/fc.ts

@@ -42,6 +42,9 @@ export function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoli
     };
     component.prototype.isReactComponent = true;
     let stubsApplied = false;
+    const patchJsx = window.SP_REACTDOM.version.startsWith("19.");
+    let oldJsx = window.SP_JSX?.jsx;
+    let oldJsxs = window.SP_JSX?.jsxs;
     let oldCreateElement = window.SP_REACT.createElement;
 
     const applyStubsIfNeeded = () => {
@@ -55,6 +58,18 @@ export function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoli
                 loggingEnabled && console.trace("createElement trace");
                 return Object.create(component.prototype);
             };
+            if (patchJsx) {
+                window.SP_JSX.jsx = () => {
+                    loggingEnabled && logger.debug("jsx hook called");
+                    loggingEnabled && console.trace("jsx trace");
+                    return Object.create(component.prototype);
+                }
+                window.SP_JSX.jsxs = () => {
+                    loggingEnabled && logger.debug("jsxs hook called");
+                    loggingEnabled && console.trace("jsxs trace");
+                    return Object.create(component.prototype);
+                }
+            }
         }
     }
 
@@ -64,6 +79,10 @@ export function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoli
             stubsApplied = false;
             removeHookStubs();
             window.SP_REACT.createElement = oldCreateElement;
+            if (patchJsx) {
+                window.SP_JSX.jsx = oldJsx;
+                window.SP_JSX.jsxs = oldJsxs;
+            }
         }
     }
 

package/src/webpack.ts

@@ -154,7 +154,7 @@ export const CommonUIModule = findModule((m: Module) => {
 });
 
 export const IconsModule = findModuleByExport(
-  (e) => e?.toString && /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()),
+  (e) => e?.toString && /Spinner\),children:\[\(0,\w+\.jsx\)\("path",\{d:"M18 /.test(e.toString()) || /Spinner\)}\)?,.\.createElement\(\"path\",{d:\"M18 /.test(e.toString()),
 );
 
 export const ReactRouter = findModuleByExport((e) => e.computeRootMatch);