feat[devtools]: add method for connecting backend with custom messaging protocol #28552

hoxyq · 2024-03-13T14:48:47Z

Summary

RDT backend will now expose method connectWithCustomMessagingProtocol, which will be similar to the classic connectToDevTools one, but with few differences:

It delegates the communication management between frontend and backend to the owner (whos injecting RDT backend). Unlike the connectToDevTools, which is relying on websocket connection and receives host and port as an arguments.
It returns a callback, which can be used for unsubscribing the current backend instance from the global DevTools hook.

This is a prerequisite for any non-browser RDT integration, which is not designed to be based on websocket.

motiz88

Definitely makes sense to me that we need this, not sure I can usefully review the details though

motiz88 · 2024-03-13T16:35:24Z

packages/react-devtools-core/README.md

+| `onMessageSubscription`        | Function, which receives listener (function, with a single argument) as an argument. Called when backend subscribes to messages from the other end (frontend). |
+| `onMessageSubscriptionRemoval` | Function, which receives listener (function) as an argument. Called when backend unsubscribes to messages from the other end (frontend).                       |


Naming nit: how about something like this?

Suggested change

| `onMessageSubscription` | Function, which receives listener (function, with a single argument) as an argument. Called when backend subscribes to messages from the other end (frontend). |

| `onMessageSubscriptionRemoval` | Function, which receives listener (function) as an argument. Called when backend unsubscribes to messages from the other end (frontend). |

| `onSubscribe` | Function, which receives listener (function, with a single argument) as an argument. Called when backend subscribes to messages from the other end (frontend). |

| `onUnsubscribe` | Function, which receives listener (function) as an argument. Called when backend unsubscribes to messages from the other end (frontend). |

Makes sense, will update this

…ng protocol

## Summary Stacked on #28552. Review only the [last commit at the top](c69952f). These changes add new package `react-devtools-fusebox`, which is the entrypoint for the RDT Frontend, which will be used in Chrome DevTools panel. The main differences from other frontend shells (extension, standalone) are: 1. This package builds scripts in ESM format, this is required by Chrome DevTools, see webpack config: https://github.com/facebook/react/blob/c69952f1bf6e23252d47e0f7eb98efbbb2cc2c55/packages/react-devtools-fusebox/webpack.config.frontend.js#L50-L52 2. The build includes styles in a separate `.css` file, which is required for Chrome DevTools: styles are loaded lazily once panel is mounted.

