Add React fast refresh to Sandbox and Playground (#16860)

This change enables React fast refresh in both Sandbox and Playground.
This means when changes are made to React components in .tsx files (as
long as the React components are exported), the changes will be
reflected "immediately" (within about 5 seconds or so).

Author: ryantrem

package-lock.json

@@ -5,7 +5,9 @@ import type { BuildType, DevPackageName, UMDPackageName } from "./packageMapping
 import { getPackageMappingByDevName, getPublicPackageName, isValidDevPackageName, umdPackageMapping } from "./packageMapping.js";
 import * as path from "path";
 import { camelize, copyFile } from "./utils.js";
-import type { RuleSetRule, Configuration, Compiler } from "webpack";
+import type { RuleSetRule, Configuration, Compiler, WebpackPluginInstance } from "webpack";
+import * as ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import ReactRefreshTypeScript from "react-refresh-typescript";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const externalsFunction = (excludePackages: string[] = [], type: BuildType = "umd") => {
@@ -65,12 +67,22 @@ export const getRules = (
         resourceType?: "asset/inline" | "asset/resource";
         extraRules?: RuleSetRule[];
         mode?: "development" | "production";
+        enableFastRefresh?: boolean; // for react fast refresh
     } = {
         includeAssets: true,
         includeCSS: true,
         sideEffects: true,
     }
 ) => {
+    const getCustomTransformers = options.enableFastRefresh
+        ? (program: ts.Program) => {
+              const transformers: ts.CustomTransformers = options?.tsOptions?.getCustomTransformers?.(program) ?? {};
+              transformers.before = transformers.before ?? [];
+              transformers.before.push(ReactRefreshTypeScript());
+              return transformers;
+          }
+        : options?.tsOptions?.getCustomTransformers;
+
     const rules: RuleSetRule[] = [
         {
             test: /\.tsx?$/,
@@ -79,7 +91,7 @@ export const getRules = (
             sideEffects: options.sideEffects,
             options: {
                 configFile: "tsconfig.build.json",
-                ...options.tsOptions,
+                ...{ ...options.tsOptions, getCustomTransformers },
             },
         },
         {
@@ -177,9 +189,18 @@ export const commonDevWebpackConfiguration = (
         port: number;
         static?: string[];
         showBuildProgress?: boolean;
-    }
+    },
+    additionalPlugins?: WebpackPluginInstance[]
 ) => {
     const production = env.mode === "production" || process.env.NODE_ENV === "production";
+    const enableHotReload = (env.enableHotReload !== undefined || process.env.ENABLE_HOT_RELOAD === "true") && !production ? true : false;
+
+    let plugins: WebpackPluginInstance[] | undefined = additionalPlugins;
+    if (devServerConfig && enableHotReload) {
+        plugins = plugins ?? [];
+        plugins.push(new ReactRefreshWebpackPlugin());
+    }
+
     return {
         mode: production ? "production" : "development",
         devtool: production ? "source-map" : "inline-cheap-module-source-map",
@@ -190,7 +211,7 @@ export const commonDevWebpackConfiguration = (
                   webSocketServer: production ? false : "ws",
                   compress: production,
                   server: env.enableHttps !== undefined || process.env.ENABLE_HTTPS === "true" ? "https" : "http",
-                  hot: (env.enableHotReload !== undefined || process.env.ENABLE_HOT_RELOAD === "true") && !production ? true : false,
+                  hot: enableHotReload,
                   liveReload: (env.enableLiveReload !== undefined || process.env.ENABLE_LIVE_RELOAD === "true") && !production ? true : false,
                   headers: {
                       // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -217,6 +238,7 @@ export const commonDevWebpackConfiguration = (
                   devtoolModuleFilenameTemplate: production ? "webpack://[namespace]/[resource-path]?[loaders]" : "file:///[absolute-resource-path]",
               }
             : undefined,
+        plugins,
     };
 };
 

packages/dev/buildTools/src/webpackTools.ts

@@ -1,9 +1,8 @@
 const path = require("path");
 const webpackTools = require("@dev/build-tools").webpackTools;
-const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
-const ReactRefreshTypeScript = require("react-refresh-typescript").default;
 
 module.exports = (env) => {
+    const production = env.mode === "production" || process.env.NODE_ENV === "production";
     return {
         entry: "./test/app/index.ts",
 
@@ -36,16 +35,12 @@ module.exports = (env) => {
             rules: webpackTools.getRules({
                 sideEffects: true,
                 includeCSS: false,
+                enableFastRefresh: !production,
                 tsOptions: {
                     configFile: "tsconfig.build.json",
-                    getCustomTransformers: () => ({
-                        before: [ReactRefreshTypeScript()].filter(Boolean),
-                    }),
                     transpileOnly: true,
                 },
             }),
         },
-
-        plugins: [new ReactRefreshWebpackPlugin()].filter(Boolean),
     };
 };

packages/dev/inspector-v2/webpack.config.js

@@ -15,6 +15,7 @@
     "devDependencies": {
         "@dev/build-tools": "1.0.0",
         "@dev/core": "1.0.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
         "@svgr/webpack": "^7.0.0",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
@@ -27,6 +28,8 @@
         "monaco-editor-webpack-plugin": "^4.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-refresh": "^0.17.0",
+        "react-refresh-typescript": "^2.0.10",
         "sass-loader": "^16.0.0",
         "style-loader": "^3.3.0",
         "ts-debounce": "4.0.0",

packages/tools/playground/package.json

@@ -3,18 +3,26 @@ const webpackTools = require("@dev/build-tools").webpackTools;
 const path = require("path");
 
 module.exports = (env) => {
+    const production = env.mode === "production" || process.env.NODE_ENV === "production";
     const commonConfig = {
         entry: "./src/legacy/legacy.ts",
         ...webpackTools.commonDevWebpackConfiguration(
             {
                 ...env,
                 outputFilename: "babylon.playground.js",
                 dirName: __dirname,
+                enableHotReload: true,
             },
             {
                 static: ["public"],
                 port: process.env.PLAYGROUND_PORT || 1338,
-            }
+            },
+            [
+                new MonacoWebpackPlugin({
+                    // publicPath: "public/",
+                    languages: ["typescript", "javascript"],
+                }),
+            ]
         ),
         resolve: {
             extensions: [".js", ".ts", ".tsx", ".scss", "*.svg"],
@@ -71,14 +79,9 @@ module.exports = (env) => {
                         rootDir: "../../",
                     },
                 },
+                enableFastRefresh: !production,
             }),
         },
-        plugins: [
-            new MonacoWebpackPlugin({
-                // publicPath: "public/",
-                languages: ["typescript", "javascript"],
-            }),
-        ],
     };
     return commonConfig;
 };

packages/tools/playground/webpack.config.js

@@ -29,6 +29,7 @@
         "@dev/core": "1.0.0",
         "@dev/loaders": "1.0.0",
         "@dev/inspector-v2": "1.0.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
         "@svgr/webpack": "^7.0.0",
         "@types/dagre": "^0.7.47",
         "@types/react": "^18.0.0",
@@ -38,6 +39,8 @@
         "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.4.0",
         "mini-css-extract-plugin": "^2.4.3",
+        "react-refresh": "^0.17.0",
+        "react-refresh-typescript": "^2.0.10",
         "sass-loader": "^16.0.0",
         "style-loader": "^3.3.0",
         "url-loader": "^4.1.1",

packages/tools/sandbox/package.json

@@ -2,13 +2,15 @@ const path = require("path");
 const webpackTools = require("@dev/build-tools").webpackTools;
 
 module.exports = (env) => {
+    const production = env.mode === "production" || process.env.NODE_ENV === "production";
     const commonConfig = {
         entry: "./src/legacy/legacy.ts",
         ...webpackTools.commonDevWebpackConfiguration(
             {
                 ...env,
                 outputFilename: "babylon.sandbox.js",
                 dirName: __dirname,
+                enableHotReload: true,
             },
             {
                 static: ["public"],
@@ -50,9 +52,13 @@ module.exports = (env) => {
             // React, react dom etc'
         ],
         module: {
-            rules: webpackTools.getRules(),
+            rules: webpackTools.getRules({
+                includeAssets: true,
+                includeCSS: true,
+                sideEffects: true,
+                enableFastRefresh: !production,
+            }),
         },
-        plugins: [],
     };
     return commonConfig;
 };