refactor: app event bus (#6985)

* refactor: app event bus

* fix: use messagepack + cleanup

* fix: use postcard

* fix: lint

* fix: import gate

* fix: prettierignore + lint

* fix: lint

* fix: rev

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

@@ -104,8 +104,9 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import type { Ref } from 'vue'
-import { computed, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import { useAppEvent } from '@/composables/use-app-event'
 import { trackEvent } from '@/helpers/analytics'
 import {
 	get_default_user,
@@ -114,7 +115,6 @@ import {
 	set_default_user,
 	users,
 } from '@/helpers/auth'
-import { process_listener } from '@/helpers/events'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
 import type { Skin } from '@/helpers/skins'
 import { get_available_skins } from '@/helpers/skins'
@@ -251,16 +251,12 @@ async function logout(id: string) {
 	trackEvent('AccountLogOut')
 }
 
-const unlisten = await process_listener(async (e) => {
+useAppEvent('process', async (e) => {
 	if (e.event === 'launched') {
 		await refreshValues()
 	}
 })
 
-onUnmounted(() => {
-	unlisten()
-})
-
 const messages = defineMessages({
 	notSignedIn: {
 		id: 'minecraft-account.not-signed-in',

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

@@ -148,8 +148,8 @@ import { useRouter } from 'vue-router'
 
 import AppUpdateButton from '@/components/ui/app-update-button/index.vue'
 import { useInstallJobNotifications } from '@/composables/browse/install-job-notifications'
+import { useAppEvent } from '@/composables/use-app-event'
 import { trackEvent } from '@/helpers/analytics'
-import { loading_listener, process_listener } from '@/helpers/events'
 import { get_many as getInstances } from '@/helpers/instance'
 import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
 import type { LoadingBar } from '@/helpers/state'
@@ -294,7 +294,7 @@ onMounted(() => {
 	window.addEventListener('online', handleOnline)
 })
 
-const unlistenProcess = await process_listener(async () => {
+useAppEvent('process', async () => {
 	await refresh()
 })
 
@@ -554,7 +554,7 @@ const installJobNotifications = await useInstallJobNotifications({
 
 await refreshLoadingBars()
 
-const unlistenLoading = await loading_listener(async () => {
+useAppEvent('loading', async () => {
 	await refreshLoadingBars()
 })
 
@@ -573,8 +573,6 @@ onBeforeUnmount(() => {
 	dismissed.value = false
 	window.removeEventListener('offline', handleOffline)
 	window.removeEventListener('online', handleOnline)
-	unlistenProcess()
-	unlistenLoading()
 	installJobNotifications.dispose()
 })
 </script>

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

@@ -10,11 +10,11 @@ import {
 import { Avatar, IconButton, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { useAppEvent } from '@/composables/use-app-event'
 import { trackEvent } from '@/helpers/analytics'
-import { process_listener } from '@/helpers/events'
 import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
 import { kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
@@ -136,7 +136,7 @@ defineExpose({
 
 const currentEvent = ref(null)
 
-const unlisten = await process_listener((e) => {
+useAppEvent('process', (e) => {
 	if (e.instance_id === props.instance.id) {
 		currentEvent.value = e.event
 		if (e.event === 'finished') {
@@ -148,7 +148,6 @@ const unlisten = await process_listener((e) => {
 onMounted(() => {
 	checkProcess()
 })
-onUnmounted(() => unlisten())
 </script>
 
 <template>

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

@@ -7,7 +7,7 @@ import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import NavButton from '@/components/ui/NavButton.vue'
-import { instance_listener } from '@/helpers/events.js'
+import { useAppEvent } from '@/composables/use-app-event'
 import { list } from '@/helpers/instance'
 import { instanceKeys } from '@/pages/instance/query-options'
 
@@ -148,7 +148,7 @@ const getInstances = async () => {
 await getInstances()
 updateMaxAuto()
 
-const unlistenInstance = await instance_listener(async (event) => {
+useAppEvent('instance', async (event) => {
 	if (event.event !== 'synced') {
 		await getInstances()
 	}
@@ -162,7 +162,6 @@ onUnmounted(() => {
 	window.removeEventListener('resize', updateMaxAuto)
 	document.body.classList.remove('quick-instance-dragging')
 	clearOverdragFlash()
-	unlistenInstance()
 })
 
 const messages = defineMessages({

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

@@ -82,7 +82,7 @@ import { injectLoadingState } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { loading_listener } from '@/helpers/events.js'
+import { useAppEvent } from '@/composables/use-app-event'
 
 const doneLoading = ref(false)
 const loadingProgress = ref(0)
@@ -132,13 +132,10 @@ function fakeLoadingIncrease() {
 	}
 }
 
-loading_listener(async (e) => {
+useAppEvent('loading', (e) => {
 	if (e.event.type === 'directory_move') {
 		loadingProgress.value = 100 * (e.fraction ?? 1)
 		message.value = 'Updating app directory...'
-	} else if (e.event.type === 'checking_for_updates') {
-		loadingProgress.value = 100 * (e.fraction ?? 1)
-		message.value = 'Checking for updates...'
 	}
 })
 </script>

apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue

@@ -34,6 +34,7 @@ import { get_project_many, get_version, get_version_many } from '@/helpers/cache
 import { wait_for_install_job } from '@/helpers/install'
 import { update_managed_modrinth_version } from '@/helpers/instance'
 import type { GameInstance } from '@/helpers/types'
+import { injectAppEvents } from '@/providers/app-events'
 import { injectServerInstall } from '@/providers/server-install'
 
 type Dependency = Labrinth.Versions.v3.Dependency
@@ -74,6 +75,7 @@ type ProjectInfo = {
 }
 
 const { formatMessage } = useVIntl()
+const appEvents = injectAppEvents()
 const { startInstallingServer, stopInstallingServer } = injectServerInstall()
 type UpdateCompleteCallback = () => void | Promise<void>
 
@@ -253,7 +255,7 @@ async function handleUpdate() {
 	try {
 		if (modpackVersionId.value && instance.value) {
 			const job = await update_managed_modrinth_version(instance.value.id, modpackVersionId.value)
-			await wait_for_install_job(job.job_id)
+			await wait_for_install_job(appEvents, job.job_id)
 			await onUpdateComplete.value()
 		}
 	} catch (error) {

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceUpdateModal.vue

@@ -39,6 +39,7 @@ import {
 } from '@/helpers/install'
 import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
 import type { GameInstance } from '@/helpers/types'
+import { injectAppEvents } from '@/providers/app-events'
 
 type UpdateCompleteCallback = () => void | Promise<void>
 
@@ -54,6 +55,7 @@ const instance = ref<GameInstance | null>(null)
 const preview = ref<SharedInstanceUpdatePreview | null>(null)
 const onComplete = ref<UpdateCompleteCallback>(() => {})
 const { formatMessage } = useVIntl()
+const appEvents = injectAppEvents()
 const { notifySharedInstanceError } = useSharedInstanceErrors()
 const diffs = computed<ContentDiffItem[]>(
 	() =>
@@ -78,7 +80,7 @@ async function update() {
 	try {
 		if (instance.value) {
 			const job = await install_update_shared_instance(instance.value.id)
-			await wait_for_install_job(job.job_id)
+			await wait_for_install_job(appEvents, job.job_id)
 			await onComplete.value()
 			successful = true
 		}

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -21,12 +21,12 @@ import {
 import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import type { Dayjs } from 'dayjs'
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { useAppEvent } from '@/composables/use-app-event'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project } from '@/helpers/cache'
-import { process_listener } from '@/helpers/events'
 import { kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
 import type { GameInstance } from '@/helpers/types'
@@ -108,7 +108,7 @@ const stop = async (event: MouseEvent) => {
 	loading.value = false
 }
 
-const unlistenProcesses = await process_listener(async () => {
+useAppEvent('process', async () => {
 	await checkProcess()
 })
 
@@ -121,10 +121,6 @@ const checkProcess = async () => {
 onMounted(() => {
 	checkProcess()
 })
-
-onUnmounted(() => {
-	unlistenProcesses()
-})
 </script>
 <template>
 	<SmartClickable>

apps/app-frontend/src/components/ui/world/RecentWorldsList.vue

@@ -5,12 +5,12 @@ import { GAME_MODES, injectNotificationManager } from '@modrinth/ui'
 import { platform } from '@tauri-apps/plugin-os'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 import InstanceItem from '@/components/ui/world/InstanceItem.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
+import { useAppEvent } from '@/composables/use-app-event'
 import { trackEvent } from '@/helpers/analytics'
-import { instance_listener, process_listener } from '@/helpers/events'
 import { kill, run } from '@/helpers/instance'
 import { get_all } from '@/helpers/process'
 import { get_game_versions } from '@/helpers/tags'
@@ -215,11 +215,11 @@ async function stopInstance(path: string) {
 const currentInstance = ref<string>()
 const currentWorld = ref<string>()
 
-const unlistenProcesses = await process_listener(async () => {
+useAppEvent('process', async () => {
 	await checkProcesses()
 })
 
-const unlistenInstances = await instance_listener(async () => {
+useAppEvent('instance', async () => {
 	await populateJumpBackIn().catch(() => {
 		console.error('Failed to populate jump back in')
 	})
@@ -251,11 +251,6 @@ onMounted(() => {
 	checkProcesses()
 	linuxPopulateCount.value = 0
 })
-
-onUnmounted(() => {
-	unlistenProcesses()
-	unlistenInstances()
-})
 </script>
 
 <template>