Refactor terminal initialization and usage

Updated terminal variable initialization to use $state in Svelte components and replaced direct method calls with optional chaining for safer access. Changed options declarations to use const and improved example code in README. Removed outdated FAQ section and updated real-world usage references.

Author: BattlefieldDuck

README.md

@@ -57,9 +57,9 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
 		Terminal
 	} from '@battlefieldduck/xterm-svelte';
 
-	let terminal: Terminal;
+	let terminal = $state<Terminal>();
 
-	let options: ITerminalOptions & ITerminalInitOnlyOptions = {
+	const options: ITerminalOptions & ITerminalInitOnlyOptions = {
 		fontFamily: 'Consolas'
 	};
 
@@ -68,10 +68,10 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
 
 		// FitAddon Usage
 		const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
-		terminal.loadAddon(fitAddon);
+		terminal?.loadAddon(fitAddon);
 		fitAddon.fit();
 
-		terminal.write('Hello World');
+		terminal?.write('Hello World');
 	}
 
 	function onData(data: string) {
@@ -92,14 +92,10 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
 
 The `onLoad()` function fires when the xterm terminal is first initialized. You can use this function to perform actions such as initializing xterm addons.
 
-### Why is the `terminal` undefined?
-
-One possible cause is that you called the `terminal` function before it was initialized. For example, if you run the `terminal` function in the `onMount` function without wrapping it with `if (terminal !== undefined)`, it can lead to this issue.
-
 ## Real-world uses
-
-- [Thymis](https://thymis.io): Thymis is an open-source project that aims to provide a seamless and secure IoT device management solution.
-  With Thymis, users can easily configure and manage their devices running on the NixOS operating system.
+- [Bitor](https://github.com/bitorscanner/Bitor): Bitor Scanning Software
+- [Asm editor](https://github.com/Specy/asm-editor): A modern webapp to write, run and learn M68K, MIPS, RISC-V, X86 assembly
+- [Sylve](https://github.com/AlchemillaHQ/Sylve): Lightweight GUI for managing Bhyve, Jails, ZFS, networking, and more on FreeBSD
 - [And much more...](https://github.com/BattlefieldDuck/xterm-svelte/network/dependents)
 
 ## Contributing

src/lib/Xterm.svelte

@@ -6,7 +6,7 @@
 	let parent = $state<HTMLElement>();
 
 	let {
-		terminal = $bindable<Terminal>(),
+		terminal = $bindable<Terminal | undefined>(),
 		options,
 		onBell,
 		onBinary,

src/routes/Code.svelte

@@ -6,9 +6,9 @@
 		Terminal
 	} from '@battlefieldduck/xterm-svelte';
 
-	let terminal: Terminal;
+	let terminal = $state<Terminal>();
 
-	let options: ITerminalOptions & ITerminalInitOnlyOptions = {
+	const options: ITerminalOptions & ITerminalInitOnlyOptions = {
 		fontFamily: 'Consolas'
 	};
 
@@ -17,10 +17,10 @@
 
 		// FitAddon Usage
 		const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
-		terminal.loadAddon(fitAddon);
+		terminal?.loadAddon(fitAddon);
 		fitAddon.fit();
 
-		terminal.write('Hello World');
+		terminal?.write('Hello World');
 	}
 
 	function onData(data: string) {

src/routes/Terminal.svelte

@@ -2,34 +2,34 @@
 	import { Xterm, XtermAddon } from '$lib/index.js';
 	import type { ITerminalOptions, ITerminalInitOnlyOptions, Terminal } from '$lib/index.js';
 
-	let terminal: Terminal;
-	let handleResize: () => void;
-	let isCommandRunning = false;
+	let terminal = $state<Terminal>();
+	let handleResize = $state<() => void>();
+	let isCommandRunning = $state(false);
 
 	async function runCommand() {
 		isCommandRunning = true;
-		terminal.writeln('\r\n\r\nPinging 1.1.1.1 with 32 bytes of data:');
-		terminal.writeln('Reply from 1.1.1.1: bytes=32 time=4ms TTL=63');
+		terminal?.writeln('\r\n\r\nPinging 1.1.1.1 with 32 bytes of data:');
+		terminal?.writeln('Reply from 1.1.1.1: bytes=32 time=4ms TTL=63');
 		await new Promise((resolve) => setTimeout(resolve, 1000));
-		terminal.writeln('Reply from 1.1.1.1: bytes=32 time=4ms TTL=63');
+		terminal?.writeln('Reply from 1.1.1.1: bytes=32 time=4ms TTL=63');
 		await new Promise((resolve) => setTimeout(resolve, 1000));
-		terminal.writeln('Reply from 1.1.1.1: bytes=32 time=4ms TTL=63');
+		terminal?.writeln('Reply from 1.1.1.1: bytes=32 time=4ms TTL=63');
 		await new Promise((resolve) => setTimeout(resolve, 1000));
-		terminal.writeln('Reply from 1.1.1.1: bytes=32 time=3ms TTL=63');
-		terminal.writeln('\nPing statistics for 1.1.1.1:');
-		terminal.writeln('    Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),');
-		terminal.writeln('Approximate round trip times in milli-seconds:');
-		terminal.writeln('    Minimum = 3ms, Maximum = 4ms, Average = 3ms\r\n');
-		terminal.write('C:\\Users\\Administrator>ping 1.1.1.1');
+		terminal?.writeln('Reply from 1.1.1.1: bytes=32 time=3ms TTL=63');
+		terminal?.writeln('\nPing statistics for 1.1.1.1:');
+		terminal?.writeln('    Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),');
+		terminal?.writeln('Approximate round trip times in milli-seconds:');
+		terminal?.writeln('    Minimum = 3ms, Maximum = 4ms, Average = 3ms\r\n');
+		terminal?.write('C:\\Users\\Administrator>ping 1.1.1.1');
 		isCommandRunning = false;
 	}
 
 	async function onLoad() {
-		terminal.write('C:\\Users\\Administrator>ping 1.1.1.1');
+		terminal?.write('C:\\Users\\Administrator>ping 1.1.1.1');
 
 		// FitAddon Usage
 		const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
-		terminal.loadAddon(fitAddon);
+		terminal?.loadAddon(fitAddon);
 		fitAddon.fit();
 		handleResize = () => fitAddon.fit();
 	}
@@ -40,7 +40,7 @@
 		}
 	}
 
-	let options: ITerminalOptions & ITerminalInitOnlyOptions = {
+	const options: ITerminalOptions & ITerminalInitOnlyOptions = {
 		theme: {
 			background: '#000000'
 		},