#web-framework #dom #html #web #front-end #wasm

hirola

Hirola 是一个无意见的网页框架,专注于简洁和可预测性

14 个不稳定版本 (3 个重大更改)

0.4.0 2023 年 12 月 28 日
0.3.1 2023 年 8 月 31 日
0.3.0-alpha.02023 年 7 月 19 日
0.2.0 2022 年 10 月 1 日
0.1.3-alpha.02020 年 12 月 30 日

#1809 in 网页编程

Download history 1/week @ 2024-03-08 3/week @ 2024-03-15 56/week @ 2024-03-29 15/week @ 2024-04-05 1/week @ 2024-05-17

每月 76 次下载
用于 edita

MIT/Apache

81KB
1.5K SLoC

Hirola

Latest Version Browser Tests Unit Tests MIT licensed

Hirola 是一个关注简洁和响应性的声明式前端框架。

目标

  1. KISS: 使用 Rust 以简单和声明式的方式构建前端 UI。
  2. 使其易于阅读、扩展和共享代码。
  3. 提供细粒度的响应性信号。
  4. 熟悉性:使用与 jsx 非常相似的 rsx。

示例

我们将创建一个简单的计数器程序。

cargo new counter

使用新项目,我们需要创建一个索引文件,它是入口点并由 trunk 需要

cd counter

在 counter 的根目录下创建一个 index.html。添加以下内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hirola Counter</title>
  </head>
  <body></body>
</html>

让我们向 src/main.rs 中添加一些代码

use hirola::prelude::*;
use hirola::dom::*;

fn counter() -> Dom {
    let count = Mutable::new(0i32);
    let decrement = count.callback(|s| *s.lock_mut() -= 1);
    let increment = count.callback(|s| *s.lock_mut() += 1);
    html! {
        <>
            <button on:click=decrement>"-"</button>
            <span>{count}</span>
            <button on:click=increment>"+"</button>
        </>
    }
}
fn main() {
    hirola::dom::mount(counter()).unwrap();
}

现在让我们运行我们的项目

trunk serve

生态系统

查看使用 Hirola 编写的 Hirola 文档

这里有一些 Hirola 的扩展

  1. 表单
  2. 路由器
  3. 状态
  4. Markdown

里程碑

状态 目标 标签
使用 Rust 和 rsx 的基本模板 准备就绪
使用混入扩展功能 准备就绪
组件 准备就绪
SSR 准备就绪
信号 准备就绪
🚧 表单管理 开始
Markdown 模板 待定
🚧 样式 开始
SSG 待定

依赖关系

~1.7–4.5MB
~90K SLoC