Update rspack to v1

RedHatInsights · Oct 2, 2024 · a13e54c · a13e54c
1 parent 585f2d3
commit a13e54c
Show file tree

Hide file tree

Showing 10 changed files with 3,176 additions and 2,050 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,9 +15,10 @@ module.exports = {
     {
       files: ['**/*.ts', '**/*.tsx', '**/*.js'],
       parser: '@typescript-eslint/parser',
-      plugins: ['@typescript-eslint'],
+      plugins: ['@typescript-eslint', 'react-refresh'],
       extends: ['plugin:@typescript-eslint/recommended'],
       rules: {
+        'react-refresh/only-export-components': 'warn',
         'react/prop-types': 'off',
         '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true, args: 'after-used' }],
         '@typescript-eslint/no-explicit-any': 'warn',

diff --git a/config/rspack.config.js b/config/rspack.config.js
@@ -25,6 +25,55 @@ const PFGenerator = asGenerator((item, ...rest) => {
 
 const publicPath = '/apps/chrome/js/';
 const commonConfig = ({ dev }) => {
+  /** @type { import("@rspack/core").Configuration["devServer"] } */
+  const pc = proxy({
+    env: 'stage-beta',
+    port: 1337,
+    appUrl: [/^\/*$/],
+    useProxy: true,
+    publicPath,
+    proxyVerbose: true,
+    isChrome: true,
+    routes: {
+      // '/apps/landing': {
+      //   host: 'http://localhost:8888',
+      // },
+      ...(process.env.CHROME_SERVICE && {
+        // web sockets
+        '/wss/chrome-service/': {
+          target: `ws://localhost:${process.env.CHROME_SERVICE}`,
+          // To upgrade the connection
+          ws: true,
+        },
+        // REST API
+        '/api/chrome-service/v1/': {
+          host: `http://localhost:${process.env.CHROME_SERVICE}`,
+        },
+      }),
+      ...(process.env.CONFIG_PORT && {
+        '/beta/config': {
+          host: `http://localhost:${process.env.CONFIG_PORT}`,
+        },
+        '/config': {
+          host: `http://localhost:${process.env.CONFIG_PORT}`,
+        },
+      }),
+      ...(process.env.NAV_CONFIG && {
+        '/api/chrome-service/v1/static': {
+          host: `http://localhost:${process.env.NAV_CONFIG}`,
+        },
+      }),
+    },
+  });
+  // console.log(pc.onBeforeSetupMiddleware);
+  pc.setupMiddlewares = (middlewares, { app, compiler, options }) => {
+    app.enable('strict routing');
+
+    return middlewares;
+  };
+  // not in v1 release
+  delete pc.onBeforeSetupMiddleware;
+
   /** @type { import("rspack").Configuration } */
   return {
     entry: dev
@@ -50,6 +99,10 @@ const commonConfig = ({ dev }) => {
     devtool: false,
     experiments: {
       css: true,
+      // lazyCompilation: true,
+      // rspackFuture: {
+      //   disableTransformByDefault: true,
+      // },
     },
     resolve: {
       extensions: ['.js', '.ts', '.tsx'],
@@ -95,8 +148,15 @@ const commonConfig = ({ dev }) => {
           test: /\.(js|ts)x?$/,
           exclude: /node_modules/,
           use: {
-            loader: 'swc-loader',
+            loader: 'builtin:swc-loader',
             options: {
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                  development: dev,
+                  refresh: dev,
+                },
+              },
               jsc: {
                 parser: {
                   syntax: 'typescript',
@@ -109,8 +169,6 @@ const commonConfig = ({ dev }) => {
         {
           test: /\.s?[ac]ss$/,
           use: [
-            // rspack.CssExtractRspackPlugin.loader,
-            // 'css-loader',
             {
               loader: 'resolve-url-loader',
               options: {
@@ -121,6 +179,8 @@ const commonConfig = ({ dev }) => {
               loader: 'sass-loader',
               options: {
                 sourceMap: true,
+                api: 'modern-compiler',
+                implementation: require.resolve('sass-embedded'),
               },
             },
           ],
@@ -142,49 +202,11 @@ const commonConfig = ({ dev }) => {
       historyApiFallback: {
         index: `${publicPath}index.html`,
       },
-      https: true,
+      server: 'https',
       port: 1337,
       // HMR flag
+      ...pc,
       hot: true,
-      ...proxy({
-        env: 'stage-beta',
-        port: 1337,
-        appUrl: [/^\/*$/],
-        useProxy: true,
-        publicPath,
-        proxyVerbose: true,
-        isChrome: true,
-        routes: {
-          '/apps/landing': {
-            host: 'http://localhost:8888',
-          },
-          ...(process.env.CHROME_SERVICE && {
-            // web sockets
-            '/wss/chrome-service/': {
-              target: `ws://localhost:${process.env.CHROME_SERVICE}`,
-              // To upgrade the connection
-              ws: true,
-            },
-            // REST API
-            '/api/chrome-service/v1/': {
-              host: `http://localhost:${process.env.CHROME_SERVICE}`,
-            },
-          }),
-          ...(process.env.CONFIG_PORT && {
-            '/beta/config': {
-              host: `http://localhost:${process.env.CONFIG_PORT}`,
-            },
-            '/config': {
-              host: `http://localhost:${process.env.CONFIG_PORT}`,
-            },
-          }),
-          ...(process.env.NAV_CONFIG && {
-            '/api/chrome-service/v1/static': {
-              host: `http://localhost:${process.env.NAV_CONFIG}`,
-            },
-          }),
-        },
-      }),
     },
   };
 };
@@ -230,6 +252,8 @@ const pfConfig = {
                 outputStyle: 'compressed',
               },
               sourceMap: true,
+              api: 'modern-compiler',
+              implementation: require.resolve('sass-embedded'),
             },
           },
         ],

diff --git a/config/rspack.plugins.js b/config/rspack.plugins.js
@@ -2,12 +2,14 @@
 // const webpack = require('webpack');
 const rspack = require('@rspack/core');
 const resolve = require('path').resolve;
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+// const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 // const { ProvidePlugin } = require('webpack');
 // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const getDynamicModules = require('./get-dynamic-modules');
+const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { pluginReact } = require('@rsbuild/plugin-react');
 
 // const MFP = require('@module-federation/enhanced').ModuleFederationPlugin;
 
@@ -19,6 +21,12 @@ const plugins = (dev = false, beta = false, restricted = false) => {
     _unstableHotReload: dev,
   });
   return [
+    // pluginReact({
+    //   swcReactOptions: {
+    //     refresh: dev,
+    //     development: dev,
+    //   }
+    // }),
     new rspack.CssExtractRspackPlugin({
       filename: dev ? '[name].css' : '[name].[contenthash].css',
       ignoreOrder: true,
@@ -52,7 +60,7 @@ const plugins = (dev = false, beta = false, restricted = false) => {
       ],
     }),
     ChunkMapper,
-    new HtmlWebpackPlugin({
+    new rspack.HtmlRspackPlugin({
       template: restricted ? path.resolve(__dirname, '../src/indexRes.ejs') : path.resolve(__dirname, '../src/index.ejs'),
       inject: 'body',
       minify: false,
@@ -63,7 +71,7 @@ const plugins = (dev = false, beta = false, restricted = false) => {
         pf5styles: `/${beta ? 'beta/' : ''}apps/chrome/js/pf/pf4-v5.css`,
       },
     }),
-    new HtmlWebpackPlugin({
+    new rspack.HtmlRspackPlugin({
       title: 'Authenticating - Hybrid Cloud Console',
       filename: dev ? 'silent-check-sso.html' : '../silent-check-sso.html',
       inject: false,
@@ -83,7 +91,7 @@ const plugins = (dev = false, beta = false, restricted = false) => {
     new rspack.DefinePlugin({
       __SENTRY_DEBUG__: false,
     }),
-    // ...(dev ? [new ReactRefreshWebpackPlugin()] : []),
+    ...(dev ? [new ReactRefreshPlugin()] : []),
   ];
 };