Writable console

src/lib/classes/console/Console.ts

@@ -0,0 +1,41 @@
+import { Tabs } from "$lib/classes/Tabs";
+import { writable, type Writable } from "svelte/store";
+
+export class Console {
+	static frontendConsoleLines: Writable<string[]> = writable([]);
+	static backendConsoleLines: Writable<string[]> = writable([]);
+	_: number = 0;
+
+	static writeLineFrontend(textLine: string) {
+		Console.frontendConsoleLines.update((items) => [...items, textLine]);
+	}
+
+	static writeLineBackend(textLine: string) {
+		Console.backendConsoleLines.update((items) => [...items, textLine]);
+	}
+
+	/**
+	 *Function for sending an error to a specific tab in the console
+	 *@param error
+	 *@param tab
+	 */
+	static sendErrorToTab(error: string, tab: Tabs) {
+		switch (tab) {
+			case Tabs.Frontend:
+				Console.writeLineFrontend(error);
+
+				break;
+			case Tabs.Backend:
+				Console.writeLineBackend(error);
+
+				break;
+			case Tabs.All:
+				Console.writeLineBackend(error);
+				Console.writeLineFrontend(error);
+
+				break;
+			default:
+				break;
+		}
+	}
+}

src/lib/components/console/Console.svelte

@@ -5,15 +5,13 @@
 		Arrow_downward,
 		Arrow_upward,
 	} from "svelte-google-materialdesign-icons";
+	import { Console } from "$lib/classes/console/Console";
 
 	let currentlyCollapsed: boolean = true;
 	let currentTab: Tabs = Tabs.Frontend;
 	let consoleContainer: HTMLElement;
 	let consoleBar: HTMLElement;
 
-	let frontEndErrors: string[] = [];
-	let backEndErrors: string[] = [];
-
 	const consoleInitialSize: number = 300;
 	let consoleExtendedSize: number = consoleInitialSize;
 	let consoleCollapsedSize: number = 0;
@@ -94,30 +92,8 @@
 		currentTab = tab;
 	}
 
-	/**
-	 *Function for sending an error to a specific tab in the console
-	 *@param {string} error
-	 *@param {Tabs} tab
-	 */
-	export function sendErrorToTab(error: string, tab: Tabs) {
-		switch (tab) {
-			case Tabs.Frontend:
-				frontEndErrors.push(error);
-				frontEndErrors = frontEndErrors;
-				break;
-			case Tabs.Backend:
-				backEndErrors.push(error);
-				backEndErrors = backEndErrors;
-				break;
-			case Tabs.All:
-				frontEndErrors.push(error);
-				backEndErrors.push(error);
-				frontEndErrors = frontEndErrors;
-				break;
-			default:
-				break;
-		}
-	}
+	let frontendConsole = Console.frontendConsoleLines;
+	let backendConsole = Console.backendConsoleLines;
 </script>
 
 <div class="outer-overflow" bind:this={consoleContainer}>
@@ -171,11 +147,11 @@
 	</div>
 	<div class="console" style="height: {consoleSize}px;">
 		{#if currentTab == Tabs.Frontend}
-			{#each frontEndErrors as error}
+			{#each $frontendConsole as error}
 				<ConsoleLine componentText={error} />
 			{/each}
 		{:else if currentTab == Tabs.Backend}
-			{#each backEndErrors as error}
+			{#each $backendConsole as error}
 				<ConsoleLine componentText={error} />
 			{/each}
 		{/if}