gonna add terminal eventually
mellbacon committed
Aug 11, 2022 at 17:26 UTC
225f5c9720724dda57b4a0dabebd43052f3b8e01
3 files changed
+215
-1
package.json
+3
-1
@@ -32,6 +32,8 @@
32
"dependencies": {
33
"@rollup/plugin-url": "^7.0.0",
34
"@tauri-apps/api": "^1.0.2",
35
- "sirv-cli": "^2.0.0"
35
+ "sirv-cli": "^2.0.0",
36
+ "xterm": "^4.19.0",
37
+ "xterm-addon-fit": "^0.5.0"
38
}
39
}
src/components/Terminal/Terminal.svelte
new
+202
@@ -0,0 +1,202 @@
1
+<script>
2
+ import { onMount } from "svelte";
3
+ import xterm from "xterm";
4
+ import FitAddon from "xterm-addon-fit";
5
+ import ResizeObserver from "svelte-resize-observer";
6
+
7
+ let terminalElement;
8
+ let termFit;
9
+ let terminalController;
10
+
11
+ function initializeXterm() {
12
+ terminalController = new xterm.Terminal({
13
+ fontSize: 12,
14
+ });
15
+ termFit = new FitAddon.FitAddon();
16
+ terminalController.loadAddon(termFit);
17
+ terminalController.open(terminalElement);
18
+ termFit.fit();
19
+ terminalController.write("\x1b[32mHello\x1b[m\r\n");
20
+ }
21
+
22
+ onMount(async () => {
23
+ initializeXterm();
24
+ });
25
+
26
+ function handleResize() {
27
+ if (termFit) {
28
+ termFit.fit();
29
+ }
30
+ }
31
+</script>
32
+
33
+<div id="terminal" bind:this={terminalElement} />
34
+
35
+<div class="observer">
36
+ <ResizeObserver on:resize={handleResize} />
37
+</div>
38
+
39
+<style>
40
+ .observer {
41
+ position: absolute;
42
+ top: 0;
43
+ left: 0;
44
+ right: 0;
45
+ bottom: 0;
46
+ }
47
+
48
+ /* Xterm.css */
49
+ :global(.xterm) {
50
+ cursor: text;
51
+ position: relative;
52
+ user-select: none;
53
+ -ms-user-select: none;
54
+ -webkit-user-select: none;
55
+ }
56
+
57
+ :global(.xterm.focus),
58
+ :global(.xterm:focus) {
59
+ outline: none;
60
+ }
61
+
62
+ :global(.xterm .xterm-helpers) {
63
+ position: absolute;
64
+ top: 0;
65
+ /**
66
+ * The z-index of the helpers must be higher than the canvases in order for
67
+ * IMEs to appear on top.
68
+ */
69
+ z-index: 5;
70
+ }
71
+
72
+ :global(.xterm .xterm-helper-textarea) {
73
+ padding: 0;
74
+ border: 0;
75
+ margin: 0;
76
+ /* Move textarea out of the screen to the far left, so that the cursor is not visible */
77
+ position: absolute;
78
+ opacity: 0;
79
+ left: -9999em;
80
+ top: 0;
81
+ width: 0;
82
+ height: 0;
83
+ z-index: -5;
84
+ /** Prevent wrapping so the IME appears against the textarea at the correct position */
85
+ white-space: nowrap;
86
+ overflow: hidden;
87
+ resize: none;
88
+ }
89
+
90
+ :global(.xterm .composition-view) {
91
+ /* TODO: Composition position got messed up somewhere */
92
+ background: #000;
93
+ color: #fff;
94
+ display: none;
95
+ position: absolute;
96
+ white-space: nowrap;
97
+ z-index: 1;
98
+ }
99
+
100
+ :global(.xterm .composition-view.active) {
101
+ display: block;
102
+ }
103
+
104
+ :global(.xterm .xterm-viewport) {
105
+ /* On OS X this is required in order for the scroll bar to appear fully opaque */
106
+ background-color: #000;
107
+ overflow-y: scroll;
108
+ cursor: default;
109
+ position: absolute;
110
+ right: 0;
111
+ left: 0;
112
+ top: 0;
113
+ bottom: 0;
114
+ }
115
+
116
+ :global(.xterm .xterm-screen) {
117
+ position: relative;
118
+ }
119
+
120
+ :global(.xterm .xterm-screen canvas) {
121
+ position: absolute;
122
+ left: 0;
123
+ top: 0;
124
+ }
125
+
126
+ :global(.xterm .xterm-scroll-area) {
127
+ visibility: hidden;
128
+ }
129
+
130
+ :global(.xterm-char-measure-element) {
131
+ display: inline-block;
132
+ visibility: hidden;
133
+ position: absolute;
134
+ top: 0;
135
+ left: -9999em;
136
+ line-height: normal;
137
+ }
138
+
139
+ :global(.xterm.enable-mouse-events) {
140
+ /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
141
+ cursor: default;
142
+ }
143
+
144
+ :global(.xterm.xterm-cursor-pointer),
145
+ :global(.xterm .xterm-cursor-pointer) {
146
+ cursor: pointer;
147
+ }
148
+
149
+ :global(.xterm.column-select.focus) {
150
+ /* Column selection mode */
151
+ cursor: crosshair;
152
+ }
153
+
154
+ :global(.xterm .xterm-accessibility),
155
+ :global(.xterm .xterm-message) {
156
+ position: absolute;
157
+ left: 0;
158
+ top: 0;
159
+ bottom: 0;
160
+ right: 0;
161
+ z-index: 10;
162
+ color: transparent;
163
+ }
164
+
165
+ :global(.xterm .live-region) {
166
+ position: absolute;
167
+ left: -9999px;
168
+ width: 1px;
169
+ height: 1px;
170
+ overflow: hidden;
171
+ }
172
+
173
+ :global(.xterm-dim) {
174
+ opacity: 0.5;
175
+ }
176
+
177
+ :global(.xterm-underline) {
178
+ text-decoration: underline;
179
+ }
180
+
181
+ :global(.xterm-strikethrough) {
182
+ text-decoration: line-through;
183
+ }
184
+
185
+ :global(.xterm-screen .xterm-decoration-container .xterm-decoration) {
186
+ z-index: 6;
187
+ position: absolute;
188
+ }
189
+
190
+ :global(.xterm-decoration-overview-ruler) {
191
+ z-index: 7;
192
+ position: absolute;
193
+ top: 0;
194
+ right: 0;
195
+ pointer-events: none;
196
+ }
197
+
198
+ :global(.xterm-decoration-top) {
199
+ z-index: 2;
200
+ position: relative;
201
+ }
202
+</style>
yarn.lock
+10
@@ -1025,3 +1025,13 @@ ws@^7.4.3:
1025
version "7.5.8"
1026
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.8.tgz#ac2729881ab9e7cbaf8787fe3469a48c5c7f636a"
1027
integrity sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==
1028
+
1029
+xterm-addon-fit@^0.5.0:
1030
+ version "0.5.0"
1031
+ resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
1032
+ integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
1033
+
1034
+xterm@^4.19.0:
1035
+ version "4.19.0"
1036
+ resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0.tgz#c0f9d09cd61de1d658f43ca75f992197add9ef6d"
1037
+ integrity sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ==