Merge pull request #1265 from minowau/main

Hot Module Replacement (HMR) Integration
responsively-org · Aug 6, 2024 · 6affc07 · 6affc07
2 parents 1d0b031 + 508feef
commit 6affc07
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 65 deletions.
diff --git a/browser-extension/package.json b/browser-extension/package.json
@@ -9,8 +9,8 @@
 		"lint:css": "stylelint source/**/*.css",
 		"lint-fix": "run-p 'lint:* -- --fix'",
 		"test": "run-s lint:* build",
-		"build": "webpack --mode=production",
-		"start": "webpack --mode=development --watch",
+		"start": "webpack serve --mode=development --hot --open",
+ 	 	"build": "webpack --mode=production",
 		"release:cws": "webstore upload --source=dist --auto-publish",
 		"release:amo": "web-ext-submit --source-dir dist",
 		"release": "run-s build release:*"

diff --git a/browser-extension/src/popup.js b/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'));
+  });
+}
diff --git a/browser-extension/webpack.config.js b/browser-extension/webpack.config.js
@@ -1,21 +1,28 @@
+const webpack = require('webpack');
 const path = require('path');
 const SizePlugin = require('size-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const WebExtWebpackPlugin = require('@ianwalter/web-ext-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
-	devtool: 'source-map',
-	stats: 'errors-only',
-	entry: {
-		background: './src/background',
-		popup: './src/popup',
-	},
-	output: {
-		path: path.join(__dirname, 'dist'),
-		filename: '[name].js'
-	},
-	module: {
+  devtool: 'source-map',
+  stats: 'errors-only',
+  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',
+    publicPath: '/', // Required for HMR
+  },
+  module: {
     rules: [
       {
         test: /\.js$/,
@@ -34,41 +41,45 @@ 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
             ],
           },
         },
-			},
-			{
+      },
+      {
         test: /\.(svg|gif|png|jpg)$/,
         use: 'url-loader',
       }
-		],
-	},
-	plugins: [
-		new SizePlugin(),
-		new CopyWebpackPlugin([
-			{
-				from: '**/*',
-				context: 'public',
-			},
-			{
-				from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js'
-			}
-		]),
-		new WebExtWebpackPlugin({ sourceDir: path.join(__dirname, 'dist'), verbose: true }),
-	],
-	optimization: {
-		minimizer: [
-			new TerserPlugin({
-				terserOptions: {
-					mangle: false,
-					compress: false,
-					output: {
-						beautify: true,
-						indent_level: 2 // eslint-disable-line camelcase
-					}
-				}
-			})
-		]
-	}
+    ],
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(), // Enable HMR
+    new SizePlugin(),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: '**/*',
+          context: 'public',
+        },
+        {
+          from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js'
+        }
+      ],
+    }),
+    new WebExtWebpackPlugin({ sourceDir: path.join(__dirname, 'dist'), verbose: true }),
+  ],
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          mangle: false,
+          compress: false,
+          output: {
+            beautify: true,
+            indent_level: 2
+          }
+        }
+      })
+    ]
+  }
 };
diff --git a/desktop-app-legacy/app/components/LiveCssEditor/index.js b/desktop-app-legacy/app/components/LiveCssEditor/index.js
@@ -1,6 +1,6 @@
-import React, {useMemo, useState, useEffect, useRef} from 'react';
-import {Rnd} from 'react-rnd';
-import {useSelector, useDispatch} from 'react-redux';
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { Rnd } from 'react-rnd';
+import { useSelector, useDispatch } from 'react-redux';
 import cx from 'classnames';
 import pubsub from 'pubsub.js';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -16,29 +16,29 @@ import useCommonStyles from '../useCommonStyles';
 import useStyles from './useStyles';
 import TextAreaWithCopyButton from '../../utils/TextAreaWithCopyButton';
 import Button from '@material-ui/core/Button';
-import {APPLY_CSS} from '../../constants/pubsubEvents';
+import { APPLY_CSS } from '../../constants/pubsubEvents';
 import {
   CSS_EDITOR_MODES,
   DEVTOOLS_MODES,
   isHorizontallyStacked,
   isVeriticallyStacked,
 } from '../../constants/previewerLayouts';
 import KebabMenu from '../KebabMenu';
-import {Tooltip} from '@material-ui/core';
+import { Tooltip } from '@material-ui/core';
 import DockRight from '../icons/DockRight';
-import {debounce} from 'lodash';
+import { debounce } from 'lodash';
 import CSSEditor from '../icons/CSSEditor';
 
 const getResizingDirections = position => {
   switch (position) {
     case CSS_EDITOR_MODES.LEFT:
-      return {right: true};
+      return { right: true };
     case CSS_EDITOR_MODES.RIGHT:
-      return {left: true};
+      return { left: true };
     case CSS_EDITOR_MODES.TOP:
-      return {bottom: true};
+      return { bottom: true };
     case CSS_EDITOR_MODES.BOTTOM:
-      return {top: true};
+      return { top: true };
     default:
       return true;
   }
@@ -49,12 +49,7 @@ const computeHeight = (position, devToolsConfig) => {
     return null;
   }
   return isVeriticallyStacked(position)
-    ? `calc(100vh - ${10 +
-        headerHeight +
-        statusBarHeight +
-        (devToolsConfig.open && devToolsConfig.mode === DEVTOOLS_MODES.BOTTOM
-          ? devToolsConfig.size.height
-          : 0)}px)`
+    ? `calc(100vh - ${10 + headerHeight + statusBarHeight + (devToolsConfig.open && devToolsConfig.mode === DEVTOOLS_MODES.BOTTOM ? devToolsConfig.size.height : 0)}px)`
     : 300;
 };
 
@@ -106,7 +101,7 @@ const LiveCssEditor = ({
     if (!content) {
       return;
     }
-    pubsub.publish(APPLY_CSS, [{css: content}]);
+    pubsub.publish(APPLY_CSS, [{ css: content }]);
   };
 
   useEffect(() => {
@@ -139,13 +134,13 @@ const LiveCssEditor = ({
   const disableDragging = useMemo(() => !isUndocked, [isUndocked]);
 
   return (
-    <div className={classes.wrapper} style={{height, width}}>
+    <div className={classes.wrapper} style={{ height, width }}>
       <Rnd
         ref={rndRef}
         dragHandleClassName={classes.titleBar}
         disableDragging={disableDragging}
         enableResizing={enableResizing}
-        style={{zIndex: 100}}
+        style={{ zIndex: 100 }}
         default={{
           ...getDefaultPosition(isUndocked),
           ...getDefaultSize(isUndocked),
@@ -155,7 +150,7 @@ const LiveCssEditor = ({
           if (isUndocked) {
             return;
           }
-          const {width: _width, height: _height} = ref.getBoundingClientRect();
+          const { width: _width, height: _height } = ref.getBoundingClientRect();
           if (width !== _width) {
             setWidth(_width);
           }
@@ -209,7 +204,7 @@ const LiveCssEditor = ({
               mode="css"
               theme="twilight"
               name="css"
-              onChange={debounce(onCSSEditorContentChange, 25, {maxWait: 50})}
+              onChange={debounce(onCSSEditorContentChange, 25, { maxWait: 50 })}
               fontSize={14}
               showPrintMargin={true}
               showGutter={true}
@@ -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'));
+  });
+}
+