Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/react-native/src/private/fusebox/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
assets
12 changes: 12 additions & 0 deletions packages/react-native/src/private/fusebox/README.md
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)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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,
});