Merge pull request #49181 from software-mansion-labs/fix-hot-reloading

Enable Fast Refresh for Web and Desktop Platforms

config/webpack/CustomVersionFilePlugin.ts

@@ -4,23 +4,31 @@ import type {Compiler} from 'webpack';
 import {version as APP_VERSION} from '../../package.json';
 
 /**
- * Simple webpack plugin that writes the app version (from package.json) and the webpack hash to './version.json'
+ * Custom webpack plugin that writes the app version (from package.json) and the webpack hash to './version.json'
  */
 class CustomVersionFilePlugin {
     apply(compiler: Compiler) {
         compiler.hooks.done.tap(this.constructor.name, () => {
             const versionPath = path.join(__dirname, '/../../dist/version.json');
-            fs.mkdir(path.dirname(versionPath), {recursive: true}, (directoryError) => {
-                if (directoryError) {
-                    throw directoryError;
-                }
-                fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, (error) => {
-                    if (!error) {
-                        return;
+
+            fs.promises
+                .mkdir(path.dirname(versionPath), {recursive: true})
+                .then(() => fs.promises.readFile(versionPath, 'utf8'))
+                .then((existingVersion) => {
+                    const {version} = JSON.parse(existingVersion) as {version: string};
+
+                    if (version !== APP_VERSION) {
+                        fs.promises.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), 'utf8');
+                    }
+                })
+                .catch((err: NodeJS.ErrnoException) => {
+                    if (err.code === 'ENOENT') {
+                        // if file doesn't exist
+                        fs.promises.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), 'utf8');
+                    } else {
+                        throw err;
                     }
-                    throw error;
                 });
-            });
         });
     }
 }

config/webpack/webpack.dev.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import path from 'path';
 import portfinder from 'portfinder';
 import {TimeAnalyticsPlugin} from 'time-analytics-webpack-plugin';
@@ -54,15 +56,15 @@ const getConfiguration = (environment: Environment): Promise<Configuration> =>
                     },
                 },
                 headers: {
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
                     'Document-Policy': 'js-profiling',
                 },
             },
             plugins: [
                 new DefinePlugin({
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
                     'process.env.PORT': port,
+                    'process.env.NODE_ENV': JSON.stringify('development'),
                 }),
+                new ReactRefreshWebpackPlugin({overlay: {sockProtocol: 'wss'}}),
             ],
             cache: {
                 type: 'filesystem',
@@ -82,7 +84,7 @@ const getConfiguration = (environment: Environment): Promise<Configuration> =>
             },
         });
 
-        return TimeAnalyticsPlugin.wrap(config);
+        return TimeAnalyticsPlugin.wrap(config, {plugin: {exclude: ['ReactRefreshPlugin']}});
     });
 
 export default getConfiguration;

package.json

@@ -213,6 +213,7 @@
     "@perf-profiler/profiler": "^0.10.10",
     "@perf-profiler/reporter": "^0.9.0",
     "@perf-profiler/types": "^0.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@react-native-community/eslint-config": "3.2.0",
     "@react-native/babel-preset": "0.75.2",
     "@react-native/metro-config": "0.75.2",
@@ -308,6 +309,7 @@
     "react-compiler-runtime": "^19.0.0-beta-8a03594-20241020",
     "react-is": "^18.3.1",
     "react-native-clean-project": "^4.0.0-alpha4.0",
+    "react-refresh": "^0.14.2",
     "react-test-renderer": "18.3.1",
     "reassure": "^1.0.0-rc.4",
     "semver": "7.5.2",
@@ -367,13 +369,11 @@
   },
   "electronmon": {
     "patterns": [
-      "!node_modules",
-      "!node_modules/**/*",
-      "!**/*.map",
+      "!src/**",
       "!ios/**",
       "!android/**",
-      "*.test.*",
-      "*.spec.*"
+      "!tests/**",
+      "*.test.*"
     ]
   },
   "engines": {