fix: update TypeScript and Vue configuration for improved compatibility and performance

Author: stefanBid

package-lock.json

@@ -50,7 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^8.46.3",
     "@typescript-eslint/parser": "^8.46.3",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/tsconfig": "^0.7.0",
+    "@vue/tsconfig": "^0.8.1",
     "chromatic": "^13.3.3",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
@@ -63,7 +63,7 @@
     "storybook": "^10.0.4",
     "svgo": "^4.0.0",
     "tailwindcss": "^4.1.16",
-    "typescript": "~5.8.3",
+    "typescript": "~5.9.3",
     "unplugin-icons": "^22.5.0",
     "vite": "^7.2.0",
     "vite-plugin-image-optimizer": "^2.0.3",

package.json

@@ -38,8 +38,8 @@ const { reference, floating, floatingStyle, isOpen, toggle, close } = useSbFloat
 
 // Events
 const onIntersectionObserver = (entries: IntersectionObserverEntry[]): void => {
-  const [{ isIntersecting }] = entries;
-  if (isIntersecting && isOpen.value) {
+  const [entry] = entries;
+  if (entry?.isIntersecting && isOpen.value) {
     close();
   }
 };

src/components/base/dropdown-menu/BaseDropdownMenu.vue

@@ -86,8 +86,9 @@ const inputLabel = computed(() => {
 });
 
 // Events
-const onIntersectionObserver = ([{ isIntersecting }]: IntersectionObserverEntry[]): void => {
-  if (!isIntersecting && isOpen.value && props.withMenu) {
+const onIntersectionObserver = (entries: IntersectionObserverEntry[]): void => {
+  const [entry] = entries;
+  if (!entry?.isIntersecting && isOpen.value && props.withMenu) {
     close();
   }
 };

src/components/base/input/BaseInput.vue

@@ -44,19 +44,10 @@ const getScore = computed(() => {
 });
 
 // Template Data
-const RANGE_MAP: Record<string, Range> = {
-  percentage: {
-    min: 0,
-    max: 100,
-  },
-  '10-base': {
-    min: 0,
-    max: 10,
-  },
-  '5-base': {
-    min: 0,
-    max: 5,
-  },
+const RANGE_MAP: Record<'5-base' | '10-base' | 'percentage', Range> = {
+  percentage: { min: 0, max: 100 },
+  '10-base': { min: 0, max: 10 },
+  '5-base': { min: 0, max: 5 },
 } as const;
 </script>
 

src/components/base/level-bar/BaseLevelBar.vue

@@ -48,8 +48,8 @@ const onIntersectionObserver = (
   entries: IntersectionObserverEntry[],
   observer: IntersectionObserver,
 ): void => {
-  const [{ isIntersecting }] = entries;
-  if (isIntersecting !== isVisible.value && !isVisible.value) {
+  const [entry] = entries;
+  if (entry?.isIntersecting !== isVisible.value && !isVisible.value) {
     isVisible.value = true;
     observer?.disconnect();
   }

src/components/layouts/divider/AppDivider.vue

@@ -35,7 +35,12 @@ const { skills, isLoading, error } = storeToRefs(sStore);
 
 const searchSkillKey = ref('');
 const debouncedSearchSkillKey = ref('');
-const filters = ref<Record<string, boolean>>({
+const filters = ref<
+  Record<
+    'feLanguage' | 'beLanguage' | 'feFramework' | 'beFramework' | 'database' | 'tool' | 'other',
+    boolean
+  >
+>({
   feLanguage: true,
   beLanguage: true,
   feFramework: true,

src/pages/skills-page/components/SkillsDialog.vue

@@ -18,6 +18,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
+    "erasableSyntaxOnly": true,
 
     /* Direrctory shortcuts */
     "baseUrl": ".",

tsconfig.app.json

@@ -1,22 +1,24 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
+    "target": "ES2023",
     "lib": ["ES2023"],
     "module": "ESNext",
+    "types": ["node"],
     "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
 
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },