chore(lite): upgrade dependencies (#7170)

1. Since the project is built-only, all deps have been moved to `devDependencies`
2. TypeScript has been upgraded from 4.9 to 5.2
3. `engines.node` requirement was set to `>=8.10`. It has been updated to `>=18` to be aligned with deps requirements

@xen-orchestra/lite/package.json

@@ -10,57 +10,55 @@
     "test": "yarn run type-check",
     "type-check": "vue-tsc --noEmit"
   },
-  "dependencies": {
+  "devDependencies": {
     "@fontsource/poppins": "^5.0.8",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/vue-fontawesome": "^3.0.1",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
-    "@novnc/novnc": "^1.3.0",
+    "@intlify/unplugin-vue-i18n": "^1.5.0",
-    "@types/d3-time-format": "^4.0.0",
+    "@limegrass/eslint-plugin-import-alias": "^1.1.0",
-    "@types/file-saver": "^2.0.5",
+    "@novnc/novnc": "^1.4.0",
-    "@types/lodash-es": "^4.17.6",
+    "@rushstack/eslint-patch": "^1.5.1",
-    "@types/marked": "^4.0.8",
+    "@tsconfig/node18": "^18.2.2",
-    "@vueuse/core": "^10.1.2",
+    "@types/d3-time-format": "^4.0.3",
-    "@vueuse/math": "^10.1.2",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.11",
+    "@types/node": "^18.18.9",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.4.0",
+    "@vueuse/core": "^10.5.0",
+    "@vueuse/math": "^10.5.0",
     "complex-matcher": "^0.7.1",
     "d3-time-format": "^4.1.0",
     "decorator-synchronized": "^0.6.0",
-    "echarts": "^5.3.3",
+    "echarts": "^5.4.3",
+    "eslint-plugin-vue": "^9.18.1",
     "file-saver": "^2.0.5",
-    "highlight.js": "^11.6.0",
+    "highlight.js": "^11.9.0",
-    "human-format": "^1.1.0",
+    "human-format": "^1.2.0",
     "iterable-backoff": "^0.1.0",
-    "json-rpc-2.0": "^1.3.0",
+    "json-rpc-2.0": "^1.7.0",
-    "json5": "^2.2.1",
+    "json5": "^2.2.3",
     "limit-concurrency-decorator": "^0.5.0",
     "lodash-es": "^4.17.21",
     "make-error": "^1.3.6",
-    "marked": "^4.2.12",
+    "marked": "^9.1.5",
-    "pinia": "^2.1.2",
-    "placement.js": "^1.0.0-beta.5",
-    "vue": "^3.3.4",
-    "vue-echarts": "^6.2.3",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.1"
-  },
-  "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
-    "@limegrass/eslint-plugin-import-alias": "^1.0.5",
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/node": "^16.11.41",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "eslint-plugin-vue": "^9.0.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.19",
+    "pinia": "^2.1.7",
-    "postcss-custom-media": "^9.0.1",
+    "placement.js": "^1.0.0-beta.5",
-    "postcss-nested": "^6.0.0",
+    "postcss": "^8.4.31",
-    "typescript": "^4.9.3",
+    "postcss-custom-media": "^10.0.2",
-    "vite": "^4.3.8",
+    "postcss-nested": "^6.0.1",
-    "vue-tsc": "^1.6.5"
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vue": "^3.3.8",
+    "vue-echarts": "^6.6.1",
+    "vue-i18n": "^9.6.5",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.22"
   },
   "private": true,
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/lite",
@@ -76,6 +74,6 @@
   },
   "license": "AGPL-3.0-or-later",
   "engines": {
-    "node": ">=8.10"
+    "node": ">=18"
   }
 }

@xen-orchestra/lite/src/components/ui/modals/UiModal.vue

@@ -11,7 +11,7 @@ import { useContext } from "@/composables/context.composable";
 import { ColorContext, DisabledContext } from "@/context";
 import type { Color } from "@/types";
 import { IK_MODAL } from "@/types/injection-keys";
-import { useMagicKeys, whenever } from "@vueuse/core/index";
+import { useMagicKeys, whenever } from "@vueuse/core";
 import { inject } from "vue";
 
 const props = defineProps<{

@xen-orchestra/lite/src/libs/highlight.ts

@@ -1,4 +1,4 @@
-import type { HighlightResult, Language } from "highlight.js";
+import type { HighlightResult } from "highlight.js";
 import HLJS from "highlight.js/lib/core";
 import cssLang from "highlight.js/lib/languages/css";
 import jsonLang from "highlight.js/lib/languages/json";
@@ -19,10 +19,6 @@ export const highlight: (
   ignoreIllegals?: boolean
 ) => HighlightResult = HLJS.highlight;
 
-export const getLanguage: (
-  languageName: AcceptedLanguage
-) => Language | undefined = HLJS.getLanguage;
-
 export type AcceptedLanguage =
   | "xml"
   | "css"

@xen-orchestra/lite/src/libs/markdown.ts

@@ -1,8 +1,5 @@
-import {
+import { type AcceptedLanguage, highlight } from "@/libs/highlight";
-  type AcceptedLanguage,
+import HLJS from "highlight.js/lib/core";
-  getLanguage,
-  highlight,
-} from "@/libs/highlight";
 import { marked } from "marked";
 
 enum VUE_TAG {
@@ -11,15 +8,26 @@ enum VUE_TAG {
   STYLE = "vue-style",
 }
 
+function extractLang(lang: string | undefined): AcceptedLanguage | VUE_TAG {
+  if (lang === undefined) {
+    return "plaintext";
+  }
+
+  if (Object.values(VUE_TAG).includes(lang as VUE_TAG)) {
+    return lang as VUE_TAG;
+  }
+
+  if (HLJS.getLanguage(lang) !== undefined) {
+    return lang as AcceptedLanguage;
+  }
+
+  return "plaintext";
+}
+
 marked.use({
   renderer: {
-    code(str: string, lang: AcceptedLanguage) {
+    code(str, lang) {
-      const code = customHighlight(
+      const code = customHighlight(str, extractLang(lang));
-        str,
-        Object.values(VUE_TAG).includes(lang as VUE_TAG) || getLanguage(lang)
-          ? lang
-          : "plaintext"
-      );
       return `<pre class="hljs"><button class="copy-button" type="button">Copy</button><code class="hljs-code">${code}</code></pre>`;
     },
   },

@xen-orchestra/lite/tsconfig.config.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": ["@tsconfig/node18/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
   "compilerOptions": {
     "composite": true,

@xen-orchestra/lite/tsconfig.json

@@ -1,10 +1,9 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/stories/**/*"],
   "compilerOptions": {
     "experimentalDecorators": true,
-    "lib": ["ES2019", "ES2020.Intl", "dom"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]