From 44bb023b804b0ab360214360a3947935fb41c86c Mon Sep 17 00:00:00 2001 From: AAGaming Date: Wed, 15 Oct 2025 00:31:12 -0400 Subject: React 19 support (#818) --- .../src/components/QuickAccessVisibleState.tsx | 4 ++-- frontend/src/components/WithSuspense.tsx | 2 +- .../modals/filepicker/FilePickerError.tsx | 2 +- frontend/src/index.ts | 18 +++++++++++++----- frontend/src/plugin-loader.tsx | 22 ---------------------- frontend/src/plugin.ts | 1 + frontend/src/router-hook.tsx | 10 +++++----- 7 files changed, 23 insertions(+), 36 deletions(-) (limited to 'frontend/src') diff --git a/frontend/src/components/QuickAccessVisibleState.tsx b/frontend/src/components/QuickAccessVisibleState.tsx index f5c05061..f90c24b4 100644 --- a/frontend/src/components/QuickAccessVisibleState.tsx +++ b/frontend/src/components/QuickAccessVisibleState.tsx @@ -1,10 +1,10 @@ -import { FC, ReactNode, createContext, useContext, useState } from 'react'; +import { FC, PropsWithChildren, createContext, useContext, useState } from 'react'; const QuickAccessVisibleState = createContext(false); export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState); -export const QuickAccessVisibleStateProvider: FC<{ tab: any; children: ReactNode }> = ({ children, tab }) => { +export const QuickAccessVisibleStateProvider: FC> = ({ children, tab }) => { const initial = tab.initialVisibility; const [visible, setVisible] = useState(initial); // HACK but i can't think of a better way to do this diff --git a/frontend/src/components/WithSuspense.tsx b/frontend/src/components/WithSuspense.tsx index 153bec8d..d6281e3e 100644 --- a/frontend/src/components/WithSuspense.tsx +++ b/frontend/src/components/WithSuspense.tsx @@ -10,7 +10,7 @@ interface WithSuspenseProps { const WithSuspense: FunctionComponent = (props) => { const propsCopy = { ...props }; delete propsCopy.children; - (props.children as ReactElement)?.props && Object.assign((props.children as ReactElement).props, propsCopy); // There is probably a better way to do this but valve does it this way so ¯\_(ツ)_/¯ + (props.children as ReactElement)?.props && Object.assign((props.children as ReactElement).props, propsCopy); // There is probably a better way to do this but valve does it this way so ¯\_(ツ)_/¯ return ( { console.debug('[Decky:Boot] Frontend init'); @@ -21,7 +17,19 @@ interface Window { // deliberate partial import const DFLWebpack = await import('@decky/ui/dist/webpack'); window.SP_REACT = DFLWebpack.findModule((m) => m.Component && m.PureComponent && m.useLayoutEffect); - window.SP_REACTDOM = DFLWebpack.findModule((m) => m.createPortal && m.createRoot); + window.SP_REACTDOM = + DFLWebpack.findModule((m) => m.createPortal && m.createRoot) || + DFLWebpack.findModule((m) => m.createPortal && m.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE); + + console.debug('[Decky:Boot] Setting up JSX internals...'); + const jsx = DFLWebpack.findModule((m) => m.jsx && Object.keys(m).length == 1)?.jsx; + if (jsx) { + window.SP_JSX = { + jsx, + jsxs: jsx, + Fragment: window.SP_REACT.Fragment, + }; + } } console.debug('[Decky:Boot] Setting up @decky/ui...'); window.DFL = await import('@decky/ui'); diff --git a/frontend/src/plugin-loader.tsx b/frontend/src/plugin-loader.tsx index df0a6956..2bdfcec1 100644 --- a/frontend/src/plugin-loader.tsx +++ b/frontend/src/plugin-loader.tsx @@ -120,28 +120,6 @@ class PluginLoader extends Logger { - ), }); diff --git a/frontend/src/plugin.ts b/frontend/src/plugin.ts index 0035990e..f2b99f71 100644 --- a/frontend/src/plugin.ts +++ b/frontend/src/plugin.ts @@ -1,3 +1,4 @@ +import type { JSX } from 'react'; export enum PluginLoadType { LEGACY_EVAL_IIFE = 0, // legacy, uses legacy serverAPI ESMODULE_V1 = 1, // esmodule loading with modern @decky/backend apis diff --git a/frontend/src/router-hook.tsx b/frontend/src/router-hook.tsx index b3355d76..9b5f65dc 100644 --- a/frontend/src/router-hook.tsx +++ b/frontend/src/router-hook.tsx @@ -9,7 +9,7 @@ import { getReactRoot, sleep, } from '@decky/ui'; -import { FC, ReactElement, ReactNode, cloneElement, createElement } from 'react'; +import { FC, JSX, ReactElement, ReactNode, cloneElement, createElement } from 'react'; import type { Route } from 'react-router'; import { @@ -37,7 +37,7 @@ const isPatched = Symbol('is patched'); class RouterHook extends Logger { private routerState: DeckyRouterState = new DeckyRouterState(); private globalComponentsState: DeckyGlobalComponentsState = new DeckyGlobalComponentsState(); - private renderedComponents: ReactElement[] = []; + private renderedComponents: ReactElement[] = []; private Route: any; private DeckyGamepadRouterWrapper = this.gamepadRouterWrapper.bind(this); private DeckyDesktopRouterWrapper = this.desktopRouterWrapper.bind(this); @@ -233,7 +233,7 @@ class RouterHook extends Logger { return <>{this.renderedComponents}; } - private gamepadRouterWrapper({ children }: { children: ReactElement }) { + private gamepadRouterWrapper({ children }: { children: ReactElement }) { // Used to store the new replicated routes we create to allow routes to be unpatched. const { routes, routePatches } = useDeckyRouterState(); @@ -251,7 +251,7 @@ class RouterHook extends Logger { return children; } - private desktopRouterWrapper({ children }: { children: ReactElement }) { + private desktopRouterWrapper({ children }: { children: ReactElement }) { // Used to store the new replicated routes we create to allow routes to be unpatched. this.debug('desktop router wrapper render', children); const { routes, routePatches } = useDeckyRouterState(); @@ -287,7 +287,7 @@ class RouterHook extends Logger { if (routes) { if (!routeList[routerIndex - 1]?.length || routeList[routerIndex - 1]?.length !== routes.size) { if (routeList[routerIndex - 1]?.length && routeList[routerIndex - 1].length !== routes.size) routerIndex--; - const newRouterArray: (ReactElement | JSX.Element)[] = []; + const newRouterArray: (ReactElement | JSX.Element)[] = []; routes.forEach(({ component, props }, path) => { newRouterArray.push( -- cgit v1.2.3