mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Fusebox/RDT: setup global for Fusebox React DevTools dispatcher (#43418)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/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 - https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/15 Reviewed By: motiz88 Differential Revision: D54770207 fbshipit-source-id: 0f0f04a338b5c7eab817c843a99b07cca95e57fd
This commit is contained in:
committed by
Facebook GitHub Bot
parent
78d523d178
commit
aacde17954
@@ -0,0 +1 @@
|
||||
assets
|
||||
@@ -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
|
||||

|
||||
|
||||
### Backend to Frontend communication
|
||||

|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 540 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 409 KiB |
+108
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* 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 {
|
||||
// Assuming that listeners won't throw.
|
||||
for (const listener of this.#listeners) {
|
||||
listener(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
Reference in New Issue
Block a user