[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)

facebook · Jul 22, 2021 · f4161c3 · f4161c3
1 parent ae5d261
commit f4161c3
Show file tree

Hide file tree

Showing 63 changed files with 931 additions and 1,128 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -227,48 +227,6 @@ jobs:
       - store_artifacts:
           path: ./build/devtools.tgz
 
-  build_devtools_scheduling_profiler:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_yarn_cache
-      - *restore_node_modules
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
-      - run:
-          name: Build and archive
-          command: |
-            mkdir -p build/devtools
-            cd packages/react-devtools-scheduling-profiler
-            yarn build
-            cd dist
-            tar -zcvf ../../../build/devtools-scheduling-profiler.tgz .
-      - store_artifacts:
-          path: ./build/devtools-scheduling-profiler.tgz
-      - persist_to_workspace:
-          root: packages/react-devtools-scheduling-profiler
-          paths:
-            - dist
-
-  deploy_devtools_scheduling_profiler:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace:
-          at: packages/react-devtools-scheduling-profiler
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Deploy
-          command: |
-            cd packages/react-devtools-scheduling-profiler
-            yarn vercel deploy dist --prod --confirm --token $SCHEDULING_PROFILER_DEPLOY_VERCEL_TOKEN
-
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -408,16 +366,6 @@ workflows:
       - build_devtools_and_process_artifacts:
           requires:
             - yarn_build
-      - build_devtools_scheduling_profiler:
-          requires:
-            - yarn_build
-      - deploy_devtools_scheduling_profiler:
-          requires:
-            - build_devtools_scheduling_profiler
-          filters:
-            branches:
-              only:
-                - main
 
   # New workflow that will replace "stable" and "experimental"
   build_and_test:

diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
@@ -18,6 +18,15 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
@@ -62,17 +71,25 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              inline: true,
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
@@ -37,6 +37,7 @@
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
     "firefox-profile": "^1.0.2",
     "fs-extra": "^4.0.2",
     "jest-fetch-mock": "^3.0.3",
@@ -52,7 +53,6 @@
     "source-map": "^0.8.0-beta.0",
     "sourcemap-codec": "^1.4.8",
     "style-loader": "^0.23.1",
-    "web-ext": "^3.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
@@ -140,6 +140,8 @@ function createPanelIfReactLoaded() {
           isProfiling,
           supportsReloadAndProfile: isChrome,
           supportsProfiling,
+          // At this time, the scheduling profiler can only parse Chrome performance profiles.
+          supportsSchedulingProfiler: isChrome,
           supportsTraceUpdates: true,
         });
         store.profilerStore.profilingData = profilingData;

diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js
@@ -9,9 +9,8 @@
  * @flow
  */
 
-// This file uses workerize to load ./parseHookNames.worker as a webworker
-// and instanciates it, exposing flow typed functions that can be used
-// on other files.
+// This file uses workerize to load ./parseHookNames.worker as a webworker and instanciates it,
+// exposing flow typed functions that can be used on other files.
 
 import * as parseHookNamesModule from './parseHookNames';
 import WorkerizedParseHookNames from './parseHookNames.worker';

diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
@@ -1,3 +1,10 @@
+/**
+ * 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.
+ */
+
 import * as parseHookNamesModule from './parseHookNames';
 
 export const parseHookNames = parseHookNamesModule.parseHookNames;

diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
@@ -19,6 +19,15 @@ const DEVTOOLS_VERSION = getVersionString();
 
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -81,17 +90,25 @@ module.exports = {
     ],
 
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              inline: true,
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,
@@ -109,11 +126,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.worker\.js$/,
-        // inline: true due to limitations with extensions
-        use: {loader: 'workerize-loader', options: {inline: true}},
-      },
     ],
   },
 };
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
@@ -34,10 +34,12 @@
     "babel-loader": "^8.0.4",
     "cross-env": "^3.1.4",
     "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
     "raw-loader": "^3.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "worker-loader": "^3.0.3"
   }
 }
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
@@ -24,6 +24,7 @@ export function createStore(bridge: FrontendBridge): Store {
   return new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
+    supportsSchedulingProfiler: true,
   });
 }
 

diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
@@ -16,6 +16,15 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
@@ -65,17 +74,25 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              inline: true,
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,

diff --git a/packages/react-devtools-scheduling-profiler/README.md b/packages/react-devtools-scheduling-profiler/README.md
@@ -1,15 +1,3 @@
-# Experimental React Concurrent Mode Profiler
+# React Concurrent Mode Profiler
 
-https://react-devtools-scheduling-profiler.vercel.app/
-
-## Setting up continuous deployment with CircleCI and Vercel
-
-These instructions are intended for internal use, but may be useful if you are setting up a custom production deployment of the scheduling profiler.
-
-1. Create a Vercel token at https://vercel.com/account/tokens.
-2. Configure CircleCI:
-    1. In CircleCI, navigate to the repository's Project Settings.
-    2. In the Advanced tab, ensure that "Pass secrets to builds from forked pull requests" is set to false.
-    3. In the Environment Variables tab, add the Vercel token as a new `SCHEDULING_PROFILER_DEPLOY_VERCEL_TOKEN` environment variable.
-
-The Vercel project will be created when the deploy job runs.
+This package contains the new/experimental "scheduling profiler" for React 18. This profiler exists as its own project because it was initially deployed as a standalone app. It has since been moved into the DevTools Profiler under the "Scheduling" tab. This package will likely eventually be moved into `react-devtools-shared`.
diff --git a/packages/react-devtools-scheduling-profiler/buildUtils.js b/packages/react-devtools-scheduling-profiler/buildUtils.js
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,12 +1,8 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "0.0.0",
+  "version": "4.14.0",
   "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",

diff --git a/packages/react-devtools-scheduling-profiler/src/App.css b/packages/react-devtools-scheduling-profiler/src/App.css