Import React Concurrent Mode Profiler

.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

package.json

@@ -4,35 +4,35 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.8.0",
-    "@babel/code-frame": "^7.8.0",
-    "@babel/core": "^7.8.0",
-    "@babel/helper-module-imports": "^7.8.0",
-    "@babel/parser": "^7.8.0",
-    "@babel/plugin-external-helpers": "^7.8.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.0",
-    "@babel/plugin-syntax-jsx": "^7.8.0",
-    "@babel/plugin-transform-arrow-functions": "^7.8.0",
-    "@babel/plugin-transform-async-to-generator": "^7.8.0",
-    "@babel/plugin-transform-block-scoped-functions": "^7.8.0",
-    "@babel/plugin-transform-block-scoping": "^7.8.0",
-    "@babel/plugin-transform-classes": "^7.8.0",
-    "@babel/plugin-transform-computed-properties": "^7.8.0",
-    "@babel/plugin-transform-destructuring": "^7.8.0",
-    "@babel/plugin-transform-for-of": "^7.8.0",
-    "@babel/plugin-transform-literals": "^7.8.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.8.0",
-    "@babel/plugin-transform-object-super": "^7.8.0",
-    "@babel/plugin-transform-parameters": "^7.8.0",
-    "@babel/plugin-transform-react-jsx-source": "^7.8.0",
-    "@babel/plugin-transform-shorthand-properties": "^7.8.0",
-    "@babel/plugin-transform-spread": "^7.8.0",
-    "@babel/plugin-transform-template-literals": "^7.8.0",
-    "@babel/preset-flow": "^7.8.0",
-    "@babel/preset-react": "^7.8.0",
-    "@babel/traverse": "^7.8.0",
+    "@babel/cli": "^7.10.5",
+    "@babel/code-frame": "^7.10.4",
+    "@babel/core": "^7.11.1",
+    "@babel/helper-module-imports": "^7.10.4",
+    "@babel/parser": "^7.11.3",
+    "@babel/plugin-external-helpers": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-jsx": "^7.10.4",
+    "@babel/plugin-transform-arrow-functions": "^7.10.4",
+    "@babel/plugin-transform-async-to-generator": "^7.10.4",
+    "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
+    "@babel/plugin-transform-block-scoping": "^7.11.1",
+    "@babel/plugin-transform-classes": "^7.10.4",
+    "@babel/plugin-transform-computed-properties": "^7.10.4",
+    "@babel/plugin-transform-destructuring": "^7.10.4",
+    "@babel/plugin-transform-for-of": "^7.10.4",
+    "@babel/plugin-transform-literals": "^7.10.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+    "@babel/plugin-transform-object-super": "^7.10.4",
+    "@babel/plugin-transform-parameters": "^7.10.5",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
+    "@babel/plugin-transform-shorthand-properties": "^7.10.4",
+    "@babel/plugin-transform-spread": "^7.11.0",
+    "@babel/plugin-transform-template-literals": "^7.10.5",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/traverse": "^7.11.0",
     "@mattiasbuelens/web-streams-polyfill": "^0.3.2",
     "art": "0.10.1",
     "babel-eslint": "^10.0.3",

packages/react-devtools-extensions/package.json

@@ -18,13 +18,13 @@
     "test:edge": "node ./edge/test"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
-    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@babel/preset-env": "^7.1.6",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.10.4",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "archiver": "^3.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",

packages/react-devtools-inline/package.json

@@ -22,13 +22,13 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
-    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@babel/preset-env": "^7.1.6",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.10.4",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",

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;
+}