[WIP] feat: add RN experimental debugger compatibility

[RafikiTiki]

TODO

• [ ] Verify if the Flipper debugging experience is working properly – if not – create an issue and address it later
• [ ] Consider reverting DevtoolsPlugin removal – it might be needed for the deprecated Remote JS debugging. We need this to work before it's removed from the RN core

Summary

This PR introduces compatibility with the new Experimental Debugger to the Repack devserver.

Experimental Debugger info:

• https://reactnative.dev/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#experimental-new-debugger
• https://reactnative.dev/docs/debugging#opening-the-debugger

To test this feature the dev server has to be started with the --experimental-debugger flag. To play with it using TesterApp simply run yarn TesterApp:start --experimental-debugger from the root of the repo.

Additional benefits

This PR also made it possible to remove a custom implementation of the Hermes Inspector Proxy and reuse what @react-native/dev-middleware provides – less code to maintain and less breaking changes in the future 🤞

Next steps

In the future, we'll likely remove the Remote JS debugger and the whole debugger-app package – this will, of course, be a breaking change and we want to wait till it gets removed from the RN core itself.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 8bbd016671dacfbfc88a0d63e8137f13cc5cb8ba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@callstack/repack-dev-server	Major
@callstack/repack	Major
@callstack/repack-init	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

This pull request has been marked as stale because it has been inactive for 60 days. Please update this pull request or it will be automatically closed in 14 days.

[jbroma]

• Added eslint-disable directive fro @react-native/dev-middleware because there is no main field declared there. (description of the problem)
• Added TS path override for @react-native/dev-middleware because we use moduleResolution: 'node' which doesn't read package exports, and changing this is out of scope of this PR

[jbroma]

@szymonrybczak should we use @react-native/dev-middleware as a peer dependency in our dev-server? I think it makes sense because it's always included with react-native as part of @react-native/community-cli-plugin, would love to hear your point of view

[thymikee]

Using it as a peer dependency would make it auto-install as a dep when using npm, right? Can we treat it as an optional dependency that we require and throw error saying that it's supposed to be there, so most likely make sure you've installed the deps?

[thymikee]

FYI, in 0.75 the template will have the dependency on @react-native-communit/cli, but likely not directly on the @react-native/community-cli-plugin: https://github.com/react-native-community/template/pull/7

[jbroma]

Using it as a peer dependency would make it auto-install as a dep when using npm, right?

that might be the case, let's mark it as optional inside of peerDependenciesMeta then I guess?

Can we treat it as an optional dependency that we require and throw error saying that it's supposed to be there, so most likely make sure you've installed the deps?

We could make it optional and just skip integrating that part with debugger altogether. On the other hand, I'm not sure we need the error handling here since dev-server doesn't make much sense outside of react-native context so it should be safe to assume react-native is there. I would love to hear others opinion on this though.

FYI, in 0.75 the template will have the dependency on @react-native-communit/cli, but likely not directly on the @react-native/community-cli-plugin: https://github.com/react-native-community/template/pull/7

I don't see anything there (or related PR) regarding @react-native/community-cli-plugin, but if that happens then I guess we could just align to that in the future.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
repack-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 6, 2024 4:30pm

[RafikiTiki]

Flipper compatibility update – I rebased this branch on the latest changes from the main branch, which includes RN 0.74.0 in the TesterApp. Both Flipper and Experimental Debugger experiences are working as expected now 🎉

[thymikee]

Nice! Is this ready to go?

[RafikiTiki]

Deprecated Remote Debugging #578 update – I reverted removal of part of the devtoolsPlugin.ts and used a few middlewares from @react-native-community/cli-server-api & replaced vendored code for the debugger-ui with @react-native-community/cli-debugger-ui. This enabled me to completely remove the packages/debugger-app.

Additionally, I left a TODO comment to remove the internal code/dependencies related to the deprecated remote debugging once it is removed from the React Native core itself.

@thymikee @jbroma, this should be good to be re-reviewed. The last thing to consider is the status of the added dependencies:

"@react-native-community/cli-debugger-ui": "^13.6.6",
"@react-native-community/cli-server-api": "^13.6.6",
"@react-native/dev-middleware": "^0.73.8",

As mentioned above, the first two will be removed in the future, while @react-native/dev-middleware will continue to be used. I've seen the discussion earlier about moving them to the peerDeps. Since debugging is essential to the development experience, it should be provided by repack. Previously we had all of the code implemented internally – I think leaving them as regular dependencies will be a better dev experience rather than marking them optional and providing runtime checks/errors in case they're not installed.

[jbroma]

Great works so far @RafikiTiki 🎉 Thanks for keeping the old debugger ❤️

As for the deps:

• I would keep CLI deps as peer deps (since they are all direct deps of CLI which is a direct dep of react-native)
• Keep @react-native/dev-middleware as a direct dependency since it's supported from 0.73 onwards, and we need to still support 0.72 and 0.71 - later on we can switch to peer dep setup like above 👍

cc @thymikee