16个版本 (8个重大更新)

0.40.0	2021年8月15日
0.38.0	2021年8月9日
0.34.0	2021年1月15日
0.33.0	2020年11月27日
0.1.4	2020年7月21日

#2619 在解析器实现

每月30次 下载
在 2 crates 中使用

MIT 许可证

395KB
9K SLoC

sauron

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

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类型为 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 代码编辑器 - 一个基于网页的文本编辑器，具有语法高亮功能
hackernews-sauron - 一个 Hackernews 的克隆版本，展示了 sauron 功能，能够编写可以与或无需 JavaScript 运行的网络应用程序。

许可协议：MIT

依赖项

~3–10MB
~95K SLoC