opentui

OpenTUI Plattformkenntnisse

Zusammengefasste Kenntnisse zur Erstellung von Benutzeroberflächen für Endgeräte mit „OpenTUI“. Nutzen Sie die folgenden Entscheidungsbäume, um das passende Framework und die passenden Komponenten zu finden, und rufen Sie anschließend detaillierte Referenzen auf.

Wichtige Regeln

Beachten Sie diese Regeln in jedem OpenTUI-Code:

1. Verwenden Sie „create-tui“ für neue Projekte. Siehe REFERENCE.md Schnellstarts.
2. create-tui Optionen müssen vor den Argumenten stehen. bunx create-tui -t react my-app funktioniert, bunx create-tui my-app -t react funktioniert NICHT.
3. Rufen Sie „process.exit()“ niemals direkt auf. Verwenden Sie renderer.destroy() (siehe core/gotchas.md).
4. Die Textformatierung erfordert in React/Solid verschachtelte Tags. Verwenden Sie Modifikatorelemente, keine Props (siehe components/text-display.md).

So nutzen Sie diese Funktion

Referenz-Dateistruktur

Framework-Referenzen folgen einem 5-Dateien-Muster. Übergreifende Konzepte werden in einzelnen Dateien behandelt.

Jedes Framework in ./references// enthält:

Übergreifende Konzepte in ./references// haben REFERENCE.md als Einstiegspunkt.

Lesereihenfolge

1. Beginnen Sie mit REFERENCE.md mit dem von Ihnen gewählten Framework
2. Lesen Sie anschließend weitere Dateien, die für Ihre Aufgabe relevant sind:
   • Komponenten erstellen -> api.md + components/.md
   • Projekt einrichten -> configuration.md
   • Layout/Positionierung -> layout/REFERENCE.md
   • Tastatur-/Eingabeverarbeitung -> keyboard/REFERENCE.md
   • Animationen -> animation/REFERENCE.md
   • Fehlerbehebung -> gotchas.md + testing/REFERENCE.md

Beispielpfade

./references/react/REFERENCE.md           # Start here for React
./references/react/api.md              # React components and hooks
./references/solid/configuration.md    # Solid project setup
./references/components/inputs.md      # Input, Textarea, Select docs
./references/core/gotchas.md           # Core debugging tips

Hinweise zur Laufzeit

OpenTUI Läuft auf Bun und verwendet Zig für native Builds. Lesen Sie ./references/core/gotchas.md die Informationen zu den Laufzeitanforderungen und den Build-Anleitungen.

Schnellentscheidungsbäume

„Welches Framework soll ich verwenden?“

Which framework?
├─ I want full control, maximum performance, no framework overhead
│  └─ core/ (imperative API)
├─ I know React, want familiar component patterns
│  └─ react/ (React reconciler)
├─ I want fine-grained reactivity, optimal re-renders
│  └─ solid/ (Solid reconciler)
└─ I'm building a library/framework on top of OpenTUI
   └─ core/ (imperative API)

„Ich muss Inhalte anzeigen“

Display content?
├─ Plain or styled text -> components/text-display.md
├─ Container with borders/background -> components/containers.md
├─ Scrollable content area -> components/containers.md (scrollbox)
├─ ASCII art banner/title -> components/text-display.md (ascii-font)
├─ Data table with borders/wrapping -> components/code-diff.md (TextTable)
├─ Code with syntax highlighting -> components/code-diff.md
├─ Diff viewer (unified/split) -> components/code-diff.md
├─ Line numbers with diagnostics -> components/code-diff.md
└─ Markdown content (streaming) -> components/code-diff.md (markdown)

„Ich benötige Benutzereingaben“

User input?
├─ Single-line text field -> components/inputs.md (input)
├─ Multi-line text editor -> components/inputs.md (textarea)
├─ Select from a list (vertical) -> components/inputs.md (select)
├─ Tab-based selection (horizontal) -> components/inputs.md (tab-select)
└─ Custom keyboard shortcuts -> keyboard/REFERENCE.md

„Ich benötige Layout/Positionierung“

Layout?
├─ Flexbox-style layouts (row, column, wrap) -> layout/REFERENCE.md
├─ Absolute positioning -> layout/patterns.md
├─ Responsive to terminal size -> layout/patterns.md
├─ Centering content -> layout/patterns.md
└─ Complex nested layouts -> layout/patterns.md

„Ich brauche Animationen.“

Animations?
├─ Timeline-based animations -> animation/REFERENCE.md
├─ Easing functions -> animation/REFERENCE.md
├─ Property transitions -> animation/REFERENCE.md
└─ Looping animations -> animation/REFERENCE.md

„Ich muss Eingaben verarbeiten.“

Input handling?
├─ Keyboard events (keypress, release) -> keyboard/REFERENCE.md
├─ Focus management -> keyboard/REFERENCE.md
├─ Paste events -> keyboard/REFERENCE.md
├─ Mouse events -> components/containers.md
├─ Text selection & copy-on-select -> keyboard/REFERENCE.md (selection)
└─ Clipboard (OSC 52) -> keyboard/REFERENCE.md (clipboard)

„Ich muss meine TUI testen“

Testing?
├─ Snapshot testing -> testing/REFERENCE.md
├─ Interaction testing -> testing/REFERENCE.md
├─ Test renderer setup -> testing/REFERENCE.md
└─ Debugging tests -> testing/REFERENCE.md

„Ich muss Fehler beheben/Probleme lösen“

Troubleshooting?
├─ Runtime errors, crashes -> /gotchas.md
├─ Layout issues -> layout/REFERENCE.md + layout/patterns.md
├─ Input/focus issues -> keyboard/REFERENCE.md
└─ Repro + regression tests -> testing/REFERENCE.md

Index zur Fehlerbehebung

• Terminal bereinigen, Abstürze -> core/gotchas.md
• Textformatierung wird nicht übernommen -> components/text-display.md
• Eingabefokus/Tastenkombinationen -> keyboard/REFERENCE.md
• Layout-Fehler -> layout/REFERENCE.md
• Unzuverlässige Snapshots -> testing/REFERENCE.md

Informationen zu Unterschieden bei der Benennung von Komponenten und Textmodifikatoren finden Sie unter components/REFERENCE.md.

Produktindex

Frameworks

Querschnittskonzepte

Komponentenkategorien

Ressourcen

Repository : https://github.com/anomalyco/opentui Core-Dokumentation : https://github.com/anomalyco/ opentui /tree/main/packages/core/docs Beispiele : https://github.com/anomalyco/ opentui /tree/main/packages/core/src/examples Awesome-Liste : https://github.com/msmps/awesome- opentui