Stretch

Stretch是用Rust编写的Flexbox实现。Stretch的目标是为所有平台提供一个稳定的布局基础，特别关注移动平台。从长远来看，我们希望Stretch不仅支持flexbox，还支持许多其他布局算法，如网格布局。Stretch是为了https://visly.app而创建并为其提供动力的。

目标

在使用或为stretch做出贡献之前，了解项目的核心目标是很重要的。这些是我们正在努力实现的目标，而不仅仅是目前支持的功能。

• 高性能
• 跨平台
• 小的二进制文件大小
• 支持多个布局系统
• 多线程布局
• 为大多数常用语言提供语言绑定

支持的平台

• Rust
• Android
• iOS
• JavaScript / TypeScript

用法

Stretch是用Rust编写的，但提供了与多种语言和平台的绑定，因此您可以使用适合您项目的方式使用它。

Rust

# Cargo.toml

[dependencies]
stretch = "0.3.2"

// main.rs

use stretch::geometry::Size;
use stretch::style::*;

fn main() -> Result<(), stretch::Error> {
    let mut stretch = stretch::node::Stretch::new();
    
    let child = stretch.new_node(
        Style { size: Size { width: Dimension::Percent(0.5), height: Dimension::Auto }, ..Default::default() },
        vec![],
    )?;

    let node = stretch.new_node(
        Style {
            size: Size { width: Dimension::Points(100.0), height: Dimension::Points(100.0) },
            justify_content: JustifyContent::Center,
            ..Default::default()
        },
        vec![child],
    )?;

    stretch.compute_layout(node, Size::undefined())?;
    dbg!(stretch.layout(node)?);
}

Android

// Build.gradle

android {
    splits {
        abi {
            enable true
        }
    }
}

dependencies {
    implementation 'app.visly.stretch:stretch:0.3.2'
}

// MainActivity.kt

val node = Node(
  Style(size = Size(Dimension.Points(100f), Dimension.Points(100f)), justifyContent = JustifyContent.Center), 
  listOf(
    Node(Style(size = Size(Dimension.Percent(0.5f), Dimension.Percent(0.5f))), listOf())
  ))

val layout = node.computeLayout(Size(null, null))
Log.d(TAG, "width: ${layout.width}, height: ${layout.height}")

iOS

# Podfile

pod 'StretchKit', '~> 0.3.2'

// ViewController.swift
 
let node = Node(
  style: Style(size: Size(width: .points(100.0), height: .points(100.0)), justifyContent: .center), 
  children: [
    Node(style: Style(size: Size(width: .percent(0.5), height: .percent(0.5))), children: [])
  ])
  
let layout = node.computeLayout(thatFits: Size(width: nil, height: nil))
print("width: \(layout.width), height: \(layout.height)")

JavaScript

> npm install --save stretch-layout

// index.js

import { Allocator, Node, JustifyContent } from 'stretch-layout';

const allocator = new Allocator();
const node = new Node(allocator, {width: 100, height: 100, justifyContent: JustifyContent.Center});
node.addChild(new Node(allocator, {width: '50%', height: '50%'}));
const layout = node.computeLayout();

console.log(layout.width, layout.height);

贡献

我们非常欢迎贡献。虽然我们要求您在编写代码之前（在早期过程中）打开一个问题或拉取请求，这样我们可以在您开始实施它们之前讨论解决方案和添加功能。我们非常愿意在某些特定领域接收贡献。

• 减少二进制文件大小
• 运行时性能
• 确保构建/测试环境在非macOS平台上运行良好
• 替代布局系统（例如网格布局？）
• Web兼容性测试
• RTL支持
• 平台绑定
• API改进
• 文档和示例

安装

如果您还没有安装Rust，您必须首先安装它，以及安装一些我们使用的组件，用于格式化和检查代码库。有关Rust的更多信息，请参阅他们的网站。

curl https://sh.rustup.rs -sSf | sh
rustup component add rustfmt
rustup component add clippy

完成后，您可以克隆仓库并执行一些基本的检查，以确保一切正常工作。

git clone https://github.com/vislyhq/stretch.git
cd stretch
cargo test

如果您对API进行了任何更改，您还应该更新并运行位于/bindings/*中的所有平台绑定的测试。

测试

通过验证使用 stretch 编写的布局与 Chrome 中的表现相同来测试 stretch。这是通过在 HTML 中渲染等效布局，然后生成一个 Rust 测试用例来完成的，该测试用例断言当通过 stretch 运行时，结果布局相同。

您可以在不设置 webdriver 环境的情况下运行这些测试，但如果您想添加任何测试用例，您将需要安装chromedriver。如果您在 macOS 上开发，这通过 brew 很容易完成。

brew tap homebrew/cask
brew cask install chromedriver

一旦您安装了 chromedriver 并使其在 PATH 中可用，您可以通过运行 cargo run --package gentest 来重新生成所有测试。

要添加新的测试用例，请将另一个 HTML 文件添加到 /test_fixtures，按照当前测试作为新测试的模板。

基准测试

基准测试建立在与测试相同的架构之上，实际上基准测试是自动从测试固定值生成的，就像测试一样。运行 cargo bench 在本地运行基准测试。

与 Yoga 的关系

Yoga 是用 C 语言编写的跨平台 Flexbox 实现。Yoga 是一个出色的项目，但存在一些基本问题，我们希望解决这些问题。与 Yoga 相比，我们旨在更严格遵守网络标准，具有灵活的架构，最终支持多个布局算法，以及包括多线程布局在内的未来性能改进。除此之外，我们旨在使用更安全的语言和更现代的代码库。

许可

Copyright (c) 2018 Visly Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.