forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fusebox/RDT: setup global for fusebox runtime (facebook#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
- Loading branch information
1 parent
5e9ed14
commit 899c699
Showing
5 changed files
with
133 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
assets |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
# Fusebox Runtime | ||
|
||
## What is Fusebox? | ||
"Fusebox" is the internal codename for the new React Native debugger stack based on Chrome DevTools. | ||
|
||
## Architecture for React DevTools communication | ||
|
||
### Frontend to Backend communication | ||
![Frontend to backend communication diagram](./assets/frontend-to-backend.excalidraw-embedded.png) | ||
|
||
### Backend to Frontend communication | ||
![Backend to frontend communication diagram](./assets/backend-to-frontend.excalidraw-embedded.png) |
Binary file added
BIN
+540 KB
...t-native/src/private/fusebox/assets/backend-to-frontend.excalidraw-embedded.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+409 KB
...t-native/src/private/fusebox/assets/frontend-to-backend.excalidraw-embedded.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
120 changes: 120 additions & 0 deletions
120
packages/react-native/src/private/fusebox/setUpFuseboxReactDevToolsDispatcher.js
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow strict-local | ||
* @format | ||
* @oncall react_native | ||
*/ | ||
|
||
type JSONValue = | ||
| string | ||
| number | ||
| boolean | ||
| null | ||
| {[key: string]: JSONValue} | ||
| Array<JSONValue>; | ||
type DomainName = 'react-devtools'; | ||
|
||
class EventScope<T> { | ||
#listeners: Set<(T) => void> = new Set(); | ||
|
||
addEventListener(listener: T => void): void { | ||
this.#listeners.add(listener); | ||
} | ||
|
||
removeEventListener(listener: T => void): void { | ||
this.#listeners.delete(listener); | ||
} | ||
|
||
emit(value: T): void { | ||
const errors = []; | ||
|
||
for (const listener of this.#listeners) { | ||
try { | ||
listener(value); | ||
} catch (err) { | ||
errors.push(err); | ||
} | ||
} | ||
|
||
if (errors.length > 0) { | ||
throw new global.AggregateError( | ||
errors, | ||
'[EventScope] Some errors occurred while emitting event', | ||
); | ||
} | ||
} | ||
} | ||
|
||
class Domain { | ||
name: DomainName; | ||
onMessage: EventScope<JSONValue>; | ||
|
||
constructor(name: DomainName) { | ||
if (global[FuseboxReactDevToolsDispatcher.BINDING_NAME] == null) { | ||
throw new Error( | ||
`Could not create domain ${name}: receiving end doesn't exist`, | ||
); | ||
} | ||
|
||
this.name = name; | ||
this.onMessage = new EventScope<JSONValue>(); | ||
} | ||
|
||
sendMessage(message: JSONValue) { | ||
const messageWithDomain = {domain: this.name, message}; | ||
const serializedMessageWithDomain = JSON.stringify(messageWithDomain); | ||
|
||
global[FuseboxReactDevToolsDispatcher.BINDING_NAME]( | ||
serializedMessageWithDomain, | ||
); | ||
} | ||
} | ||
|
||
class FuseboxReactDevToolsDispatcher { | ||
static #domainNameToDomainMap: Map<DomainName, Domain> = new Map(); | ||
|
||
// Referenced and initialized from Chrome DevTools frontend. | ||
static BINDING_NAME: string = '__CHROME_DEVTOOLS_FRONTEND_BINDING__'; | ||
static onDomainInitialization: EventScope<Domain> = new EventScope<Domain>(); | ||
|
||
// Should be private, referenced from Chrome DevTools frontend only. | ||
static initializeDomain(domainName: DomainName): Domain { | ||
const domain = new Domain(domainName); | ||
|
||
this.#domainNameToDomainMap.set(domainName, domain); | ||
this.onDomainInitialization.emit(domain); | ||
|
||
return domain; | ||
} | ||
|
||
// Should be private, referenced from Chrome DevTools frontend only. | ||
static sendMessage(domainName: DomainName, message: string): void { | ||
const domain = this.#domainNameToDomainMap.get(domainName); | ||
if (domain == null) { | ||
throw new Error( | ||
`Could not send message to ${domainName}: domain doesn't exist`, | ||
); | ||
} | ||
|
||
try { | ||
const parsedMessage = JSON.parse(message); | ||
domain.onMessage.emit(parsedMessage); | ||
} catch (err) { | ||
console.error( | ||
`Error while trying to send a message to domain ${domainName}:`, | ||
err, | ||
); | ||
} | ||
} | ||
} | ||
|
||
Object.defineProperty(global, '__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__', { | ||
value: FuseboxReactDevToolsDispatcher, | ||
configurable: false, | ||
enumerable: false, | ||
writable: false, | ||
}); |