Merge pull request #572 from 3DStreet/react-refresh

Add react-refresh to make hmr work for jsx

package.json

@@ -45,6 +45,7 @@
     "@babel/eslint-parser": "^7.24.5",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@storybook/addon-essentials": "^7.6.3",
     "@storybook/addon-interactions": "^7.6.3",
     "@storybook/addon-links": "^7.6.3",
@@ -58,8 +59,8 @@
     "approvals": "^7.1.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^6.10.0",
     "cross-env": "^7.0.3",
+    "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.57.0",
@@ -75,6 +76,7 @@
     "nyc": "^15.1.0",
     "prettier": "^3.1.0",
     "pretty": "^2.0.0",
+    "react-refresh": "^0.14.2",
     "resolve-url-loader": "^5.0.0",
     "rewire": "^7.0.0",
     "sass": "^1.69.5",
@@ -105,4 +107,4 @@
       "eslint"
     ]
   }
-}
+}

webpack.config.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const path = require('path');
 const Dotenv = require('dotenv-webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = {
   mode: 'development',
@@ -18,8 +19,13 @@ module.exports = {
   },
   devtool: 'source-map',
   entry: {
-    core: { import: './src/index.js', filename: 'aframe-street-component.js' },
-    editor: { import: './src/editor/index.js', filename: '3dstreet-editor.js' }
+    editor: {
+      import: ['./src/editor/index.js'],
+      filename: '3dstreet-editor.js'
+    }
+    // react-refresh doesn't work with multiple entry points so we use the production build of aframe-street-component.js in development,
+    // you will need to run `npm run dist` to see your changes or uncomment temporarily the following line and run `npm start` again.
+    // core: { import: './src/index.js', filename: 'aframe-street-component.js' }
   },
   output: {
     publicPath: '/dist/',
@@ -31,6 +37,7 @@ module.exports = {
     three: 'THREE'
   },
   plugins: [
+    new ReactRefreshWebpackPlugin(),
     new Dotenv({
       path: './config/.env.development'
     }),
@@ -51,7 +58,10 @@ module.exports = {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader'
+          loader: 'babel-loader',
+          options: {
+            plugins: ['react-refresh/babel']
+          }
         }
       },
       {