Add TypeScript to app-frontend (#2364)

* Add TypeScript to app-frontend

Co-authored-by: Evan Song <52982404+ferothefox@users.noreply.github.com>

* Switch app-frontend to ESLint 9 & Nuxt config

* Fix ESLint issues after config change in app-frontend

---------

Co-authored-by: Evan Song <52982404+ferothefox@users.noreply.github.com>

apps/app-frontend/.eslintrc.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['custom/vue'],
-}

apps/app-frontend/eslint.config.mjs

@@ -0,0 +1,22 @@
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import { fixupPluginRules } from '@eslint/compat'
+import turboPlugin from 'eslint-plugin-turbo'
+
+export default createConfigForNuxt().append([
+  {
+    name: 'turbo',
+    plugins: {
+      turbo: fixupPluginRules(turboPlugin),
+    },
+    rules: {
+      'turbo/no-undeclared-env-vars': 'error',
+    },
+  },
+  {
+    name: 'modrinth',
+    rules: {
+      'vue/html-self-closing': 'off',
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+])

apps/app-frontend/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vue-tsc --noEmit && vite build",
+    "tsc:check": "vue-tsc --noEmit",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write ."
   },
@@ -13,37 +14,42 @@
     "@modrinth/assets": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
+    "@sentry/vue": "^8.27.0",
     "@tauri-apps/api": "^2.0.0-rc.3",
     "@tauri-apps/plugin-dialog": "^2.0.0-rc.0",
     "@tauri-apps/plugin-os": "^2.0.0-rc.0",
-    "@tauri-apps/plugin-window-state": "^2.0.0-rc.0",
     "@tauri-apps/plugin-shell": "^2.0.0-rc.0",
     "@tauri-apps/plugin-updater": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-window-state": "^2.0.0-rc.0",
     "@vintl/vintl": "^4.4.1",
     "dayjs": "^1.11.10",
     "floating-vue": "^5.2.2",
     "ofetch": "^1.3.4",
     "pinia": "^2.1.7",
+    "posthog-js": "^1.158.2",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
     "vue-multiselect": "3.0.0",
     "vue-router": "4.3.0",
-    "vue-virtual-scroller": "v2.0.0-beta.8",
+    "vue-virtual-scroller": "v2.0.0-beta.8"
-    "posthog-js": "^1.158.2",
-    "@sentry/vue": "^8.27.0"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@nuxt/eslint-config": "^0.5.6",
     "@tauri-apps/cli": "^2.0.0-rc",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
+    "eslint": "^9.9.1",
     "eslint-config-custom": "workspace:*",
+    "eslint-plugin-turbo": "^2.1.1",
     "postcss": "^8.4.39",
     "prettier": "^3.2.5",
     "sass": "^1.74.1",
     "tailwindcss": "^3.4.4",
     "tsconfig": "workspace:*",
-    "vite": "^5.2.8"
+    "typescript": "^5.5.4",
+    "vite": "^5.2.8",
+    "vue-tsc": "^2.1.6"
   },
   "packageManager": "pnpm@9.4.0"
 }

apps/app-frontend/src/components/ui/AccountsCard.vue

@@ -134,9 +134,9 @@ const logout = async (id) => {
   trackEvent('AccountLogOut')
 }
 
-let showCard = ref(false)
+const showCard = ref(false)
-let card = ref(null)
+const card = ref(null)
-let button = ref(null)
+const button = ref(null)
 const handleClickOutside = (event) => {
   const elements = document.elementsFromPoint(event.clientX, event.clientY)
   if (

apps/app-frontend/src/components/ui/InstanceCreationModal.vue

@@ -462,7 +462,7 @@ const promises = profileOptions.value.map(async (option) => {
       option.name,
       instances.map((name) => ({ name, selected: false })),
     )
-  } catch (error) {
+  } catch {
     // Allow failure silently
   }
 })

apps/app-frontend/src/components/ui/JavaSelector.vue

