master
svelte 88 lines 2.5 KB
Raw
1 <script lang="ts" context="module">
2 export const termTheme = writable();
3 export const termOptions = writable();
4 let terminalController: Terminal = null;
5 let termFit = new FitAddon();
6 let pty: IPty;
7
8 export function clearTerminal() {
9 terminalController.clear();
10 pty.clear();
11 }
12
13 export function closeTerminal() {
14 if (pty) pty.kill();
15 }
16
17 export function updateTermTheme() {
18 if (!terminalController) return;
19 terminalController.options.theme = get(termTheme);
20 }
21 export function updateTermOptions() {
22 if (!terminalController) return;
23 const options: any = get(termOptions);
24 terminalController.options.fontFamily = options.fontFamily;
25 terminalController.options.fontSize = options.fontSize;
26 terminalController.options.lineHeight = options.lineHeight;
27 terminalController.options.cursorStyle = options.cursorStyle;
28 }
29
30 export function fitTerminal() {
31 if (!terminalController) return;
32 termFit.fit();
33 pty.resize(terminalController.cols, terminalController.rows);
34 }
35
36 function initShell(terminalElement: HTMLElement) {
37 terminalController = new Terminal({
38 fontFamily: "Cascadia Mono",
39 fontSize: 14,
40 });
41 updateTermTheme();
42 updateTermOptions();
43 let dir = localStorage.getItem("lastDir");
44 pty = spawn("powershell.exe", [], {
45 cols: terminalController.cols,
46 rows: terminalController.rows,
47 cwd: dir,
48 });
49 terminalController.loadAddon(termFit);
50 terminalController.open(terminalElement);
51 pty.onData((data) => terminalController.write(data));
52 terminalController.onData((data) => pty.write(data));
53 }
54 </script>
55
56 <script lang="ts">
57 import "@xterm/xterm/css/xterm.css";
58 import { onMount } from "svelte";
59 import { get, writable } from "svelte/store";
60 import { spawn, type IPty } from "tauri-pty";
61 import { FitAddon } from "@xterm/addon-fit";
62 import { Terminal } from "@xterm/xterm";
63
64 let terminalElement: HTMLElement;
65 export let hidden = false;
66
67 function initializeXterm() {
68 initShell(terminalElement);
69 }
70
71 onMount(async () => {
72 initializeXterm();
73 });
74 </script>
75
76 <svelte:window on:resize={fitTerminal} />
77
78 <div id="terminal" bind:this={terminalElement} class:hidden />
79
80 <style>
81 #terminal {
82 height: 97.5%;
83 width: 100%;
84 }
85 .hidden {
86 display: none;
87 }
88 </style>