React im Terminal: Ink 7.0 überarbeitet Input-Handling grundlegend
Ink 7.0 überarbeitet das Input-Handling und bringt neue Hooks für Animation, Paste und responsive Layouts. Voraussetzung sind jetzt Node.js 22 und React 19.2.
(Bild: Ink)
Mit Version 7.0.0 hebt die React-basierte CLI-Bibliothek Ink ihre Mindestanforderungen deutlich an und überarbeitet das Input-Handling grundlegend. Gleichzeitig kommen neue APIs für Interaktivität, Layout und Animation hinzu. Die Maintainer setzen künftig Node.js 22 und React ab Version 19.2 voraus. Die Änderungen erfordern Anpassungen in bestehenden Projekten, ermöglichen aber auch komplexere Terminal-UIs.
Mit Ink lassen sich interaktive Kommandozeilenanwendungen deklarativ mit React-Komponenten entwickeln. Statt direkt mit ANSI-Escape-Sequenzen und Low-Level-Terminal-APIs zu arbeiten, definieren Entwickler ihre CLI-Oberflächen ähnlich wie Web-UIs – mit State-Management, Komponentenstruktur und Hooks.
Breaking Changes im Input-Handling
Intern nutzt Ink nun Reacts useEffectEvent, um zu vermeiden, dass sich Input-Handler bei jedem Render neu registrieren. Das stabilisiert das Event-Handling und reduziert Performance-Overhead.
Auch bei der Verarbeitung von Tastatureingaben gibt es Korrekturen. So unterscheidet Ink nun sauber zwischen key.backspace und key.delete. Viele Terminals senden für beide Tasten identische Byte-Sequenzen, was bislang zu Fehlinterpretationen führte. Wer bisher auf key.delete reagiert hat, um Backspace abzufangen, muss seine Logik anpassen. Außerdem setzt Ink key.meta nicht mehr beim Drücken der Escape-Taste: key.meta steht jetzt ausschließlich für Alt-/Meta-Kombinationen, key.escape wird separat ausgewiesen.
Neue Hooks für Interaktivität und Animation
Der neue Hook usePaste behandelt eingefügten Text aus der Zwischenablage als eigenständiges Ereignis. Dafür aktiviert Ink den Bracketed-Paste-Modus des Terminals, sodass eingefügter Text als zusammenhängender String ankommt. Ohne diesen Modus würde ein Paste-Vorgang als Serie einzelner Keypress-Events erscheinen – das ist problematisch etwa bei Eingabefeldern oder REPL-artigen Interfaces.
Für responsive Layouts liefert der neue Hook useWindowSize die aktuelle Terminalgröße in Spalten und Zeilen und löst bei Änderungen automatisch ein Re-Render aus. So lassen sich etwa Tabellen oder Layouts dynamisch an unterschiedliche Terminalgrößen anpassen.
Mit useBoxMetrics ermitteln Entwickler zur Laufzeit die tatsächlichen Dimensionen von Layout-Containern – vergleichbar mit DOM-Messungen im Browser. Das führt zu präziserer Layout-Logik, wenn Inhalte abhängig von der gerenderten Größe positioniert oder gekürzt werden müssen.
Der Hook useAnimation bringt einen integrierten Animationsmechanismus mit. Er stellt einen Frame-Zähler bereit, der in konfigurierbaren Intervallen hochzählt und sich pausieren lässt. Beim Unmount räumt er automatisch auf. Typische Einsatzfälle sind Spinner, Fortschrittsanzeigen oder ASCII-Animationen.
Videos by heise
Rendering und Layout-Erweiterungen
Beim Rendering kommt ein Alternate-Screen-Modus hinzu. Aktiviert man ihn beim Aufruf von render(), nutzt die Anwendung den zweiten Bildschirmpuffer des Terminals – ein Verhalten, das von Programmen wie Vim oder less bekannt ist. Nach dem Beenden stellt das Terminal den ursprünglichen Inhalt wieder her. Ergänzend lässt sich mit der neuen Option interactive die automatische Erkennung interaktiver Umgebungen überschreiben, etwa für CI-Pipelines oder Pipe-Szenarien.
Das Layout-System erhält ebenfalls Erweiterungen. Die Komponente <Box> unterstützt jetzt aspectRatio, alignContent, position="static" sowie Positionsangaben wie top, right, bottom und left. Dazu kommen maxWidth und maxHeight. Mit borderBackgroundColor lässt sich erstmals die Hintergrundfarbe von Rahmen unabhängig vom Inhalt setzen. Für Text führt Ink die Option wrap="hard" ein: Sie füllt Zeilen strikt auf die verfügbare Breite auf und bricht dabei auch mitten im Wort um – nützlich für tabellarische oder streng ausgerichtete Monospace-Layouts.
Im Fokus-Management liefert der Hook useFocusManager nun zusätzlich die ID des aktuell fokussierten Elements. Das erleichtert die Steuerung komplexerer Interaktionen und die Fehlersuche.
Bugfixes
Neben den funktionalen Neuerungen behebt Version 7.0.0 mehrere Stabilitätsprobleme. Dazu zählen Darstellungsfehler bei CJK-Texten und Emojis, Abstürze bei unbekannten Keycodes im Input-Handling sowie Rendering-Fehler bei abschließenden Zeilenumbrüchen und überlappenden Schreibvorgängen.
Alle Informationen zur neuen Version 7.0.0 finden sich in den Release Notes auf der GitHub-Projektseite von Ink.
(fo)
