118 个版本 (50 个重大更改)

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.10.0	2019年7月25日

#122 in 网页编程

每月8,075次下载
用于 31 个库（直接使用9个）

MIT 许可证

475KB
9K SLoC

sauron

Sauron 是一个多功能的网页框架和库，用于以强大的关注用户体验、简洁和优雅的方式构建客户端和/或服务器端网页应用程序。这使得您可以编写尽可能少的代码，并更多地关注业务逻辑而不是框架的内部细节。

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

特性

服务器端渲染
静态网站生成
渐进式渲染
网页组件/自定义元素
使用 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–4.5MB
~78K SLoC