…ng protocol (facebook#28552) ## Summary RDT backend will now expose method `connectWithCustomMessagingProtocol`, which will be similar to the classic `connectToDevTools` one, but with few differences: 1. It delegates the communication management between frontend and backend to the owner (whos injecting RDT backend). Unlike the `connectToDevTools`, which is relying on websocket connection and receives host and port as an arguments. 2. It returns a callback, which can be used for unsubscribing the current backend instance from the global DevTools hook. This is a prerequisite for any non-browser RDT integration, which is not designed to be based on websocket.

## Summary Stacked on facebook#28552. Review only the [last commit at the top](facebook@c69952f). These changes add new package `react-devtools-fusebox`, which is the entrypoint for the RDT Frontend, which will be used in Chrome DevTools panel. The main differences from other frontend shells (extension, standalone) are: 1. This package builds scripts in ESM format, this is required by Chrome DevTools, see webpack config: https://github.com/facebook/react/blob/c69952f1bf6e23252d47e0f7eb98efbbb2cc2c55/packages/react-devtools-fusebox/webpack.config.frontend.js#L50-L52 2. The build includes styles in a separate `.css` file, which is required for Chrome DevTools: styles are loaded lazily once panel is mounted.

Full list of changes: * Look for a ReactMemoCacheSentinel on state ([gsathya](https://github.com/gsathya) in [#28831](#28831)) * Use use() in the Cache if available ([sebmarkbage](https://github.com/sebmarkbage) in [#28793](#28793)) * feat[devtools-fusebox]: support theme option ([hoxyq](https://github.com/hoxyq) in [#28832](#28832)) * feat[devtools]: add package for fusebox integration ([hoxyq](https://github.com/hoxyq) in [#28553](#28553)) * feat[devtools]: add method for connecting backend with custom messaging protocol ([hoxyq](https://github.com/hoxyq) in [#28552](#28552)) * Rename SECRET INTERNALS to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` ([sebmarkbage](https://github.com/sebmarkbage) in [#28789](#28789)) * Flatten ReactSharedInternals ([sebmarkbage](https://github.com/sebmarkbage) in [#28783](#28783)) * feat[devtools]: ship source maps for content scripts and ignore list installHook script ([hoxyq](https://github.com/hoxyq) in [#28730](#28730)) * Track Owner for Server Components in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28753](#28753)) * Move ReactDOMLegacy implementation into RootFB ([sebmarkbage](https://github.com/sebmarkbage) in [#28656](#28656)) * Reland #28672: Remove IndeterminateComponent ([gnoff](https://github.com/gnoff) in [#28681](#28681)) * Remove reference to deleted <Cache> in un-linted file ([josephsavona](https://github.com/josephsavona) in [#28715](#28715)) * [be] Remove unshipped experimental <Cache> element type ([josephsavona](https://github.com/josephsavona) in [#28698](#28698)) * Revert "Remove module pattern function component support" ([rickhanlonii](https://github.com/rickhanlonii) in [#28670](#28670)) * Remove module pattern function component support ([gnoff](https://github.com/gnoff) in [#27742](#27742)) * [RTR] Enable warning flag ([jackpope](https://github.com/jackpope) in [#28419](#28419)) * Update error messages ([rickhanlonii](https://github.com/rickhanlonii) in [#28652](#28652)) * fix[devtools/ci]: split profiling cache test for different react versions and toEqual checker ([hoxyq](https://github.com/hoxyq) in [#28628](#28628)) * Guard against legacy context not being supported in DevTools fixture ([eps1lon](https://github.com/eps1lon) in [#28596](#28596)) * Use `declare const` instead of `declare var` ([kassens](https://github.com/kassens) in [#28599](#28599)) * Update isConcurrent RTR option usage ([jackpope](https://github.com/jackpope) in [#28546](#28546)) * Disable legacy context ([kassens](https://github.com/kassens) in [#27991](#27991)) * Remove invokeGuardedCallback and replay trick ([sebmarkbage](https://github.com/sebmarkbage) in [#28515](#28515)) * Remove remaining usages of ReactTestUtils in tests unrelated to `react-dom/test-util` ([eps1lon](https://github.com/eps1lon) in [#28534](#28534)) * fix[devtools/e2e]: fixed source inspection in e2e tests ([hoxyq](https://github.com/hoxyq) in [#28518](#28518)) * Devtools: Display actual pending state when inspecting `useTransition` ([eps1lon](https://github.com/eps1lon) in [#28499](#28499))

hoxyq requested review from EdmondChuiHW, motiz88, huntie and robhogan March 13, 2024 14:48

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Mar 13, 2024

hoxyq mentioned this pull request Mar 13, 2024

feat[devtools]: add package for fusebox integration #28553

Merged

motiz88 approved these changes Mar 13, 2024

View reviewed changes

feat[devtools]: add method for connecting backend with custom messagi…

90c1fa5

…ng protocol

hoxyq force-pushed the devtools/add-method-for-custom-messaging-protocol-for-backend-in-core branch from dcc35ff to 90c1fa5 Compare April 12, 2024 13:43

hoxyq merged commit d012a32 into facebook:main Apr 12, 2024
38 checks passed

hoxyq deleted the devtools/add-method-for-custom-messaging-protocol-for-backend-in-core branch April 12, 2024 14:17

hoxyq mentioned this pull request Apr 15, 2024

React DevTools 5.0.2 -> 5.1.0 #28840

Merged

This was referenced Apr 24, 2024

Update React from c3048aab4 to cb151849e1 vercel/next.js#64994

Closed

Support React 19 in App and Pages router vercel/next.js#65058

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat[devtools]: add method for connecting backend with custom messaging protocol #28552

feat[devtools]: add method for connecting backend with custom messaging protocol #28552

hoxyq commented Mar 13, 2024 •

edited

Loading

motiz88 left a comment

motiz88 Mar 13, 2024

hoxyq Mar 14, 2024

		\| `onMessageSubscription` \| Function, which receives listener (function, with a single argument) as an argument. Called when backend subscribes to messages from the other end (frontend). \|
		\| `onMessageSubscriptionRemoval` \| Function, which receives listener (function) as an argument. Called when backend unsubscribes to messages from the other end (frontend). \|

feat[devtools]: add method for connecting backend with custom messaging protocol #28552

feat[devtools]: add method for connecting backend with custom messaging protocol #28552

Conversation

hoxyq commented Mar 13, 2024 • edited Loading

Summary

motiz88 left a comment

Choose a reason for hiding this comment

motiz88 Mar 13, 2024

Choose a reason for hiding this comment

hoxyq Mar 14, 2024

Choose a reason for hiding this comment

hoxyq commented Mar 13, 2024 •

edited

Loading