@@ -124,7 +124,7 @@ async function testJava() {
 }
 
 async function handleJavaFileInput() {
-  let filePath = await open()
+  const filePath = await open()
 
   if (filePath) {
     let result = await get_jre(filePath.path)
@@ -150,7 +150,7 @@ async function autoDetect() {
   if (!props.compact) {
     detectJavaModal.value.show(props.version, props.modelValue)
   } else {
-    let versions = await find_filtered_jres(props.version).catch(handleError)
+    const versions = await find_filtered_jres(props.version).catch(handleError)
     if (versions.length > 0) {
       emit('update:modelValue', versions[0])
     }

apps/app-frontend/src/components/ui/SplashScreen.vue

@@ -88,8 +88,6 @@ import { loading_listener } from '@/helpers/events.js'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { XIcon } from '@modrinth/assets'
 import { MaximizeIcon, MinimizeIcon } from '@/assets/icons/index.js'
-import { TauriEvent } from '@tauri-apps/api/event'
-import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { getOS } from '@/helpers/utils.js'
 import { useLoading } from '@/store/loading.js'
 

apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue

@@ -66,7 +66,7 @@ const selectedVersion = ref(null)
 const incompatibleModal = ref(null)
 const installing = ref(false)
 
-let onInstall = ref(() => {})
+const onInstall = ref(() => {})
 
 defineExpose({
   show: (instanceVal, projectVal, projectVersions, callback) => {

apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue

@@ -12,7 +12,7 @@ const project = ref()
 const confirmModal = ref(null)
 const installing = ref(false)
 
-let onInstall = ref(() => {})
+const onInstall = ref(() => {})
 
 defineExpose({
   show: (projectVal, versionIdVal, callback) => {

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -48,7 +48,7 @@ const shownProfiles = computed(() =>
       return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
     })
     .filter((profile) => {
-      let loaders = versions.value.flatMap((v) => v.loaders)
+      const loaders = versions.value.flatMap((v) => v.loaders)
 
       return (
         versions.value.flatMap((v) => v.game_versions).includes(profile.game_version) &&
@@ -59,7 +59,7 @@ const shownProfiles = computed(() =>
     }),
 )
 
-let onInstall = ref(() => {})
+const onInstall = ref(() => {})
 
 defineExpose({
   show: async (projectVal, versionsVal, callback) => {
@@ -77,7 +77,7 @@ defineExpose({
     onInstall.value = callback
 
     const profilesVal = await list().catch(handleError)
-    for (let profile of profilesVal) {
+    for (const profile of profilesVal) {
       profile.installing = false
       profile.installedMod = await check_installed(profile.path, project.value.id).catch(
         handleError,

apps/app-frontend/src/helpers/utils.js

@@ -56,7 +56,7 @@ export function debounce(fn, wait) {
     if (timer) {
       clearTimeout(timer) // clear any pre-existing timer
     }
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
+
     const context = this // get the current context
     timer = setTimeout(() => {
       fn.apply(context, args) // call the function if time expires

apps/app-frontend/src/pages/Browse.vue

@@ -381,20 +381,20 @@ const sortedCategories = computed(() => {
 // identifier[0], then if it ties, identifier[1], etc
 async function sortByNameOrNumber(sortable, identifiers) {
   sortable.sort((a, b) => {
-    for (let identifier of identifiers) {
+    for (const identifier of identifiers) {
-      let aNum = parseFloat(a[identifier])
+      const aNum = parseFloat(a[identifier])
-      let bNum = parseFloat(b[identifier])
+      const bNum = parseFloat(b[identifier])
       if (isNaN(aNum) && isNaN(bNum)) {
         // Both are strings, sort alphabetically
-        let stringComp = a[identifier].localeCompare(b[identifier])
+        const stringComp = a[identifier].localeCompare(b[identifier])
         if (stringComp != 0) return stringComp
       } else if (!isNaN(aNum) && !isNaN(bNum)) {
         // Both are numbers, sort numerically
-        let numComp = aNum - bNum
+        const numComp = aNum - bNum
         if (numComp != 0) return numComp
       } else {
         // One is a number and one is a string, numbers go first
-        let numStringComp = isNaN(aNum) ? 1 : -1
+        const numStringComp = isNaN(aNum) ? 1 : -1
         if (numStringComp != 0) return numStringComp
       }
     }

apps/app-frontend/src/pages/Index.vue

@@ -47,7 +47,7 @@ const getInstances = async () => {
     return dateB - dateA
   })
 
-  let filters = []
+  const filters = []
   for (const instance of recentInstances.value) {
     if (instance.linked_data && instance.linked_data.project_id) {
       filters.push(`NOT"project_id"="${instance.linked_data.project_id}"`)

apps/app-frontend/src/pages/Settings.vue

@@ -406,14 +406,14 @@ async function purgeCache() {
           <span class="label__title size-card-header">Java settings</span>
         </h3>
       </div>
-      <template v-for="version in [21, 17, 8]">
+      <template v-for="javaVersion in [21, 17, 8]" :key="`java-${javaVersion}`">
-        <label :for="'java-' + version">
+        <label :for="'java-' + javaVersion">
-          <span class="label__title">Java {{ version }} location</span>
+          <span class="label__title">Java {{ javaVersion }} location</span>
         </label>
         <JavaSelector
-          :id="'java-selector-' + version"
+          :id="'java-selector-' + javaVersion"
-          v-model="javaVersions[version]"
+          v-model="javaVersions[javaVersion]"
-          :version="version"
+          :version="javaVersion"
           @update:model-value="updateJavaVersion"
         />
       </template>

apps/app-frontend/src/pages/instance/Logs.vue

@@ -296,7 +296,7 @@ if (logs.value.length > 1 && !props.playing) {
 
 const deleteLog = async () => {
   if (logs.value[selectedLogIndex.value] && selectedLogIndex.value !== 0) {
-    let deleteIndex = selectedLogIndex.value
+    const deleteIndex = selectedLogIndex.value
     selectedLogIndex.value = deleteIndex - 1
     await delete_logs_by_filename(
       props.instance.path,

apps/app-frontend/src/pages/instance/Mods.vue

@@ -717,7 +717,7 @@ const updateProject = async (mod) => {
   })
 }
 
-let locks = {}
+const locks = {}
 
 const toggleDisableMod = async (mod) => {
   // Use mod's id as the key for the lock. If mod doesn't have a unique id, replace `mod.id` with some unique property.
@@ -725,7 +725,7 @@ const toggleDisableMod = async (mod) => {
     locks[mod.id] = ref(null)
   }
 
-  let lock = locks[mod.id]
+  const lock = locks[mod.id]
 
   while (lock.value) {
     await lock.value

apps/app-frontend/src/pages/instance/Options.vue

@@ -880,7 +880,7 @@ const editing = ref(false)
 async function saveGvLoaderEdits() {
   editing.value = true
 
-  let editProfile = editProfileObject.value
+  const editProfile = editProfileObject.value
   editProfile.loader = loader.value
   editProfile.game_version = gameVersion.value
 

apps/app-frontend/src/pages/project/Gallery.vue

@@ -102,9 +102,9 @@ const props = defineProps({
   },
 })
 
-let expandedGalleryItem = ref(null)
+const expandedGalleryItem = ref(null)
-let expandedGalleryIndex = ref(0)
+const expandedGalleryIndex = ref(0)
-let zoomedIn = ref(false)
+const zoomedIn = ref(false)
 
 const nextImage = () => {
   expandedGalleryIndex.value++

apps/app-frontend/src/pages/project/Index.vue

@@ -232,15 +232,7 @@ import {
   GlobeIcon,
   ClipboardCopyIcon,
 } from '@modrinth/assets'
-import {
+import { Categories, EnvironmentIndicator, Card, Avatar, Button, NavRow } from '@modrinth/ui'
-  Categories,
-  EnvironmentIndicator,
-  Card,
-  Avatar,
-  Button,
-  Promotion,
-  NavRow,
-} from '@modrinth/ui'
 import { formatNumber } from '@modrinth/utils'
 import {
   BuyMeACoffeeIcon,
@@ -261,7 +253,7 @@ import { handleError } from '@/store/notifications.js'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import { install as installVersion } from '@/store/install.js'
-import { get_project, get_project_many, get_team, get_version_many } from '@/helpers/cache.js'
+import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 
 dayjs.extend(relativeTime)

apps/app-frontend/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    "strict": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

apps/app-frontend/tsconfig.json

@@ -1,12 +1,4 @@
 {
-  "compilerOptions": {
+  "files": [],
-    "module": "NodeNext",
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "target": "ESNext"
-  },
-  "exclude": ["node_modules", "dist"]
 }

apps/app-frontend/tsconfig.node.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}