Merge pull request #3289 from RedisInsight/build/move_to_vite

#CR-10 - Move to vite

Author: egor-zalenski

.circleci/build/build.sh

@@ -7,5 +7,5 @@ yarn --cwd redisinsight/api
 
 # build
 yarn build:statics
-yarn build:web
+yarn build:ui
 yarn --cwd ./redisinsight/api build:prod

.gitignore

@@ -50,6 +50,7 @@ redisinsight/api/commands
 redisinsight/api/guides
 redisinsight/api/tutorials
 redisinsight/api/content
+redisinsight/ui/dist-stats.html
 dist
 distWeb
 dll

Dockerfile

@@ -29,7 +29,7 @@ COPY redisinsight ./redisinsight
 RUN yarn --cwd redisinsight/api install
 
 # build the frontend, static assets, and backend api
-RUN yarn build:web
+RUN yarn build:ui
 RUN yarn build:statics
 RUN yarn build:api
 

babel.config.cjs

@@ -4,7 +4,6 @@ const developmentEnv = ['development', 'test'];
 
 const developmentPlugins = [
   require('@babel/plugin-transform-runtime'),
-  require('react-hot-loader/babel'),
 ];
 
 const productionPlugins = [

configs/webpack.config.renderer.dev.ts

@@ -76,6 +76,13 @@ const configuration: webpack.Configuration = {
               plugins: [require.resolve('react-refresh/babel')].filter(Boolean),
             },
           },
+          {
+            loader: 'string-replace-loader',
+            options: {
+              search: /import (\w+) from '(.+?)\.svg\?react'/g,
+              replace: "import { ReactComponent as $1 } from '$2.svg'",
+            },
+          }
         ],
       },
       {
@@ -95,6 +102,10 @@ const configuration: webpack.Configuration = {
             loader: 'sass-loader',
             options: {
               sourceMap: true,
+              additionalData: `
+                @use "uiSrc/styles/mixins/_eui.scss";
+                @use "uiSrc/styles/mixins/_global.scss";
+              `
             },
           },
         ],
@@ -113,6 +124,10 @@ const configuration: webpack.Configuration = {
             loader: 'sass-loader',
             options: {
               sourceMap: true,
+              additionalData: `
+                @use "uiSrc/styles/mixins/_eui.scss";
+                @use "uiSrc/styles/mixins/_global.scss";
+              `
             },
           },
         ],

configs/webpack.config.renderer.prod.ts

@@ -44,60 +44,77 @@ const configuration: webpack.Configuration = {
   module: {
     rules: [
       {
-        test: /\.module\.s(a|c)ss$/,
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
         use: [
           {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
-            loader: 'css-loader',
+            loader: 'babel-loader',
             options: {
-              modules: true,
-              sourceMap: false,
+              cacheDirectory: false,
             },
           },
           {
-            loader: 'sass-loader',
+            loader: 'string-replace-loader',
             options: {
-              sourceMap: false,
+              search: /import (\w+) from '(.+?)\.svg\?react'/g,
+              replace: "import { ReactComponent as $1 } from '$2.svg'",
             },
-          },
+          }
         ],
       },
       {
-        test: /\.s(a|c)ss$/,
-        exclude: [/\.module.(s(a|c)ss)$/, /\.lazy\.s(a|c)ss$/i],
+        test: /\.module\.s(a|c)ss$/,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
           },
           {
             loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: false,
+            },
           },
           {
             loader: 'sass-loader',
             options: {
               sourceMap: false,
+              additionalData: `
+                @use "uiSrc/styles/mixins/_eui.scss";
+                @use "uiSrc/styles/mixins/_global.scss";
+              `
             },
           },
         ],
       },
-      // SASS lazy support
       {
-        test: /\.lazy\.s(a|c)ss$/i,
+        test: /\/(dark|light)Theme.scss/,
+        use: [
+          'raw-loader',
+          'sass-loader',
+        ]
+      },
+      {
+        test: /\.s(a|c)ss$/,
+        exclude: [/\.module.(s(a|c)ss)$/, /\/(dark|light)Theme.scss/],
         use: [
           {
-            loader: 'style-loader',
-            options: { injectType: 'lazySingletonStyleTag' },
+            loader: MiniCssExtractPlugin.loader,
           },
           {
             loader: 'css-loader',
           },
           {
             loader: 'sass-loader',
+            options: {
+              sourceMap: false,
+              additionalData: `
+                @use "uiSrc/styles/mixins/_eui.scss";
+                @use "uiSrc/styles/mixins/_global.scss";
+              `
+            },
           },
         ],
-        exclude: /node_modules/,
       },
       {
         test: /\.css$/,
@@ -217,6 +234,9 @@ const configuration: webpack.Configuration = {
       'process.env.RI_SEGMENT_WRITE_KEY': 'RI_SEGMENT_WRITE_KEY' in process.env
         ? JSON.stringify(process.env.RI_SEGMENT_WRITE_KEY)
         : JSON.stringify('SOURCE_WRITE_KEY'),
+      'process.env.NODE_DEBUG': 'NODE_DEBUG' in process.env
+        ? JSON.stringify(process.env.NODE_DEBUG)
+        : JSON.stringify(''),
     }),
   ],
 };

configs/webpack.config.web.common.ts

@@ -24,12 +24,21 @@ export default {
           webpackPaths.apiPath,
           webpackPaths.desktopPath,
         ],
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+            },
           },
-        },
+          {
+            loader: 'string-replace-loader',
+            options: {
+              search: /import (\w+) from '(.+?)\.svg\?react'/g,
+              replace: "import { ReactComponent as $1 } from '$2.svg'",
+            },
+          },
+        ]
       },
       {
         test: /\.svg$/,
@@ -43,6 +52,18 @@ export default {
     ],
   },
 
+  ignoreWarnings: [
+    {
+      module: /elastic.scss/,
+    },
+    {
+      module: /QueryCardHeader/,
+    },
+    {
+      module: /\/(dark|light)Theme.scss/,
+    },
+  ],
+
   context: webpackPaths.uiPath,
 
   /**