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日

#31 in #md

MIT 许可证

115KB
674 行

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克隆，sauron可以编写无需或需要javascript即可工作的Web应用程序。

许可证：MIT

依赖关系

~5–11MB
~126K SLoC