4 个版本

0.1.4	2020年7月21日
0.1.3	2020年7月16日
0.1.2	2020年7月10日
0.1.1	2020年6月16日

#28 in #server-side-rendering

MIT 许可协议

115KB
590 行

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 类型为 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 - 一个展示sauron特性的hackernews克隆版本，该特性允许编写可以与或无需javascript一起工作的Web应用程序。

许可证：MIT

依赖项

~4–10MB
~103K SLoC