Migrate to Vite 5 and adjust configurations

This commit updates the `vite` dependency to the latest version (5.1.X)
and makes necessary adjustments to accommodate deprecations and new
features introduced in Vite 5.1.X.

Changes include:

- Modify the import statement for SVG files to use `query: '?raw'` syntax
  due to the deprecation of the `as: raw` option.
- Update `moduleResolution` setting to `Bundler` in `tsconfig.json` to
  support the new TypeScript 5 option, aligning with Vite 5's migration
  guide for Rollup 4 compatibility without requiring file extensions on
  relative imports.

Plugin migrations for Vite 5 support:

- Bump `@modyfi/vite-plugin-yaml`, see @modyfi/vite-plugin-yaml#22.
- Bump `electron-vite`, see alex8088/electron-vite#335.
- Bump `vitejs/plugin-legacy`.
- Bump `vitejs/vite-plugin-vue`, see vitejs/vite-plugin-vue#290.

package.json

@@ -45,14 +45,14 @@
     "vue": "^3.3.7"
   },
   "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.0.4",
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
     "@rushstack/eslint-patch": "^1.6.1",
     "@types/ace": "^0.0.49",
     "@types/file-saver": "^2.0.5",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
-    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-legacy": "^5.3.2",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-airbnb-with-typescript": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.1",
@@ -62,7 +62,7 @@
     "electron-builder": "^24.6.4",
     "electron-devtools-installer": "^3.2.0",
     "electron-icon-builder": "^2.0.1",
-    "electron-vite": "^1.0.28",
+    "electron-vite": "^2.1.0",
     "eslint": "^8.56.0",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-vue": "^9.19.2",
@@ -81,7 +81,7 @@
     "terser": "^5.21.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^4.4.11",
+    "vite": "^5.1.6",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.19",
     "yaml-lint": "^1.7.0"

src/presentation/components/Shared/Icon/UseSvgLoader.ts

@@ -48,8 +48,9 @@ async function loadSvg(name: IconName, loaders: FileLoaders): Promise<string> {
   return modifiedContent;
 }
 
-const RawSvgLoaders = import.meta.glob('@/presentation/assets/icons/**/*.svg', {
-  as: 'raw', // This will load the SVG file content as a string.
+const RawSvgLoaders: FileLoaders = import.meta.glob<string>('@/presentation/assets/icons/**/*.svg', {
+  query: '?raw',
+  import: 'default',
   /*
     Using `eager: true` to preload all icons.
     Pros:

tsconfig.json

@@ -2,11 +2,11 @@
   "compilerOptions": {
     "target": "ES2017",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "module": "esnext",
+    "module": "ESNext",
     "importHelpers": true,
     "downlevelIteration": true,
     "jsx": "preserve",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "strictNullChecks": true,
     "experimentalDecorators": true,
     "esModuleInterop": true,