lognal
Ein Log-Viewer, der aussieht und sich verhält wie ein Terminal, für das Web und für Flutter. Er zeichnet die Ausgabe auf ein Canvas, statt für jede Zeile ein Element anzulegen, sodass ein schneller Strom von Meldungen und ein Verlauf von Zehntausenden Einträgen denselben Frame kosten und eine Anwendung kein eigenes Konsolenfenster bauen muss.
Über dieses Projekt
lognal ist ein Log-Viewer für Anwendungen, die Ausgaben auf ihrem eigenen Bildschirm zeigen müssen: ein Konsolenbereich auf einer Webseite, eine Debug-Ansicht in einer Flutter-App oder ein Fenster zum Lesen einer Logdatei. Die Einträge liegen als schlichte Daten vor, und auf das Canvas werden nur die sichtbaren Zeilen gezeichnet. Was ein Frame kostet, hängt deshalb davon ab, was auf dem Bildschirm steht, und nicht von der Länge des Verlaufs. Der Kern darunter – Speicher, Filter, Textsatz und Layout – ist zweimal geschrieben, in TypeScript und in Dart, Datei für Datei, sodass eine Zeile im Browser und in der App an derselben Stelle umbricht, gleich breit ist und von einer Suche gleich getroffen wird.
Er spiegelt, was die Laufzeitumgebung ohnehin ausgibt – console.log, console.table und console.group im Browser, print und debugPrint in Flutter –, während die ursprüngliche Ausgabe weiter funktioniert. Logdateien liest er mit erkannter Kodierung, wandelt ANSI-Escape-Codes in Farbe um und kann einer Datei folgen, die weiter wächst. Objekte, Listen, Maps und Fehler werden im Moment des Loggens festgehalten und lassen sich an Ort und Stelle auf- und zuklappen. Die Werkzeugleiste folgt neuen Einträgen, filtert nach Text und nach Level und hebt bei der Suche jeden Treffer hervor, statt den Rest auszublenden; eine optionale Eingabezeile reicht Befehle an eine Funktion weiter und gibt die Antworten aus. Koreanisch und andere breite Zeichen bleiben im Raster, Hangul-Wörter werden beim Umbruch nicht getrennt, und die Eingabezeile wartet, bis die Eingabemethode die Komposition abgeschlossen hat. Die Bedienelemente sind echte Schaltflächen mit zugänglichen Namen, und eine verborgene Liste spiegelt die sichtbaren Einträge für Screenreader.
Das npm-Paket hat keine Laufzeitabhängigkeiten: React ist eine optionale Peer-Abhängigkeit, die nur die Komponente unter lognal/react braucht, und das Stylesheet ist ein einziger Import. Das Flutter-Paket hängt allein vom Flutter-SDK ab und baut auf der Widget-Schicht auf, ohne Material und ohne Cupertino, sodass es in jede App passt, ohne ein zweites Designsystem mitzubringen. Sechs Paletten sind eingebaut, auto folgt der hellen oder dunklen Einstellung des Systems, und ein eigenes Theme ist ein Block CSS Custom Properties oder ein Aufruf von buildTheme. Das JavaScript-Paket ist ESM mit TypeScript-Deklarationen, und jedes der beiden Pakete hat eine eigene Version und ein eigenes Changelog.
Funktionen
Dokumentationsseite
TypeScript-Typen
Mehrsprachig
Durch Tests geprüft
Plattformübergreifend
Barrierefrei gebaut
Dunkelmodus
Tree-shakebar
Ohne Abhängigkeiten