@machtwatch/react-script 1.2.11-alpha.25 → 1.2.11-alpha.26

package/config/babel/babel-custom-loader.js

@@ -1,66 +1,70 @@
 module.exports = () => ({
-    customOptions({ transform_runtime, ...loader }) {
-      return {
-        loader,
-        custom: { ...transform_runtime }
-      };
-    },
-    config(cfg) {
-      return {
-        ...cfg.options,
-        presets: [
-          [
-            require('@babel/preset-env'),
-            {
-              modules: false,
-              useBuiltIns: 'usage',
-              corejs: '3.22'
-            }
-          ],
-          require('@babel/preset-react'),
-
+  customOptions({ transform_runtime, isClient, ...loader }) {
+    return {
+      loader,
+      custom: { ...transform_runtime, isClient }
+    };
+  },
+  config(cfg) {
+    return {
+      ...cfg.options,
+      presets: [
+        [
+          require('@babel/preset-env'),
+          {
+            modules: false,
+            useBuiltIns: 'usage',
+            corejs: '3.22'
+          }
         ],
-        plugins: [
-          require('@babel/plugin-transform-runtime'),
-          require('@babel/plugin-proposal-function-bind'),
-          require('@babel/plugin-proposal-export-default-from'),
-          require('@babel/plugin-proposal-export-namespace-from'),
-          require('@babel/plugin-proposal-throw-expressions'),
-          require('@babel/plugin-syntax-dynamic-import'),
-          require('@babel/plugin-proposal-json-strings'),
-          require('@loadable/babel-plugin'),
-          [require('babel-plugin-transform-imports'), {
-            '@machtwatch/react-ui': {
-              transform: '@machtwatch/react-ui/lib/${member}',
-              preventFullImport: true
-            }
-          }],
-          [require('@babel/plugin-proposal-decorators'), {
-            legacy: true
-          }],
-          [require('@babel/plugin-proposal-optional-chaining'), {
-            loose: true
-          }],
-          [require('@babel/plugin-proposal-class-properties'), {
-            loose: true
-          }],
-          [require('@babel/plugin-proposal-private-methods'), { loose: true }],
-          [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
-          [require('babel-plugin-add-module-exports'), {
-            addDefaultProperty: true
-          }],
+        require('@babel/preset-react'),
+
+      ],
+      plugins: [
+        require('@babel/plugin-transform-runtime'),
+        require('@babel/plugin-proposal-function-bind'),
+        require('@babel/plugin-proposal-export-default-from'),
+        require('@babel/plugin-proposal-export-namespace-from'),
+        require('@babel/plugin-proposal-throw-expressions'),
+        require('@babel/plugin-syntax-dynamic-import'),
+        require('@babel/plugin-proposal-json-strings'),
+        require('@loadable/babel-plugin'),
+        [require('babel-plugin-transform-imports'), {
+          '@machtwatch/react-ui': {
+            transform: '@machtwatch/react-ui/lib/${member}',
+            preventFullImport: true
+          }
+        }],
+        [require('@babel/plugin-proposal-decorators'), {
+          legacy: true
+        }],
+        [require('@babel/plugin-proposal-optional-chaining'), {
+          loose: true
+        }],
+        [require('@babel/plugin-proposal-class-properties'), {
+          loose: true
+        }],
+        [require('@babel/plugin-proposal-private-methods'), { loose: true }],
+        [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
+        [require('babel-plugin-add-module-exports'), {
+          addDefaultProperty: true
+        }],
+        ...(cfg.options.isClient && !cfg.options.compact ? [
+          require.resolve('react-refresh/babel')
+        ] : [
           ...(cfg.options.compact ? [
             require('@babel/plugin-transform-react-inline-elements'),
             require('@babel/plugin-transform-react-constant-elements')
-          ] : []),
-          ...(cfg.options.plugins || [])
-        ],
-      };
-    },
-    result(result) {
-      return {
-        ...result,
-        code: `${result.code} \n// Generated by babel-custom-loader`
-      };
-    },
-  });
+          ] : [])
+        ]),
+        ...(cfg.options.plugins || [])
+      ],
+    };
+  },
+  result(result) {
+    return {
+      ...result,
+      code: `${result.code} \n// Generated by babel-custom-loader`
+    };
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machtwatch/react-script",
-  "version": "1.2.11-alpha.25",
+  "version": "1.2.11-alpha.26",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -51,6 +51,7 @@
     "@babel/preset-react": "^7.17.12",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/webpack-plugin": "^5.15.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.6.2",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
@@ -95,6 +96,7 @@
     "purgecss-webpack-plugin": "^4.1.3",
     "react-dev-utils": "^12.0.1",
     "react-error-overlay": "6.0.9",
+    "react-refresh": "0.18.0",
     "recluster": "^0.4.5",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^2.6.3",

package/scripts/start.js

@@ -13,6 +13,8 @@ const clean = require('./utils/clean');
 
 const config = require('config').util.loadFileConfigs(`${paths.appPath}/config`);
 
+console.log('RUNNING LOCALL X')
+
 const { format } = run;
 
 // https://webpack.js.org/configuration/watch/#watchoptions

package/scripts/webpack.config.js

@@ -17,6 +17,7 @@ const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
 const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
 const crypto = require('crypto');
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const paths = require('../config/paths');
 
@@ -194,6 +195,7 @@ const webpackConfig = ({ isClient }) => ({
           babelrc: false,
           configFile: false,
           compact: isProdEnv,
+          isClient,
           cacheDirectory: true,
           cacheCompression: false,
           customize: path.resolve(__dirname, '../config/babel/babel-custom-loader.js'),
@@ -551,6 +553,9 @@ const clientConfig = {
       extensions: ['less'],
       exclude: ['node_modules', 'coverage'],
     }),
+    isRuntimeDev && new ReactRefreshWebpackPlugin({
+      overlay: false,
+    }),
     new webpack.HotModuleReplacementPlugin(),
     new SubresourceIntegrityPlugin(),
     new LoadablePlugin({