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 布局树,并提供多种语言的绑定。
它是独立的框架,还是我要嵌入自己 UI 技术栈里的东西?它是一个库或引擎,本身不是应用,也不是 UI 框架。你把带有 flexbox 属性的节点树交给它,它返回计算好的位置和尺寸,再由你自己的渲染层进行绘制。
我怎么构建它,或把它加入项目?使用提供的封装脚本,用 CMake(目标标准为 C++20)构建 C++ 核心;如果已安装 ninja,脚本会自动使用它以加快构建速度。它也通过 vcpkg 分发,并以 npm 等语言专用包的形式提供。
构建前需要安装什么?核心构建需要支持 C++20 的工具链和 CMake。如果你还想添加或重新生成测试,需要安装 Yarn Classic 和 Chrome,因为测试用例会在 Chrome 中渲染,以生成预期的布局结果。
如果我通过 vcpkg 获取 Yoga,能保证它是最新版本吗?不能。它由社区维护:如果 vcpkg 中的版本过时,你需要自己到 vcpkg 仓库提交 issue 或 pull request,而不是去 Yoga 自己的仓库。
Yoga 实际提供了哪些语言的绑定?除 C++20 核心外,构建工具和 CI 还覆盖 Java/Kotlin(包括 Android 发布版和快照版的发布流程)以及 Swift,另外还有用于测试的 JavaScript/TypeScript 工具和 npm 发布流水线。
Yoga 的布局测试是怎么创建的?大多数测试都是从放在 gentest/fixtures 中的 HTML 用例自动生成的。运行 'yarn gentest' 会在 Chrome 中渲染这些用例,并把生成的布局转换为测试用例。
如何调试失败的 C++ 单元测试?在 VSCode 中打开项目,设置断点,然后从提供的 launch.json 启动 'Debug C++ Unit tests (lldb)' 配置。在 Windows 上也可以选用 'vsdbg' 变体。
除了 C++ 核心库,Yoga 的输出还会去哪里?CI 工作流会发布 Android 发布版和快照版以及 npm 包。因此使用者可以通过 vcpkg 获取 Yoga 的 C++ 源码,通过 Java/Kotlin 制品获取 Android 版本,或从 npm 获取 JS 包。
Creator
react
Size
26.6 MB
Stars
18.9K
Age
12y
Commits · 90 Days