feat: add react fast refresh support

README.md

@@ -4,15 +4,15 @@
   <br/><br/>
   <!-- Patreon -->
   <a href="https://www.patreon.com/daltonmenezes">
-    <img alt="patreon url" src="https://img.shields.io/badge/support%20on-patreon-1C1E26?style=for-the-badge&labelColor=1C1E26&color=B181F1">
+    <img alt="patreon url" src="https://img.shields.io/badge/support%20on-patreon-1C1E26?style=for-the-badge&labelColor=1C1E26&color=B181F1"/>
   </a>
   <!-- Version -->
   <a href="https://github.com/daltonmenezes/electron-app/releases">
-    <img alt="releases url" src="https://img.shields.io/badge/version%20-1.2.1-1C1E26?style=for-the-badge&labelColor=1C1E26&color=F28BA9">
+     <img alt="releases url" src="https://img.shields.io/github/v/release/daltonmenezes/electron-app?style=for-the-badge&labelColor=1C1E26&color=F28BA9"/>
   </a>  
   <!-- License -->
   <a href="https://github.com/daltonmenezes/electron-app/blob/main/LICENSE">
-    <img alt="license url" src="https://img.shields.io/badge/license%20-MIT-1C1E26?style=for-the-badge&labelColor=1C1E26&color=61ffca">
+    <img alt="license url" src="https://img.shields.io/badge/license%20-MIT-1C1E26?style=for-the-badge&labelColor=1C1E26&color=61ffca"/>
   </a>
 </p>
 
@@ -25,7 +25,7 @@
 # <img src="./docs/images/bullet.svg" width="19" /> Features
 - **Stands out**
   - 🔥 Ready-to-go with a well-thought-out structure
-  - 🚀 Auto reload for main and Hot for renderer process
+  - 🚀 Auto reload for main and **Fast Refresh** for renderer process
   - 🎉 Window and Screen routing included
   - 😎 Bridge already configured
   - 🙀 IPC communication included
@@ -144,7 +144,7 @@ https://user-images.githubusercontent.com/1149845/156939675-5ea0c510-ddd3-4de7-b
 </table>
 
 # Contributing
-> Contributions are always welcome, but always **ask first**, — please — before work on a PR.
+> **Note** Contributions are always welcome, but always **ask first**, — please — before work on a PR.
 
 That said, there's a bunch of ways you can contribute to this project, like by:
 

package.json

@@ -2,7 +2,7 @@
   "displayName": "My Awesome Electron App",
   "name": "my-awesome-electron-app",
   "description": "Your awesome app description",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "main": "./node_modules/.dev-temp-build/main.js",
   "devTempBuildFolder": "./node_modules/.dev-temp-build",
   "devServer": "http://localhost:4927",
@@ -40,51 +40,53 @@
     "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.1",
-    "@commitlint/config-conventional": "^16.2.1",
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@svgr/webpack": "^6.2.1",
     "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.2.179",
-    "@types/node": "^17.0.15",
+    "@swc/core": "^1.2.207",
+    "@types/node": "^18.0.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
-    "concurrently": "^7.0.0",
-    "copy-webpack-plugin": "^10.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "concurrently": "^7.2.2",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "cross-var": "^1.1.0",
-    "css-loader": "^6.6.0",
-    "electron": "^18.2.0",
-    "electron-builder": "^23.0.3",
+    "css-loader": "^6.7.1",
+    "electron": "^19.0.6",
+    "electron-builder": "^23.1.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-react-devtools": "^0.5.3",
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.1.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^7.0.4",
-    "lint-staged": ">=10",
-    "nodemon": "^2.0.15",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "nodemon": "^2.0.18",
     "npm-run-all": "^4.1.5",
     "open": "^8.4.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
+    "react-refresh": "^0.14.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.7",
-    "sass-loader": "^12.4.0",
-    "semver": "^7.3.5",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
+    "semver": "^7.3.7",
     "simple-progress-webpack-plugin": "^2.0.0",
     "style-loader": "^3.3.1",
-    "swc-loader": "^0.2.0",
+    "swc-loader": "^0.2.3",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.5.5",
+    "typescript": "^4.7.4",
     "typescript-plugin-css-modules": "^3.4.0",
-    "wait-on": "^6.0.0",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0"
+    "wait-on": "^6.0.1",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3"
   },
   "lint-staged": {
     "*.{js,ts}": [

webpack/renderer.config.js

@@ -1,10 +1,11 @@
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 const HTMLWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const webpack = require('webpack')
 const { resolve } = require('path')
 
 const { sharedOptions } = require('./shared.config')
-const { isModuleAvailable } = require('./utils')
+const { isModuleAvailable, isDev } = require('./utils')
 const { APP_CONFIG } = require('../app.config')
 
 const { FOLDERS, RENDERER } = APP_CONFIG
@@ -14,7 +15,6 @@ const isSassAvailable =
 
 module.exports = {
   target: 'web',
-
   entry: resolve(FOLDERS.ENTRY_POINTS.RENDERER),
 
   ...sharedOptions,
@@ -46,6 +46,26 @@ module.exports = {
     rules: [
       ...sharedOptions.module.rules,
 
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('swc-loader'),
+            options: {
+              jsc: {
+                transform: {
+                  react: {
+                    development: isDev,
+                    refresh: isDev,
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
@@ -86,6 +106,8 @@ module.exports = {
   plugins: [
     ...sharedOptions.plugins,
 
+    isDev && new ReactRefreshWebpackPlugin(),
+
     new CopyWebpackPlugin({
       patterns: [
         {
@@ -108,5 +130,5 @@ module.exports = {
     // new webpack.DefinePlugin({
     //   __REACT_DEVTOOLS_GLOBAL_HOOK__: '({ isDisabled: true })',
     // }),
-  ],
+  ].filter(Boolean),
 }

webpack/shared.config.js

@@ -5,10 +5,14 @@ const { resolve } = require('path')
 const { isDev } = require('./utils')
 
 exports.sharedOptions = {
-  mode: process.env.NODE_ENV || 'development',
+  mode: isDev ? 'development' : 'production',
 
   stats: 'minimal',
 
+  performance: {
+    hints: false,
+  },
+
   devtool: isDev ? 'eval-source-map' : 'source-map',
 
   resolve: {