321文字
2分
編集

wterm、Web 向けターミナルエミュレータ

Vercel Labs は、ブラウザ上で動かすターミナルエミュレータ wterm を公開した。読みは「ダブルターム」。表示は DOM ベースとし、ネイティブのテキスト選択・クリップボード・ページ内検索・アクセシビリティ支援技術との相性を狙っている。パーサなどのコアは Zig で書かれ、リリースビルドでは約 12 KB の WASM にまとめられる。

  • エスケープシーケンスは VT100 / VT220 / xterm 系を扱い、代替画面バッファにより vim や less、htop などの利用を想定している。
  • 変更のあった行だけを requestAnimationFrame 単位で再描画するダーティ行追跡、設定可能なスクロールバック、24 ビット色、ResizeObserver による自動リサイズを備える。
  • テーマは CSS カスタムプロパティで切り替え、既定で Default・Solarized Dark・Monokai・Light を用意する。
  • バックエンドとは WebSocket などで接続する想定で、リポジトリには SSH やローカル PTY 向けの例がある。デモは Vercel Labs の just-bash を用いた構成が紹介されている。
  • npm では @wterm/core(WASM ブリッジと WebSocket トランスポート)、@wterm/dom(DOM レンダラ)、@wterm/react(React コンポーネントと useTerminal)、ブラウザ内 Bash の @wterm/just-bash、端末内 Markdown 表示の @wterm/markdown が分割されている。ライセンスは Apache-2.0 である。

React からは次のように最小構成で組み込める(onData を省略すると入力は端末へエコーバックされる)。

tsx
import { Terminal } from "@wterm/react";
import "@wterm/react/css";

function App() {
  return <Terminal />;
}


#参考文献