Merge pull request #189 from Gawdl3y/clean/console-attachLogger

Use attachLogger to listen to log entries on the console page

ui/src/components/pages/SessionLogPage.vue

@@ -15,8 +15,10 @@
 			class="h-100 w-100 d-flex flex-column-reverse pa-3 overflow-auto text-selectable"
 		>
 			<code>
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<pre v-html="log + rtLog"></pre>
+				<!-- eslint-disable vue/no-v-html -->
+				<pre v-html="log"></pre>
+				<pre v-html="rtLog"></pre>
+				<!-- eslint-enable vue/no-v-html -->
 			</code>
 		</v-sheet>
 	</v-main>
@@ -25,7 +27,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
+import { attachLogger } from '@tauri-apps/plugin-log';
 import { mdiFolderText } from '@mdi/js';
 
 import useNotifications from '../../composables/notifications';
@@ -40,11 +42,13 @@ const loading = ref(true);
 const log = ref('');
 const rtLog = ref('');
 
-let unlistenToLogEvents = null;
+let detachLogger = null;
 
 onMounted(async () => {
-	// Listen for log events
-	unlistenToLogEvents = await listen('log://log', onLogEvent);
+	// Add new log entries that come in
+	detachLogger = await attachLogger((log) => {
+		rtLog.value += `${rtLog.value ? '\n' : ''}${format(log.message)}`;
+	});
 
 	// Load the existing log entries from the backend
 	try {
@@ -60,7 +64,7 @@ onMounted(async () => {
 });
 
 onUnmounted(() => {
-	unlistenToLogEvents();
+	detachLogger();
 });
 
 /**
@@ -86,20 +90,4 @@ function format(text) {
 async function openLogs() {
 	await invoke('open_log_dir');
 }
-
-/**
- * Handles a log event
- * @param {Object} evt
- */
-function onLogEvent(evt) {
-	// Strip ANSI control codes
-	// https://github.com/tauri-apps/tauri-plugin-log/blob/19f5dcc0425e9127d2c591780e5047b83e77a7c2/guest-js/index.ts#L195C31-L195C31
-	const message = evt.payload.message.replace(
-		// eslint-disable-next-line no-control-regex
-		/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
-		'',
-	);
-
-	rtLog.value += `${rtLog.value ? '\n' : ''}${format(message)}`;
-}
 </script>