Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add ReactDevToolsBindingsModel #15

Conversation

hoxyq
Copy link

@hoxyq hoxyq commented Mar 11, 2024

Summary

This PR adds FuseboxBindingsModel, which will establish the bidirectional communication between Chrome DevTools Frontend and React Native JS Runtime. It will:

  1. Create a global binding via Runtime.addBinding request, the name of which will be parsed from RN JS Runtime via Runtime.evaluate invocation prior to it.
  2. Expose an interface for other potential third party models (ReactDevToolsModel in a future) for sending JSON-serializable messages to React Native JS runtime.

Corresponding PR for RN - facebook/react-native#43418, see README and diagrams for architecture overview.

Test plan

Locally modified rn_inspector to import the model (so it would start),
the __FUSEBOX_REACT_DEVTOOLS_DISPATCHER__ binding is created once Chrome DevTools Frontend is opened.

Screenshot 2024-03-11 at 17 41 14

Upstreaming plan

  • This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
  • This commit is React Native-specific and cannot be upstreamed.

hoxyq added a commit to hoxyq/react-native that referenced this pull request Mar 11, 2024
Summary:
Changelog: [Internal]

This diff adds a script, which will be later imported from `InitializeCore` to setup a required global for communication between React Native runtime (RDT Backend in it) and Chrome DevTools Frontend (RDT Frontend in it).

See README for the architecture overview and how bidirectional communication is established.

Corresponding PR in Chrome DevTools frontend - facebookexperimental/rn-chrome-devtools-frontend#15

Differential Revision: D54770207
hoxyq added a commit to hoxyq/react-native that referenced this pull request Mar 11, 2024
Summary:
Pull Request resolved: facebook#43418

Changelog: [Internal]

This diff adds a script, which will be later imported from `InitializeCore` to setup a required global for communication between React Native runtime (RDT Backend in it) and Chrome DevTools Frontend (RDT Frontend in it).

See README for the architecture overview and how bidirectional communication is established.

Corresponding PR in Chrome DevTools frontend - facebookexperimental/rn-chrome-devtools-frontend#15

Differential Revision: D54770207
hoxyq added a commit to hoxyq/react-native that referenced this pull request Mar 11, 2024
Summary:
Pull Request resolved: facebook#43418

Changelog: [Internal]

This diff adds a script, which will be later imported from `InitializeCore` to setup a required global for communication between React Native runtime (RDT Backend in it) and Chrome DevTools Frontend (RDT Frontend in it).

See README for the architecture overview and how bidirectional communication is established.

Corresponding PR in Chrome DevTools frontend - facebookexperimental/rn-chrome-devtools-frontend#15

Differential Revision: D54770207
@hoxyq hoxyq force-pushed the react-devtools/introduce-third-party-bindings-model branch 2 times, most recently from 8c63f3e to c23f4cb Compare March 12, 2024 12:44
Copy link

@EdmondChuiHW EdmondChuiHW left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for attaching the diagrams!

Approving contingent on autoStart: false making this PR a no-op

front_end/models/react_native/FuseboxBindingsModel.ts Outdated Show resolved Hide resolved
front_end/models/react_native/FuseboxBindingsModel.ts Outdated Show resolved Hide resolved
front_end/models/react_native/FuseboxBindingsModel.ts Outdated Show resolved Hide resolved
front_end/models/react_native/FuseboxBindingsModel.ts Outdated Show resolved Hide resolved
front_end/models/react_native/FuseboxBindingsModel.ts Outdated Show resolved Hide resolved
@hoxyq hoxyq mentioned this pull request Mar 12, 2024
2 tasks
@hoxyq hoxyq force-pushed the react-devtools/introduce-third-party-bindings-model branch from c23f4cb to 08f13c9 Compare April 9, 2024 13:57
@hoxyq hoxyq changed the title feat: add FuseboxBindingsModel feat: add ReactDevToolsBindingsModel Apr 9, 2024
@hoxyq hoxyq merged commit e5d32b7 into facebookexperimental:main Apr 9, 2024
3 checks passed
@hoxyq hoxyq deleted the react-devtools/introduce-third-party-bindings-model branch April 9, 2024 15:13
hoxyq added a commit to hoxyq/react-native that referenced this pull request Apr 11, 2024
Summary:
Pull Request resolved: facebook#43418

Changelog: [Internal]

This diff adds a script, which will be later imported from `InitializeCore` to setup a required global for communication between React Native runtime (RDT Backend in it) and Chrome DevTools Frontend (RDT Frontend in it).

See README for the architecture overview and how bidirectional communication is established.

Corresponding PR in Chrome DevTools frontend - facebookexperimental/rn-chrome-devtools-frontend#15

Differential Revision: D54770207
hoxyq added a commit to hoxyq/react-native that referenced this pull request Apr 11, 2024
Summary:
Pull Request resolved: facebook#43418

Changelog: [Internal]

This diff adds a script, which will be later imported from `InitializeCore` to setup a required global for communication between React Native runtime (RDT Backend in it) and Chrome DevTools Frontend (RDT Frontend in it).

See README for the architecture overview and how bidirectional communication is established.

Corresponding PR in Chrome DevTools frontend - facebookexperimental/rn-chrome-devtools-frontend#15

Reviewed By: motiz88

Differential Revision: D54770207
hoxyq added a commit to hoxyq/react-native that referenced this pull request Apr 11, 2024
…book#43418)

Summary:
Pull Request resolved: facebook#43418

Changelog: [Internal]

This diff adds a script, which will be later imported from `InitializeCore` to setup a required global for communication between React Native runtime (RDT Backend in it) and Chrome DevTools Frontend (RDT Frontend in it).

See README for the architecture overview and how bidirectional communication is established.

Corresponding PR in Chrome DevTools frontend - facebookexperimental/rn-chrome-devtools-frontend#15

Reviewed By: motiz88

Differential Revision: D54770207
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 12, 2024
Summary:
Pull Request resolved: #43418

Changelog: [Internal]

This diff adds a script, which will be later imported from `InitializeCore` to setup a required global for communication between React Native runtime (RDT Backend in it) and Chrome DevTools Frontend (RDT Frontend in it).

See README for the architecture overview and how bidirectional communication is established.

Corresponding PR in Chrome DevTools frontend - facebookexperimental/rn-chrome-devtools-frontend#15

Reviewed By: motiz88

Differential Revision: D54770207

fbshipit-source-id: 0f0f04a338b5c7eab817c843a99b07cca95e57fd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants