[DevTools] Expose "view source" options to Fusebox integration (#28973)
## Summary Exposes the APIs needed by React Native DevTools (Fusebox) to implement the "view element source" and "view attribute source" features. ## How did you test this change? 1. `yarn build` in `react-devtools-fusebox` 2. Copy artifacts to rn-chrome-devtools-frontend 3. Write some additional glue code to implement `viewElementSourceFunction` in our CDT fork. 4. Test the feature manually. https://github.com/facebook/react/assets/2246565/12667018-100a-4b3f-957a-06c07f2af41a
Moti Zilberman committed
May 7, 2024 at 16:06 UTC
afe54bfcbf744eec8640f6d0006d50329682a43a
2 files changed
+50
-19
packages/react-devtools-fusebox/src/frontend.d.ts
+31
-18
@@ -5,23 +5,17 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-export type MessagePayload =
9
- | null
10
- | string
11
- | number
12
- | boolean
13
- | {[key: string]: MessagePayload}
14
- | MessagePayload[];
15
-export type Message = {event: string; payload?: MessagePayload};
8
+export type MessagePayload = null | string | number | boolean | { [key: string]: MessagePayload } | MessagePayload[];
9
+export type Message = { event: string, payload?: MessagePayload };
10
11
export type WallListener = (message: Message) => void;
12
export type Wall = {
19
- listen: (fn: WallListener) => Function;
20
- send: (event: string, payload?: MessagePayload) => void;
13
+ listen: (fn: WallListener) => Function,
14
+ send: (event: string, payload?: MessagePayload) => void,
15
};
16
17
export type Bridge = {
24
- shutdown: () => void;
18
+ shutdown: () => void,
19
};
20
export type Store = Object;
21
export type BrowserTheme = 'dark' | 'light';
@@ -29,12 +23,31 @@ export type BrowserTheme = 'dark' | 'light';
23
export function createBridge(wall: Wall): Bridge;
24
export function createStore(bridge: Bridge): Store;
25
26
+export type Source = {
27
+ sourceURL: string,
28
+ line: number,
29
+ column: number,
30
+};
31
+export type ViewElementSource = (
32
+ source: Source,
33
+ symbolicatedSource: Source | null,
34
+) => void;
35
+export type ViewAttributeSource = (
36
+ id: number,
37
+ path: Array<string | number>,
38
+) => void;
39
+export type CanViewElementSource = (
40
+ source: Source,
41
+ symbolicatedSource: Source | null,
42
+) => boolean;
43
+
44
export type InitializationOptions = {
33
- bridge: Bridge;
34
- store: Store;
35
- theme?: BrowserTheme;
45
+ bridge: Bridge,
46
+ store: Store,
47
+ theme?: BrowserTheme,
48
+ viewAttributeSourceFunction?: ViewAttributeSource,
49
+ viewElementSourceFunction?: ViewElementSource,
50
+ canViewElementSourceFunction?: CanViewElementSource,
51
};
37
-export function initialize(
38
- node: Element | Document,
39
- options: InitializationOptions,
40
-): void;
52
+
53
+export function initialize(node: Element | Document, options: InitializationOptions): void;
packages/react-devtools-fusebox/src/frontend.js
+19
-1
@@ -18,6 +18,11 @@ import type {
18
Wall,
19
} from 'react-devtools-shared/src/frontend/types';
20
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
21
+import type {
22
+ ViewAttributeSource,
23
+ ViewElementSource,
24
+ CanViewElementSource,
25
+} from 'react-devtools-shared/src/devtools/views/DevTools';
26
27
type Config = {
28
checkBridgeProtocolCompatibility?: boolean,
@@ -46,13 +51,23 @@ type InitializationOptions = {
51
bridge: FrontendBridge,
52
store: Store,
53
theme?: BrowserTheme,
54
+ viewAttributeSourceFunction?: ViewAttributeSource,
55
+ viewElementSourceFunction?: ViewElementSource,
56
+ canViewElementSourceFunction?: CanViewElementSource,
57
};
58
59
export function initialize(
60
contentWindow: Element | Document,
61
options: InitializationOptions,
62
): void {
55
- const {bridge, store, theme = 'light'} = options;
63
+ const {
64
+ bridge,
65
+ store,
66
+ theme = 'light',
67
+ viewAttributeSourceFunction,
68
+ viewElementSourceFunction,
69
+ canViewElementSourceFunction,
70
+ } = options;
71
const root = createRoot(contentWindow);
72
73
root.render(
@@ -63,6 +78,9 @@ export function initialize(
78
showTabBar={true}
79
warnIfLegacyBackendDetected={true}
80
enabledInspectedElementContextMenu={true}
81
+ viewAttributeSourceFunction={viewAttributeSourceFunction}
82
+ viewElementSourceFunction={viewElementSourceFunction}
83
+ canViewElementSourceFunction={canViewElementSourceFunction}
84
/>,
85
);
86
}