yoga README

The project's README from github.com/react/yoga. As one markdown file: README.md.

Yoga npm Maven Central SPM

Yoga is an embeddable and performant flexbox layout engine with bindings for multiple languages.

Building

Yoga's main implementation targets C++ 20 with accompanying build logic in CMake. A wrapper is provided to build the main library and run unit tests.

./unit_tests <Debug|Release>

While not required, this script will use ninja if it is installed for faster builds.

Yoga is additionally part of the vcpkg collection of ports maintained by Microsoft and community contributors. If the version is out of date, please create an issue or pull request on the vcpkg repository.

Adding Tests

Many of Yoga's tests are automatically generated, using HTML fixtures describing node structure. These are rendered in Chrome to generate an expected layout result for the tree. New fixtures can be added to gentest/fixtures.

<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
  <div style="width: 50px; height: 50px;"></div>
</div>

To generate new tests from added fixtures:

  1. Ensure you have yarn classic installed.
  2. Run yarn install to install dependencies for the test generator.
  3. Run yarn gentest in the yoga directory.

Debugging

Yoga provides a VSCode "launch.json" configuration which allows debugging unit tests. Simply add your breakpoints, and run "Debug C++ Unit tests (lldb)" (or "Debug C++ Unit tests (vsdbg)" on Windows).

yoga (react/yoga)

Searching Database…

18.9K ·GitHub
Что это такое?Yoga — это встраиваемый высокопроизводительный движок раскладки flexbox, написанный на C++, который вычисляет деревья раскладки интерфейса и поставляется с привязками для нескольких языков.
Это самостоятельный фреймворк или то, что я встраиваю в свой стек интерфейса?Это библиотека или движок, а не приложение и не UI-фреймворк сам по себе: вы передаёте ему дерево узлов со свойствами flexbox, а он возвращает вычисленные позиции и размеры, которые затем отрисовывает ваш собственный слой визуализации.
Как его собрать или добавить в проект?Соберите ядро на C++ с помощью CMake (целевой стандарт C++20), используя прилагаемый скрипт-обёртку, который автоматически использует ninja, если он установлен, для более быстрой сборки; также библиотека распространяется через vcpkg и через пакеты для отдельных языков, например npm.
Что нужно установить перед сборкой?Набор инструментов с поддержкой C++20 и CMake для сборки ядра; если же вы хотите добавлять или перегенерировать тесты, нужны Yarn Classic и Chrome, так как фикстуры тестов отрисовываются в Chrome, чтобы получить эталонные результаты раскладки.
Если я возьму Yoga через vcpkg, гарантируется ли, что это актуальная версия?Нет, проект поддерживается сообществом: если версия в vcpkg устарела, вам нужно самостоятельно создать issue или pull request в репозитории vcpkg, а не в репозитории самой Yoga.
Для каких языков у Yoga есть привязки?Помимо ядра на C++20, инструменты сборки и CI охватывают Java/Kotlin (с рабочими процессами для релизов и снапшотов Android) и Swift, а также инструменты JavaScript/TypeScript для тестов и конвейер публикации релизов в npm.
Как создаются тесты раскладки Yoga?Большинство тестов генерируется автоматически из HTML-фикстур, размещённых в gentest/fixtures; команда 'yarn gentest' отрисовывает их в Chrome и превращает полученные раскладки в тестовые случаи.
Как отладить упавший модульный тест C++?Откройте проект в VSCode, поставьте точки останова и запустите конфигурацию 'Debug C++ Unit tests (lldb)' (или вариант 'vsdbg' в Windows) из прилагаемого launch.json.
Что, помимо основной библиотеки C++, получает на выходе проект Yoga?Рабочие процессы CI публикуют релизы и снапшоты для Android, а также релизы в npm, так что пользователи могут получить Yoga как исходники C++ через vcpkg, артефакт Java/Kotlin для Android или JS-пакет из npm.
Creator
react
Size
26.6 MB
Stars
18.9K
Age
12y
Commits · 90 Days