TermDOM: Bouw terminal-apps met HTML, CSS en de DOM

Installatie

npm install @b9g/termdom

Voorbeeld

import {TermDOM} from "@b9g/termdom";

const term = new TermDOM();
term.attach();

// Het document is een echt DOM-document.
const {document} = term;
document.body.innerHTML = `
<style>
  .card { border: 1px solid #5fafff; padding: 0 1ch; width: 36ch; }
  .title { color: #5fafff; font-weight: bold; }
  .done { color: green; }
  .rest { color: #444; }
  .pct { color: #888; }
</style>
<div class="card">
  <div class="title">Installeren</div>
  <div>
    <span class="done" id="done"></span><span class="rest" id="rest"></span>
    <span class="pct" id="pct"></span>
  </div>
</div>
`;

// TermDOM observeert mutaties en rendert automatisch opnieuw.
let n = 0;
setInterval(() => {
  n = (n + 1) % 101;
  const cells = Math.round(n / 4);
  document.getElementById("done").textContent = "█".repeat(cells);
  document.getElementById("rest").textContent = "░".repeat(25 - cells);
  document.getElementById("pct").textContent = String(n).padStart(3) + "%";
}, 50);

Functionaliteiten

  • Stijlbladen: CSS uit <style>-elementen en style-attributen cascadeert en erft op dezelfde manier als in de browser. Dit wordt vertaald naar ANSI-escapecodes voor kleur en tekstdecoratie.
  • Layout: Het CSS box model, flexbox en table layout worden volledig ondersteund.
  • Scrollen: Documenten die hoger zijn dan de terminal kunnen worden gescrold met window.scrollTo() en element.scrollIntoView().
  • Events: Events voor toetsen, muis, focus en plakken (paste) worden getriggerd op elementen, het document en het window, aangestuurd via STDIN.
  • DOM-hulpprogramma's: document.querySelector(), MutationObserver, ResizeObserver en Element.getBoundingClientRect() zijn gekoppeld aan de layout-engine en viewport, conform de browserstandaarden.
  • Formulieren: <input>, <textarea>, <select>, checkboxes en radios beschikken over standaardgedrag en een terminal-native uiterlijk, en kunnen worden gestyled met gewoon CSS. Tab-navigatie en :focus-stijlen worden ondersteund.
  • Web Components: customElements.define(), attachShadow(), <slot>, :host en scoped styles werken zoals in de browser. De ingebouwde formulierbesturingselementen zijn zelf shadow trees.
  • Tekst: CJK, emoji's en combinerende tekens nemen de correcte breedte in beslag. Hebreeuws en Arabisch worden gerenderd in visuele volgorde met contextuele vormgeving, waarbij de cursor per grafeem beweegt.
  • Selectie: Sleep om tekst te selecteren, gestyled met ::selection.
  • Volledig scherm: Element.requestFullscreen() rendert een element naar het alternatieve scherm. Bij het afsluiten worden de shell en de scrollback hersteld.

Voorbeelden

De volgende voorbeelden zijn beschikbaar:

  • markdown.ts: Een Markdown-viewer die pagina's aanmaakt wanneer het document hoger is dan de terminal.
  • chat.ts: Een streaming LLM-chatclient aangedreven door ch.at, inclusief een transcript en composer.
  • todomvc.ts: De officiële TodoMVC met ongewijzigde componentlogica; alleen het stylesheet is vervangen.
  • fuzzy-finder.ts: Een bestandskiezer die de selectie naar stdout print.

Meer uitvoerbare voorbeelden zijn te vinden in de map examples/.

Runtimes

TermDOM draait op Node, Bun en Deno. De bibliotheek bevat geen native componenten en kan worden gebruikt om binaries te maken met tools zoals bun build --compile.

Compatibiliteit

Het bestand COMPATIBILITY.md wordt gegenereerd door elke functie te testen tegen de engine.

Licentie

MIT