A SvelteKit wrapper for Xterm.js , enabling terminal embedding in SvelteKit apps, managing Xterm addons, and providing seamless updates with the latest SvelteKit and Xterm.js versions.
To install xterm-svelte, use the following npm command:
Once installed, you can easily integrate xterm-svelte into your project. Here's a sample code snippet to get you started:
<script lang="ts">
import { Xterm, XtermAddon } from '@battlefieldduck/xterm-svelte';
import type {
ITerminalOptions,
ITerminalInitOnlyOptions,
Terminal
} from '@battlefieldduck/xterm-svelte';
let options: ITerminalOptions & ITerminalInitOnlyOptions = {
fontFamily: 'Consolas'
};
async function onLoad(event: CustomEvent<{ terminal: Terminal }>) {
console.log('Child component has loaded');
const terminal = event.detail.terminal;
// FitAddon Usage
const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
terminal.loadAddon(fitAddon);
fitAddon.fit();
terminal.write('Hello World');
}
function onData(event: CustomEvent<string>) {
const data = event.detail;
console.log('onData()', data);
}
function onKey(event: CustomEvent<{ key: string; domEvent: KeyboardEvent }>) {
const data = event.detail;
console.log('onKey()', data);
}
</script>
<Xterm {options} on:load={onLoad} on:data={onData} on:key={onKey} />
For more details and advanced usage, please refer to the xterm-svelte Github README.md. Happy coding!