opentui

OpenTUI Навыки работы с платформой

Комплексные навыки по созданию пользовательских интерфейсов терминалов с помощью OpenTUI. Воспользуйтесь приведенными ниже схемами принятия решений, чтобы выбрать подходящий фреймворк и компоненты, а затем ознакомьтесь с подробными справочными материалами.

Важные правила

Соблюдайте следующие правила во всем коде, написанном на OpenTUI:

1. Используйте create-tui для новых проектов. См. руководства по быстрому запуску фреймворка REFERENCE.md «Быстрый старт».
2. create-tui Параметры должны предшествовать аргументам. bunx create-tui -t react my-app работает, bunx create-tui my-app -t react не работает.
3. Никогда не вызывайте process.exit() напрямую. Используйте renderer.destroy() (см. core/gotchas.md).
4. Для форматирования текста в React/Solid требуются вложенные теги. Используйте элементы-модификаторы, а не пропсы (см. components/text-display.md).

Как использовать этот навык

Структура справочных файлов

Справочные материалы по фреймворкам следуют шаблону из 5 файлов. Общие концепции представлены в виде руководств, занимающих один файл.

Каждый фреймворк в ./references// содержит:

Межотраслевые концепции в ./references// имеют REFERENCE.md в качестве отправной точки.

Порядок чтения

1. Начните с REFERENCE.md с выбранной вами структуры
2. Затем ознакомьтесь с дополнительными файлами, имеющими отношение к вашей задаче:
   • Создание компонентов -> api.md + components/.md
   • Настройка проекта -> configuration.md
   • Макет/расположение -> layout/REFERENCE.md
   • Обработка клавиатуры/ввода -> keyboard/REFERENCE.md
   • Анимации -> animation/REFERENCE.md
   • Устранение неполадок -> gotchas.md + testing/REFERENCE.md

Примеры путей

./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

Примечания по выполнению

OpenTUI Работает на Bun и использует Zig для нативных сборок. Ознакомьтесь ./references/core/gotchas.md требования к среде выполнения и рекомендации по сборке.

Схемы быстрого принятия решений

«Какой фреймворк мне использовать?»

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)

«Мне нужно отобразить контент»

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)

«Мне нужен ввод данных пользователем»

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

«Мне нужна верстка/позиционирование»

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

«Мне нужны анимации»

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

«Мне нужно обрабатывать ввод данных»

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)

«Мне нужно протестировать мой TUI»

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

«Мне нужно отлаживать/устранять неполадки»

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

Указатель по устранению неполадок

• Очистка терминала, сбои -> core/gotchas.md
• Не применяется стиль текста -> components/text-display.md
• Фокус ввода/горячие клавиши -> keyboard/REFERENCE.md
• Сбой выравнивания макета -> layout/REFERENCE.md
• Нестабильные снимки экрана -> testing/REFERENCE.md

Различия в именовании компонентов и модификаторы текста см. components/REFERENCE.md.

Указатель продуктов

Фреймворки

Общие концепции

Категории компонентов

Ресурсы

Репозиторий : https://github.com/anomalyco/opentui Документация по ядру : https://github.com/anomalyco/ opentui /tree/main/packages/core/docs Примеры : https://github.com/anomalyco/ opentui /tree/main/packages/core/src/examples Список «Awesome »: https://github.com/msmps/awesome- opentui