Hot Module Replacement (HMR) Integration

solving issue #1255

This project implements Hot Module Replacement (HMR) for a React-based Chrome extension, allowing developers to see real-time changes in their popup component without needing to refresh the entire extension. The following outlines the configuration and structure necessary for achieving this setup.

#### Key Components

1. **Webpack Configuration (`webpack.config.js`)**:
   - Configures Webpack for development and production modes, specifying the entry point and output settings.
   - Enables HMR in the development server for instant updates.

2. **Entry Point (`src/popup.js`)**:
   - Contains the main logic for the popup component, integrating the HMR logic to allow for module updates without a full reload.

3. **Index File (`src/index.js`)**:
   - Updated to support HMR with checks for `module.hot`, ensuring that the component re-renders on updates without refreshing the entire popup.

4. **Package Configuration (`package.json`)**:
   - Includes scripts for building and serving the application, specifying configurations needed for both development and production.

5. **Development Server**:
   - The command `npm start` launches a development server with HMR enabled, providing a smooth development experience.

#### Summary of Changes

- **HMR Logic**:
  - Added in `popup.js` using `if (module.hot) { ... }` to ensure updates are reflected in real-time.
  - Implemented in `index.js` to facilitate automatic re-rendering of the popup component on code changes.

- **Webpack Dev Server**: Configured with `hot: true` to support HMR functionality.

- **File Structure**: Organized files into a clear structure, facilitating maintainability and ease of access.

### Benefits

Implementing HMR improves the development workflow by reducing the time spent on refreshing and waiting for the extension to reload. This results in a more productive environment, allowing for faster iteration and debugging of features.

browser-extension/package.json

@@ -9,8 +9,8 @@
 		"lint:css": "stylelint source/**/*.css",
 		"lint-fix": "run-p 'lint:* -- --fix'",
 		"test": "run-s lint:* build",
+		"start": "webpack serve --mode=development --hot --open",
  	 	"build": "webpack --mode=production",
-		"start": "webpack --mode=development --watch",
 		"release:cws": "webstore upload --source=dist --auto-publish",
 		"release:amo": "web-ext-submit --source-dir dist",
 		"release": "run-s build release:*"

browser-extension/src/popup.js

@@ -133,3 +133,11 @@ ReactDOM.render(
   isChrome() ? <URLOpenerChrome /> : <URLOpenerNonChrome />,
   document.getElementById("app")
 );
+
+// HMR integration
+if (module.hot) {
+  module.hot.accept('./popup', () => {
+    const NextPopup = require('./popup').default;
+    ReactDOM.render(<NextPopup />, document.getElementById('app'));
+  });
+}

browser-extension/webpack.config.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const SizePlugin = require('size-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -10,10 +11,16 @@ module.exports = {
   entry: {
     background: './src/background',
     popup: './src/popup',
+    // Add HMR client
+    main: [
+      'webpack-hot-middleware/client?reload=true', // Use 'reload=true' for CSS
+      './src/index.js', // Adjust to your main file
+    ],
   },
   output: {
     path: path.join(__dirname, 'dist'),
-		filename: '[name].js'
+    filename: '[name].js',
+    publicPath: '/', // Required for HMR
   },
   module: {
     rules: [
@@ -34,6 +41,7 @@ module.exports = {
               "@babel/plugin-proposal-object-rest-spread",
               "@babel/plugin-proposal-class-properties",
               "@babel/plugin-transform-runtime",
+              'react-refresh/babel', // Add React Refresh for HMR
             ],
           },
         },
@@ -45,8 +53,10 @@ module.exports = {
     ],
   },
   plugins: [
+    new webpack.HotModuleReplacementPlugin(), // Enable HMR
     new SizePlugin(),
-		new CopyWebpackPlugin([
+    new CopyWebpackPlugin({
+      patterns: [
         {
           from: '**/*',
           context: 'public',
@@ -54,7 +64,8 @@ module.exports = {
         {
           from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js'
         }
-		]),
+      ],
+    }),
     new WebExtWebpackPlugin({ sourceDir: path.join(__dirname, 'dist'), verbose: true }),
   ],
   optimization: {
@@ -65,7 +76,7 @@ module.exports = {
           compress: false,
           output: {
             beautify: true,
-						indent_level: 2 // eslint-disable-line camelcase
+            indent_level: 2
           }
         }
       })

desktop-app-legacy/app/components/LiveCssEditor/index.js

@@ -49,12 +49,7 @@ const computeHeight = (position, devToolsConfig) => {
     return null;
   }
   return isVeriticallyStacked(position)
-    ? `calc(100vh - ${10 +
+    ? `calc(100vh - ${10 + headerHeight + statusBarHeight + (devToolsConfig.open && devToolsConfig.mode === DEVTOOLS_MODES.BOTTOM ? devToolsConfig.size.height : 0)}px)`
-        headerHeight +
-        statusBarHeight +
-        (devToolsConfig.open && devToolsConfig.mode === DEVTOOLS_MODES.BOTTOM
-          ? devToolsConfig.size.height
-          : 0)}px)`
     : 300;
 };
 
@@ -253,4 +248,14 @@ const LiveCssEditor = ({
     </div>
   );
 };
+
 export default LiveCssEditor;
+
+// HMR integration
+if (module.hot) {
+  module.hot.accept('./LiveCssEditor', () => {
+    const NextLiveCssEditor = require('./LiveCssEditor').default;
+    ReactDOM.render(<NextLiveCssEditor />, document.getElementById('app'));
+  });
+}
+