Merge pull request #1026 from devtron-labs/chore/update-vite

chore: update vite to v8

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-beta-3",
+    "version": "1.23.4-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -38,22 +38,21 @@
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
-        "@laynezh/vite-plugin-lib-assets": "1.1.0",
+        "@laynezh/vite-plugin-lib-assets": "2.2.0",
         "@sentry/browser": "^7.119.1",
         "@tanstack/eslint-plugin-query": "^5.91.4",
         "@tanstack/react-query-devtools": "^5.91.3",
         "@tippyjs/react": "^4.2.0",
         "@typeform/embed-react": "2.20.0",
         "@types/dompurify": "^3.0.5",
         "@types/json-schema": "^7.0.15",
+        "@types/node": "^25.5.0",
         "@types/react": "^19.2.14",
         "@types/react-csv": "^1.1.10",
         "@types/react-dom": "^19.2.3",
         "@typescript-eslint/eslint-plugin": "8.3.0",
         "@typescript-eslint/parser": "8.3.0",
-        "@vitejs/plugin-react": "4.5.2",
+        "@vitejs/plugin-react": "6.0.1",
         "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^9.1.0",
@@ -70,24 +69,23 @@
         "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
         "prettier": "^3.1.1",
-        "react-ga4": "^1.4.1",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
         "react-toastify": "^10.0.6",
         "sharp": "^0.33.5",
         "svgo": "^3.3.2",
         "typescript": "5.5.4",
-        "vite": "6.3.5",
+        "vite": "8.0.0",
         "vite-plugin-dts": "4.5.4",
-        "vite-plugin-lib-inject-css": "2.1.1",
-        "vite-plugin-svgr": "^2.4.0",
-        "vite-tsconfig-paths": "5.0.1"
+        "vite-plugin-lib-inject-css": "2.2.2",
+        "vite-plugin-svgr": "4.5.0"
     },
     "peerDependencies": {
         "@typeform/embed-react": "2.20.0",
         "dompurify": "^3.2.4",
         "patch-package": "^8.0.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
-        "react-ga4": "^1.4.1",
         "react-router-dom": "^6.30.3",
         "react-select": "5.8.0",
         "rxjs": "^7.8.1",
@@ -115,7 +113,7 @@
         "@uiw/react-codemirror": "4.23.7",
         "@uiw/react-md-editor": "^4.0.11",
         "@xyflow/react": "12.4.2",
-        "ansi_up": "^5.2.1",
+        "ansi_up": "6.0.6",
         "chart.js": "4.5.0",
         "codemirror-json-schema": "0.8.0",
         "cronstrue": "^3.9.0",
@@ -127,10 +125,10 @@
         "marked": "^13.0.3",
         "nanoid": "^3.3.8",
         "qrcode.react": "^4.2.0",
-        "react-canvas-confetti": "^2.0.7",
         "react-csv": "^2.2.2",
         "react-day-picker": "^9.11.2",
         "react-draggable": "^4.4.5",
+        "react-ga4": "3.0.1",
         "react-international-phone": "^4.5.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
@@ -142,11 +140,14 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "cross-spawn": "^7.0.5",
         "vite-plugin-svgr": {
-            "vite": "6.3.5"
+            "vite": "8.0.0"
         },
         "react-virtualized-sticky-tree": {
             "react": "^19.2.4",
             "react-dom": "^19.2.4"
+        },
+        "@laynezh/vite-plugin-lib-assets": {
+            "vite": "8.0.0"
         }
     }
 }

package.json

@@ -44,7 +44,7 @@ const generateIconComponent = () => {
             .replace(/(^\w+)/, (match) => match.toUpperCase())
             .replace(/-./g, (match) => match[1].toUpperCase())
         // Push imports statement
-        imports.push(`import { ReactComponent as ${importName} } from '@IconsV2/${file}'`)
+        imports.push(`import ${importName} from '@IconsV2/${file}?react'`)
         // Push icons to iconMap
         iconMapEntries.push(`["${iconName}"]: ${importName},`)
     })

scripts/generate-icon.cjs

@@ -47,7 +47,7 @@ const generateIllustrationComponent = () => {
             .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
             .join('')
         // Push imports statement
-        imports.push(`import { ReactComponent as ${importName} } from '@Illustrations/${file}'`)
+        imports.push(`import ${importName} from '@Illustrations/${file}?react'`)
         // Push illustrations to illustrationMap
         illustrationMapEntries.push(`["${illustrationName}"]: ${importName},`)
     })

scripts/generate-illustration.cjs

@@ -19,8 +19,8 @@ import { useEffect, useRef, useState } from 'react'
 import Tooltip from '@Common/Tooltip/Tooltip'
 import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components/Button'
 
-import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
-import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
+import Check from '../../Assets/Icon/ic-check.svg?react'
+import ICCopy from '../../Assets/Icon/ic-copy.svg?react'
 import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import { ClipboardProps } from './types'
 

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outline.svg'
+import InjectTag from '../../Assets/Icon/inject-tag.svg?react'
+import ICHelpOutline from '../../Assets/Icon/ic-help-outline.svg?react'
 import { TippyCustomized } from '../TippyCustomized'
 import { TippyTheme } from '../Types'
 

src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -15,8 +15,8 @@
  */
 
 import React, { useRef } from 'react'
-import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-cross.svg'
-import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
+import DeleteCross from '../../Assets/Icon/ic-cross.svg?react'
+import InjectTag from '../../Assets/Icon/inject-tag.svg?react'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'

src/Common/CustomTagSelector/TagDetails.tsx

@@ -17,8 +17,8 @@
 import { useState, useEffect, type JSX } from 'react'
 import Tippy from '@tippyjs/react'
 import PopupMenu from '../PopupMenu'
-import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
-import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
+import ErrorCross from '../../Assets/Icon/ic-cross.svg?react'
+import Info from '../../Assets/Icon/ic-info-outlined.svg?react'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'

src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useState } from 'react'
 import { useDebouncedEffect } from './Utils'
-import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
+import ICClear from '../../Assets/Icon/ic-error-cross.svg?react'
 import { DebouncedSearchProps } from './Types'
 
 /**

src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -15,7 +15,7 @@
  */
 
 import { type JSX } from 'react'
-import { ReactComponent as ICRotateDevtron } from '../../Assets/Icon/ic-rotate-devtron.svg'
+import ICRotateDevtron from '../../Assets/Icon/ic-rotate-devtron.svg?react'
 import { DevtronProgressingProps } from './types'
 
 export const DevtronProgressing = ({ classes, parentClasses }: DevtronProgressingProps): JSX.Element => (