feat[devtools]: add method for connecting backend with custom messaging protocol #28552
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
React Core Team
motiz88
approved these changes
Mar 13, 2024
Comment on lines
43
to
44
| | `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). | |
There was a problem hiding this comment.
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). | |
There was a problem hiding this comment.
Makes sense, will update this
hoxyq
force-pushed
the
devtools/add-method-for-custom-messaging-protocol-for-backend-in-core
branch
from
dcc35ff
to
90c1fa5
Compare
hoxyq
deleted the
devtools/add-method-for-custom-messaging-protocol-for-backend-in-core
branch
hoxyq
added a commit
that referenced
this pull request
Apr 12, 2024
## 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.
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
…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.
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
## 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.
hoxyq
added a commit
that referenced
this pull request
Apr 15, 2024
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))
This was referenced Apr 24, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
RDT backend will now expose method
connectWithCustomMessagingProtocol, which will be similar to the classicconnectToDevToolsone, but with few differences:connectToDevTools, which is relying on websocket connection and receives host and port as an arguments.This is a prerequisite for any non-browser RDT integration, which is not designed to be based on websocket.