3个版本

0.1.2	2020年7月22日
0.1.1	2020年7月8日
0.1.0	2020年7月8日

#668 in WebAssembly

MIT/Apache

190KB
5.5K SLoC

Valerie

Rust前端框架，用于构建Web应用。

Valerie仍处于非常早期阶段。许多功能目前尚不可用。还有大量工作要做，欢迎尝试。

无虚拟DOM。
UI可以通过遵循MVVM架构而不是MVC架构以简单的方式进行构建。
使用状态变量更新所需位置的UI。
无任何不安全代码。

架构

每个UI元素都必须实现Component特质。
页面是一个返回Node的函数。
两种类型的状态变量
- StateAtomic用于实现Copy的类型。
- StateMutex用于实现Clone的类型。

设置

运行cargo new --lib some_name
将valerie添加到依赖项
创建一个static目录并在其中创建一个index.html文件

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <script type="module">
            import init from "./wasm.js"
            init()
        </script>
    </head>
    <body></body>
</html>

在Cargo.toml中启用lto。

[profile.release]
lto = true
opt-level = 3

使用wasm-pack编译它，运行以下命令：wasm-pack build --target web --out-name wasm --out-dir ./static
使用一些服务器，如miniserve，托管./static文件夹并尝试使用它。

有关更多选项，请参阅wasm-pack的文档。

示例

你好世界

use valerie::prelude::components::*;
use valerie::prelude::*;

fn ui() -> Node {
    h1!("Hello World").into()
}

#[valerie(start)]
pub fn run() {
    App::render_single(ui());
}

使用按钮添加和减一

use valerie::prelude::components::*;
use valerie::prelude::*;

fn ui() -> Node {
    let value = StateAtomic::new(0isize);

    div!(
        h1!("Value ", value.clone()),
        button!("Add 1")
            .on_event("click", value.clone(), move |x, _| {
                *x += 1;
            }),
        button!("Subtract 1")
            .on_event("click", value.clone(), move |x, _| {
                *x -= 1;
            })
    )
    .into()
}

#[valerie(start)]
pub fn run() {
    App::render_single(ui());
}

计时器

use valerie::prelude::components::*;
use valerie::prelude::*;
use wasm_timer::Delay;

fn ui() -> web_sys::Node {
    let timer = StateAtomic::new(0);

    execute(time(1, timer.clone()));

    p!("Seconds passed: ", timer).into()
}

async fn time(n: u64, mut timer: StateAtomic<usize>) {
    while Delay::new(core::time::Duration::from_secs(n))
        .await
        .is_ok() {
            timer += 1;
        }
}

#[valerie(start)]
pub fn run() {
    App::render_single(ui());
}

示例目录中有更多示例。

缺失的功能

CSS库支持。
使用状态进行CSS。
路由和多页面支持。
多页面的全局变量。

问题和贡献

挑选一些问题开始贡献。我们的贡献指南可在这里找到。

依赖

~8–10MB
~194K SLoC