Skip to content

Commit 7361921

Browse files
authored
feat: add react-devtools-fusebox as third party dependency (#22)
1 parent 35aa264 commit 7361921

File tree

12 files changed

+61557
-5
lines changed

12 files changed

+61557
-5
lines changed

config/gni/devtools_grd_files.gni

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -608,6 +608,10 @@ grd_files_release_sources = [
608608
"front_end/third_party/marked/marked.js",
609609
"front_end/third_party/puppeteer-replay/puppeteer-replay.js",
610610
"front_end/third_party/puppeteer/puppeteer.js",
611+
"front_end/third_party/react-devtools/package/frontend.css.js",
612+
"front_end/third_party/react-devtools/package/frontend.js",
613+
"front_end/third_party/react-devtools/package/importFile.worker.worker.js",
614+
"front_end/third_party/react-devtools/react-devtools.js",
611615
"front_end/third_party/wasmparser/wasmparser.js",
612616
"front_end/ui/components/adorners/adorners.js",
613617
"front_end/ui/components/buttons/buttons.js",

front_end/panels/react_devtools/BUILD.gn

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ devtools_module("react_devtools") {
2727
sources = [ "ReactDevToolsView.ts", "ReactDevToolsModel.ts" ]
2828

2929
deps = [
30+
"../../core/sdk:bundle",
3031
"../../models/react_native:bundle",
32+
"../../third_party/react-devtools:bundle",
3133
"../../ui/legacy:bundle",
3234
]
3335
}

front_end/panels/react_devtools/ReactDevToolsModel.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import * as SDK from '../../core/sdk/sdk.js';
77
import * as ReactNativeModels from '../../models/react_native/react_native.js';
88

9-
type JSONValue = null | string | number | boolean | {[key: string]: JSONValue} | JSONValue[];
9+
import type * as ReactDevToolsTypes from '../../third_party/react-devtools/react-devtools.js';
1010

1111
export const enum Events {
1212
Initialized = 'Initialized',
@@ -15,7 +15,7 @@ export const enum Events {
1515

1616
export type EventTypes = {
1717
[Events.Initialized]: void,
18-
[Events.MessageReceived]: JSONValue,
18+
[Events.MessageReceived]: ReactDevToolsTypes.Message,
1919
};
2020

2121
export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
@@ -42,7 +42,7 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
4242

4343
rdtModel.subscribeToDomainMessages(
4444
ReactDevToolsModel.FUSEBOX_BINDING_NAMESPACE,
45-
message => this.onMessage(message),
45+
message => this.onMessage(message as ReactDevToolsTypes.Message),
4646
);
4747
void rdtModel.initializeDomain(ReactDevToolsModel.FUSEBOX_BINDING_NAMESPACE).then(() => this.onInitialization());
4848
}
@@ -51,7 +51,7 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
5151
this.dispatchEventToListeners(Events.Initialized);
5252
}
5353

54-
async sendMessage(message: JSONValue): Promise<void> {
54+
async sendMessage(message: ReactDevToolsTypes.Message): Promise<void> {
5555
const rdtModel = this.rdtModel;
5656
if (!rdtModel) {
5757
throw new Error('Failed to send message from ReactDevToolsModel: ReactDevToolsBindingsModel was null');
@@ -60,7 +60,7 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
6060
await rdtModel.sendMessage(ReactDevToolsModel.FUSEBOX_BINDING_NAMESPACE, message);
6161
}
6262

63-
onMessage(message: JSONValue): void {
63+
onMessage(message: ReactDevToolsTypes.Message): void {
6464
this.dispatchEventToListeners(Events.MessageReceived, message);
6565
}
6666
}

front_end/third_party/additional_readme_paths.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@
1111
"marked",
1212
"puppeteer",
1313
"puppeteer-replay",
14+
"react-devtools",
1415
"wasmparser"
1516
]
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Copyright 2019 The Chromium Authors. All rights reserved.
2+
# Use of this source code is governed by a BSD-style license that can be
3+
# found in the LICENSE file.
4+
5+
import("../../../scripts/build/ninja/devtools_entrypoint.gni")
6+
import("../../../scripts/build/ninja/devtools_pre_built.gni")
7+
import("../../../scripts/build/ninja/generate_css.gni")
8+
import("../../../scripts/build/ninja/vars.gni")
9+
import("../visibility.gni")
10+
11+
generate_css("css_files") {
12+
sources = [ "package/frontend.css" ]
13+
}
14+
15+
devtools_pre_built("react-devtools") {
16+
sources_are_release = false
17+
18+
sources = [
19+
"react-devtools-tsconfig.json",
20+
"package/frontend.d.ts",
21+
"package/frontend.js",
22+
"package/importFile.worker.worker.js"
23+
]
24+
}
25+
26+
devtools_entrypoint("bundle") {
27+
entrypoint = "react-devtools.ts"
28+
29+
deps = [
30+
":css_files",
31+
":react-devtools",
32+
]
33+
34+
visibility = [ "../../panels/react_devtools/*" ]
35+
visibility += devtools_third_party_visibility
36+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# react-devtools
2+
3+
## Sources for this package?
4+
https://github.com/facebook/react/tree/main/packages/react-devtools-fusebox
5+
6+
## How to update this package?
7+
1. Clone [`react`](https://github.com/facebook/react) repo and run `yarn build` in [`packages/react-devtools-fusebox`](https://github.com/facebook/react/tree/main/packages/react-devtools-fusebox)
8+
2. Copy all artifacts from `build` folder to `package` folder here.
9+
3. Update `frontend.d.ts` if needed, type definitions are not included in the build yet.

0 commit comments

Comments
 (0)