88 个版本 (31 个破坏性更新)

0.61.8	2024年4月28日
0.60.7	2023年9月25日
0.58.0	2023年7月29日
0.51.0	2022年9月21日
0.33.0	2020年11月27日

#28 in #server-side-rendering

7,712 每月下载量
在 35 个crate中（5 直接）使用

MIT 许可

385KB
9K SLoC

sauron

Sauron 是一个灵活的网页框架和库，用于构建客户端和/或服务器端网页应用程序，重点在于人体工程学、简洁性和优雅性。这允许你尽可能少地编写代码，更多地关注业务逻辑而不是框架的内部细节。

Sauron 受 elm-lang 启发，并遵循 Elm 架构。

功能

服务器端渲染
静态网站生成
渐进式渲染
Web 组件/自定义元素
使用 HTML 语法编写视图
编写样式的优雅宏
内置所有功能

无多余框架复杂性

无需特定于框架的 CLI
无需特定于模板的语言，因为一切都是 Rust。
- 模型和更新函数全部在 Rust 中。
- 视图? 在 Rust 中
- 事件处理? Rust
- 样式? 信不信由你：Rust

在 Sauron 应用程序中，只有模型、视图和更新。模型是应用程序状态。视图描述了如何向用户展示模型。更新函数描述了如何更新模型，这使用包含更新模型所需数据的消息。

示例

在您的 src/lib.rs

use sauron::{
    html::text, html::units::px, jss, node, wasm_bindgen, Application, Cmd, Node, Program,
};

enum Msg {
    Increment,
    Decrement,
    Reset,
}

struct App {
    count: i32,
}

impl App {
    fn new() -> Self {
        App { count: 0 }
    }
}

impl Application for App {

    type MSG = Msg;

    fn view(&self) -> Node<Msg> {
        node! {
            <main>
                <input type="button"
                    value="+"
                    on_click=|_| {
                        Msg::Increment
                    }
                />
                <button class="count" on_click=|_|{Msg::Reset} >{text(self.count)}</button>
                <input type="button"
                    value="-"
                    on_click=|_| {
                        Msg::Decrement
                    }
                />
            </main>
        }
    }

    fn update(&mut self, msg: Msg) -> Cmd<Msg> {
        match msg {
            Msg::Increment => self.count += 1,
            Msg::Decrement => self.count -= 1,
            Msg::Reset => self.count = 0,
        }
        Cmd::none()
    }

    fn stylesheet() -> Vec<String> {
        vec![jss! {
            "body":{
                font_family: "verdana, arial, monospace",
            },

            "main":{
                width: px(30),
                height: px(100),
                margin: "auto",
                text_align: "center",
            },

            "input, .count":{
                font_size: px(40),
                padding: px(30),
                margin: px(30),
            }
        }]
    }
}

#[wasm_bindgen(start)]
pub fn start() {
    Program::mount_to_body(App::new());
}

index.html

<!doctype html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>Counter</title>
    <script type=module>
        import init from './pkg/counter.js';
        await init().catch(console.error);
    </script>
  </head>
  <body>
  </body>
</html>

在 Cargo.toml 中，指定 crate-type 为 cdylib

[package]
name = "counter"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
sauron = "0.61.0"

先决条件

cargo install wasm-pack
cargo install basic-http-server

使用

wasm-pack build --target web --release

使用

basic-http-server -a 0.0.0.0:4000

然后导航到 https://127.0.0.1:4000

请查看 getting-started.md 了解完整的教程。

有关构建和服务的命令的更多详细信息，请查看此仓库上的示例，每个示例都有如何构建和运行它们的脚本。

演示示例

todomvc todomvc 示例
data-viewer - 可调整大小的电子表格CSV数据查看器
svg-clock - 使用SVG和窗口滴答事件绘制的时钟。
ultron代码编辑器 - 具有语法高亮功能的基于Web的文本编辑器。
hackernews-sauron - 展示sauron特性的hackernews克隆，该特性允许编写可以在或没有JavaScript的情况下工作的Web应用程序。

许可证：MIT

依赖项

~2.8-6MB
~111K SLoC