software-mansion / radon-ide

VSCode extension that turns your editor into a fully fledged IDE for React Native and Expo.
https://ide.swmansion.com
Other
867 stars 29 forks source link

New React Native debugger support #530

Closed kmagiera closed 2 weeks ago

kmagiera commented 2 weeks ago

This PR adds the new React Native debugger support to IDE. The new debugger will be enabled starting from RN 0.76, but it can be used in prior versions (0.72 even) after enabling build configuration flag.

Here's the gist of the changes: 1) We updated the way we lookup websocket debugger URL after reading the list of available pages from /list/json endpoint. The old debugger had a different format for page IDs that we used to detect the runtime that supported reloads. With the new debugger this is no longer necessary as c++ adapter handles that and gives us a stable device id hash. To make this compatible across different RN versions, we now use the new lookup mechanism, and if we don't find any matches we fallback to the old lookup method 2) The new debugger uses a project alias when compiling source maps. Instead of using absolute paths for filenames, it now uses a prefix "/[metro-project]". This needs to be taken into account when transforming file names the editor uses. We account for this in debug adapter implementation that takes a new configuration option. When launching the debugger, we detect whether it uses new or old debugger (based on the page naming) and sets up the alias processing when necessary.

Caveat

The path resolution bit may not work on Windows yet as we use "/[metro-project" as prefix, and I'm not sure if metro uses backslash on Windows or not, and if it does I don't know if path.join will handle this. So this change needs to be tested and fixed on Windows.

Test plan

This has been tested with RN 76 test app from #535 on Android and iOS by adding some breakpoints in the app code. Also test old debugger flow, especially on Android, as we touched some lines of code that were there to translate debugger endpoints to local network addresses.

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-native-ide ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 11, 2024 10:16am