docs/src/components/WebContainer/Terminal.astro at main · bombshell-dev/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<docs-terminal class="not-content" />

<style>
docs-terminal {
  display: block;
  min-height: 256px;
}
</style>

<script>
  import type { Terminal } from "@xterm/xterm";
  import { theme } from "./theme.ts";

  customElements.define(
    "docs-terminal",
    class extends HTMLElement {
      instance: Terminal | undefined;
      ro: ResizeObserver | undefined;
      updateSize = () => {};
      inputId = `docs-terminal-${crypto.randomUUID()}`;

      connectedCallback() {
        this.boot();
      }
      disconnectedCallback() {
        this.instance?.dispose();
        this.ro?.disconnect();
      }
      handleResize() {
        this.ro = new ResizeObserver(() => this.updateSize());
        this.ro.observe(this);
      }
      labelHelperInput() {
        const input = this.querySelector<HTMLTextAreaElement>(".xterm-helper-textarea");
        input?.setAttribute("id", this.inputId);
        input?.setAttribute("name", this.inputId);
      }
      async boot() {
        if (this.instance) {
          this.instance.options.theme = theme;
          this.instance.open(this);
          this.labelHelperInput();
          return;
        }
        this.innerHTML = "";
        const [{ Terminal }, { FitAddon }, { WebLinksAddon }] =
          await Promise.all([
            import("@xterm/xterm"),
            import("@xterm/addon-fit"),
            import("@xterm/addon-web-links"),
          ]);
        this.instance = new Terminal({
          convertEol: true,
          cursorBlink: false,
          disableStdin: false,
          theme,
          fontSize: 16,
          fontFamily: "Menlo, courier-new, courier, monospace",
        });

        this.instance.open(this);
        this.labelHelperInput();

        const fit = new FitAddon();
        this.instance.loadAddon(fit);
        this.instance.loadAddon(new WebLinksAddon());
        this.updateSize = () => fit.fit();
        this.updateSize();
        this.handleResize();
      }
    }
  );
</script>

<style is:global>
  @import "@xterm/xterm/css/xterm.css" layer(xterm);

  .xterm {
    padding: 24px 12px;
  }
  .xterm-viewport {
    background: var(--container-fill);
    border: 1px solid var(--surface-border-fill);
  }
</style>