Merge pull request #5840 from glekner/react-refresh-refine

Add react-refresh for WDS
openshift · Jul 3, 2020 · 9a7550c · 9a7550c
2 parents 84a8129 + 1389074
commit 9a7550c
Show file tree

Hide file tree

Showing 3 changed files with 569 additions and 109 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -154,6 +154,8 @@
     "yup": "^0.27.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.0-beta.6",
     "@graphql-codegen/cli": "^1.15.1",
     "@graphql-codegen/typescript": "^1.15.1",
     "@graphql-codegen/typescript-graphql-files-modules": "^1.15.1",
@@ -177,6 +179,7 @@
     "@types/react-transition-group": "2.x",
     "@types/react-virtualized": "9.x",
     "@types/webpack": "4.x",
+    "babel-loader": "^8.1.0",
     "bootstrap-sass": "^3.3.7",
     "browser-env": "3.x",
     "cache-loader": "1.x",
@@ -213,6 +216,7 @@
     "protractor": "5.4.x",
     "protractor-fail-fast": "3.x",
     "protractor-jasmine2-screenshot-reporter": "0.5.x",
+    "react-refresh": "^0.8.3",
     "read-pkg": "5.x",
     "redux-mock-store": "^1.5.3",
     "resolve-url-loader": "2.x",
@@ -223,10 +227,10 @@
     "ts-loader": "^6.2.2",
     "ts-node": "5.x",
     "typescript": "3.8.3",
-    "webpack": "4.40.2",
+    "webpack": "4.43.0",
     "webpack-bundle-analyzer": "^3.5.0",
     "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1",
+    "webpack-dev-server": "^3.11.0",
     "webpack-virtual-modules": "^0.1.10"
   },
   "engines": {

diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts
@@ -5,6 +5,7 @@ import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as VirtualModulesPlugin from 'webpack-virtual-modules';
+import * as ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
 import { resolvePluginPackages, getActivePluginsModule } from '@console/plugin-sdk/src/codegen';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
@@ -19,6 +20,7 @@ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const NODE_ENV = process.env.NODE_ENV || 'development';
 const HOT_RELOAD = process.env.HOT_RELOAD || 'true';
 const CHECK_CYCLES = process.env.CHECK_CYCLES || 'false';
+const IS_WDS = process.env.WEBPACK_DEV_SERVER;
 
 /* Helpers */
 const extractCSS = new MiniCssExtractPlugin({ filename: 'app-bundle.[contenthash].css' });
@@ -42,6 +44,7 @@ const config: Configuration = {
     hot: HOT_RELOAD !== 'false',
     inline: HOT_RELOAD !== 'false',
     contentBase: false,
+    transportMode: 'ws',
   },
   resolve: {
     extensions: ['.glsl', '.ts', '.tsx', '.js', '.jsx'],
@@ -69,6 +72,16 @@ const config: Configuration = {
               workers: require('os').cpus().length - 1,
             },
           },
+          ...(IS_WDS
+            ? [
+                {
+                  loader: 'babel-loader',
+                  options: {
+                    plugins: ['react-refresh/babel'],
+                  },
+                },
+              ]
+            : []),
           {
             loader: 'ts-loader',
             options: {
@@ -166,6 +179,7 @@ const config: Configuration = {
     }),
     new webpack.IgnorePlugin(/prettier/),
     extractCSS,
+    ...(IS_WDS ? [new ReactRefreshWebpackPlugin()] : []),
   ],
   devtool: 'cheap-module-source-map',
   stats: 'minimal',