Import React Concurrent Mode Profiler (#19634)

Co-authored-by: Brian Vaughn <[email protected]>
Co-authored-by: Kartik Choudhary <[email protected]>

.eslintignore

@@ -18,4 +18,6 @@ packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-inline/dist
-packages/react-devtools-shell/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-scheduling-profiler/dist
+packages/react-devtools-scheduling-profiler/static

.gitignore

@@ -34,4 +34,5 @@ packages/react-devtools-extensions/firefox/*.pem
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/.tempUserDataDir
 packages/react-devtools-inline/dist
-packages/react-devtools-shell/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-scheduling-profiler/dist

.prettierignore

@@ -3,4 +3,6 @@ packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-inline/dist
-packages/react-devtools-shell/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-scheduling-profiler/dist
+packages/react-devtools-scheduling-profiler/static

packages/react-devtools-scheduling-profiler/README.md

@@ -0,0 +1,3 @@
+# Experimental React Concurrent Mode Profiler
+
+- Deployed at: https://react-scheduling-profiler.vercel.app

packages/react-devtools-scheduling-profiler/package.json

@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "name": "react-devtools-scheduling-profiler",
+  "version": "0.0.1",
+  "license": "MIT",
+  "scripts": {
+    "build": "cross-env NODE_ENV=production cross-env TARGET=remote webpack --config webpack.config.js",
+    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open"
+  },
+  "dependencies": {
+    "@elg/speedscope": "1.9.0-a6f84db",
+    "clipboard-js": "^0.3.6",
+    "memoize-one": "^5.1.1",
+    "nullthrows": "^1.1.1",
+    "pretty-ms": "^7.0.0",
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "regenerator-runtime": "^0.13.7"
+  },
+  "devDependencies": {
+    "babel-loader": "^8.1.0",
+    "css-loader": "^4.2.1",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "style-loader": "^1.2.1",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  }
+}

packages/react-devtools-scheduling-profiler/src/App.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactProfilerData} from './types';
+
+import * as React from 'react';
+import {useState} from 'react';
+
+import ImportPage from './ImportPage';
+import CanvasPage from './CanvasPage';
+
+export default function App() {
+  const [profilerData, setProfilerData] = useState<ReactProfilerData | null>(
+    null,
+  );
+
+  if (profilerData) {
+    return <CanvasPage profilerData={profilerData} />;
+  } else {
+    return <ImportPage onDataImported={setProfilerData} />;
+  }
+}

packages/react-devtools-scheduling-profiler/src/CanvasPage.css

@@ -0,0 +1,7 @@
+.CanvasPage {
+  position: absolute;
+  top: 0.5rem;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+}