Scheduling Profiler: Add Fast Refresh (#19757)

Author: taneliang

package.json

@@ -104,7 +104,7 @@
   },
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer --type=NODE",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE",
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",

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

@@ -17,6 +17,7 @@
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
     "babel-loader": "^8.1.0",
     "css-loader": "^4.2.1",
     "file-loader": "^6.0.0",

packages/react-devtools-scheduling-profiler/webpack.config.js

@@ -3,23 +3,24 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   console.error('NODE_ENV not set');
   process.exit(1);
 }
+const __DEV__ = NODE_ENV === 'development';
 
 const TARGET = process.env.TARGET;
 if (!TARGET) {
   console.error('TARGET not set');
   process.exit(1);
 }
+const shouldUseDevServer = TARGET === 'local';
 
 const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
 
-const __DEV__ = NODE_ENV === 'development';
-
 const imageInlineSizeLimit = 10000;
 
 const config = {
@@ -32,6 +33,7 @@ const config = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-refresh': resolve(builtModulesDir, 'react-refresh'),
     },
   },
   plugins: [
@@ -43,7 +45,8 @@ const config = {
     new HtmlWebpackPlugin({
       title: 'React Concurrent Mode Profiler',
     }),
-  ],
+    shouldUseDevServer && new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
   module: {
     rules: [
       {
@@ -56,6 +59,9 @@ const config = {
             'react-devtools-shared',
             'babel.config.js',
           ),
+          plugins: shouldUseDevServer
+            ? [resolve(builtModulesDir, 'react-refresh/babel')]
+            : [],
         },
       },
       {
@@ -87,7 +93,7 @@ const config = {
   },
 };
 
-if (TARGET === 'local') {
+if (shouldUseDevServer) {
   config.devServer = {
     hot: true,
     port: 8080,

yarn.lock

@@ -1821,6 +1821,18 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
+"@pmmmwh/react-refresh-webpack-plugin@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.1.tgz#a4db0ed8e58c2f8566161c9a8cdf1d095c9a891b"
+  integrity sha512-MzM87WdX2r2KRFfhEho7oGyK1XRE/J9WwjB3v6oLQHN0dzBypBZxSWjnoYx+RWneRCsg8Sin1myf+EjX1fqIbQ==
+  dependencies:
+    ansi-html "^0.0.7"
+    error-stack-parser "^2.0.6"
+    html-entities "^1.2.1"
+    native-url "^0.2.6"
+    schema-utils "^2.6.5"
+    source-map "^0.7.3"
+
 "@reach/auto-id@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
@@ -2592,7 +2604,7 @@ ansi-gray@^0.1.1:
   dependencies:
     ansi-wrap "0.1.0"
 
-ansi-html@0.0.7:
+ansi-html@0.0.7, ansi-html@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
   integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
@@ -9509,6 +9521,13 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+native-url@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.2.6.tgz#ca1258f5ace169c716ff44eccbddb674e10399ae"
+  integrity sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==
+  dependencies:
+    querystring "^0.2.0"
+
 natural-compare-lite@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
@@ -10900,7 +10919,7 @@ querystring-es3@^0.2.0, querystring-es3@~0.2.0:
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
   integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
 
-querystring@0.2.0:
+querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=