"fix" react-devtools

works well enough lol

Author: AAGaming00

backend/decky_loader/utilities.py

@@ -429,25 +429,39 @@ async def _enable_rdt(self):
                 async with ClientSession() as web:
                     res = await web.request("GET", "http://" + ip + ":8097", ssl=helpers.get_ssl_context())
                     script = """
-                    if (!window.deckyHasConnectedRDT) {
-                        window.deckyHasConnectedRDT = true;
-                        // This fixes the overlay when hovering over an element in RDT
-                        Object.defineProperty(window, '__REACT_DEVTOOLS_TARGET_WINDOW__', {
-                            enumerable: true,
-                            configurable: true,
-                            get: function() {
-                                return (GamepadNavTree?.m_context?.m_controller || FocusNavController)?.m_ActiveContext?.ActiveWindow || window;
-                            }
-                        });
-                    """ + await res.text() + "\n}"
+                    try {
+                        if (!window.deckyHasConnectedRDT) {
+                            window.deckyHasConnectedRDT = true;
+                            // This fixes the overlay when hovering over an element in RDT
+                            Object.defineProperty(window, '__REACT_DEVTOOLS_TARGET_WINDOW__', {
+                                enumerable: true,
+                                configurable: true,
+                                get: function() {
+                                    return window?.DFL?.findSP?.() || window;
+                                }
+                            });
+                    """ + await res.text() + """
+                    // they broke the script so we have to do this ourselves
+                    ReactDevToolsBackend.initialize({
+                        appendComponentStack: true,
+                        breakOnConsoleErrors: false,
+                        showInlineWarningsAndErrors: true,
+                        hideConsoleLogsInStrictMode: false
+                    });
+                    ReactDevToolsBackend.connectToDevTools({port: 8097, host: 'localhost', useHttps: false});
+                    } } catch(e) {console.error('RDT LOAD ERROR', e);}console.log('LOADED RDT');
+                    """
                 if res.status != 200:
                     self.logger.error("Failed to connect to React DevTools at " + ip)
                     return False
                 self.start_rdt_proxy(ip, 8097)
                 self.logger.info("Connected to React DevTools, loading script")
                 tab = await get_gamepadui_tab()
                 # RDT needs to load before React itself to work.
-                await close_old_tabs()
+                try:
+                    await close_old_tabs()
+                except Exception:
+                    pass
                 result = await tab.reload_and_evaluate(script)
                 self.logger.info(result)
 

flake.nix

@@ -40,6 +40,7 @@
             nodePackages.pnpm
             poetry
             jq
+            electron_30-bin
             # fixes local pyright not being able to see the pythonpath properly.
             (pkgs.writeShellScriptBin "pyright" ''
               ${pkgs.pyright}/bin/pyright --pythonpath `which python3` "$@" '')

frontend/package.json

@@ -10,7 +10,8 @@
     "lint": "prettier -c src",
     "typecheck": "tsc --noEmit",
     "format": "prettier -c src -w",
-    "localize": "i18next"
+    "localize": "i18next",
+    "react-devtools": "electron node_modules/react-devtools/app"
   },
   "devDependencies": {
     "@decky/api": "^1.1.1",
@@ -31,6 +32,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-import-sort": "^0.0.7",
     "react": "18.3.1",
+    "react-devtools": "^6.0.0",
     "react-dom": "18.3.1",
     "rollup": "^4.18.0",
     "rollup-plugin-delete": "^2.0.0",