feat: add react-devtools-fusebox as third party dependency (#22)

Author: hoxyq

config/gni/devtools_grd_files.gni

@@ -608,6 +608,10 @@ grd_files_release_sources = [
   "front_end/third_party/marked/marked.js",
   "front_end/third_party/puppeteer-replay/puppeteer-replay.js",
   "front_end/third_party/puppeteer/puppeteer.js",
+  "front_end/third_party/react-devtools/package/frontend.css.js",
+  "front_end/third_party/react-devtools/package/frontend.js",
+  "front_end/third_party/react-devtools/package/importFile.worker.worker.js",
+  "front_end/third_party/react-devtools/react-devtools.js",
   "front_end/third_party/wasmparser/wasmparser.js",
   "front_end/ui/components/adorners/adorners.js",
   "front_end/ui/components/buttons/buttons.js",

front_end/panels/react_devtools/BUILD.gn

@@ -27,7 +27,9 @@ devtools_module("react_devtools") {
   sources = [ "ReactDevToolsView.ts", "ReactDevToolsModel.ts" ]
 
   deps = [
+    "../../core/sdk:bundle",
     "../../models/react_native:bundle",
+    "../../third_party/react-devtools:bundle",
     "../../ui/legacy:bundle",
   ]
 }

front_end/panels/react_devtools/ReactDevToolsModel.ts

@@ -6,7 +6,7 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as ReactNativeModels from '../../models/react_native/react_native.js';
 
-type JSONValue = null | string | number | boolean | {[key: string]: JSONValue} | JSONValue[];
+import type * as ReactDevToolsTypes from '../../third_party/react-devtools/react-devtools.js';
 
 export const enum Events {
   Initialized = 'Initialized',
@@ -15,7 +15,7 @@ export const enum Events {
 
 export type EventTypes = {
   [Events.Initialized]: void,
-  [Events.MessageReceived]: JSONValue,
+  [Events.MessageReceived]: ReactDevToolsTypes.Message,
 };
 
 export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
@@ -42,7 +42,7 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
 
     rdtModel.subscribeToDomainMessages(
       ReactDevToolsModel.FUSEBOX_BINDING_NAMESPACE,
-        message => this.onMessage(message),
+        message => this.onMessage(message as ReactDevToolsTypes.Message),
     );
     void rdtModel.initializeDomain(ReactDevToolsModel.FUSEBOX_BINDING_NAMESPACE).then(() => this.onInitialization());
   }
@@ -51,7 +51,7 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
     this.dispatchEventToListeners(Events.Initialized);
   }
 
-  async sendMessage(message: JSONValue): Promise<void> {
+  async sendMessage(message: ReactDevToolsTypes.Message): Promise<void> {
     const rdtModel = this.rdtModel;
     if (!rdtModel) {
       throw new Error('Failed to send message from ReactDevToolsModel: ReactDevToolsBindingsModel was null');
@@ -60,7 +60,7 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
     await rdtModel.sendMessage(ReactDevToolsModel.FUSEBOX_BINDING_NAMESPACE, message);
   }
 
-  onMessage(message: JSONValue): void {
+  onMessage(message: ReactDevToolsTypes.Message): void {
     this.dispatchEventToListeners(Events.MessageReceived, message);
   }
 }

front_end/third_party/additional_readme_paths.json

@@ -11,5 +11,6 @@
   "marked",
   "puppeteer",
   "puppeteer-replay",
+  "react-devtools",
   "wasmparser"
 ]

front_end/third_party/react-devtools/BUILD.gn

@@ -0,0 +1,36 @@
+# Copyright 2019 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("../../../scripts/build/ninja/devtools_entrypoint.gni")
+import("../../../scripts/build/ninja/devtools_pre_built.gni")
+import("../../../scripts/build/ninja/generate_css.gni")
+import("../../../scripts/build/ninja/vars.gni")
+import("../visibility.gni")
+
+generate_css("css_files") {
+  sources = [ "package/frontend.css" ]
+}
+
+devtools_pre_built("react-devtools") {
+  sources_are_release = false
+
+  sources = [
+    "react-devtools-tsconfig.json",
+    "package/frontend.d.ts",
+    "package/frontend.js",
+    "package/importFile.worker.worker.js"
+  ]
+}
+
+devtools_entrypoint("bundle") {
+  entrypoint = "react-devtools.ts"
+
+  deps = [
+    ":css_files",
+    ":react-devtools",
+  ]
+
+  visibility = [ "../../panels/react_devtools/*" ]
+  visibility += devtools_third_party_visibility
+}

front_end/third_party/react-devtools/README.md

@@ -0,0 +1,9 @@
+# react-devtools
+
+## Sources for this package?
+https://github.com/facebook/react/tree/main/packages/react-devtools-fusebox
+
+## How to update this package?
+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)
+2. Copy all artifacts from `build` folder to `package` folder here.
+3. Update `frontend.d.ts` if needed, type definitions are not included in the build yet.