7 个版本

0.50.6	2022 年 8 月 19 日
0.50.5	2022 年 7 月 28 日

#152 in #dom

1,330 每月下载量

MIT 许可证

18KB
260 行

sauron

Sauron 是一个灵活的网页框架和库，用于构建客户端和/或服务器端网页应用程序，强调简洁性。它适合开发使用渐进式渲染的网页应用程序。

反例

在你的 src/lib.rs

use sauron::prelude::*;

#[derive(Debug)]
enum Msg {
    Click,
}

struct App {
    click_count: u32,
}

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

impl Application<Msg> for App {
    fn view(&self) -> Node<Msg> {
        node! {
            <main>
                <h1>"Minimal example"</h1>
                <div class="some-class" id="some-id" {attr("data-id", 1)}>
                    <input class="client"
                            type="button"
                            value="Click me!"
                            key=1
                            on_click={|_| {
                                log::trace!("Button is clicked");
                                Msg::Click
                            }}
                    />
                    <div>{text(format!("Clicked: {}", self.click_count))}</div>
                    <input type="text" value={self.click_count}/>
                </div>
            </main>
        }
    }

    fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
        log::trace!("App is updating with msg: {:?}", msg);
        match msg {
            Msg::Click => self.click_count += 1,
        }
        Cmd::none()
    }
}

#[wasm_bindgen(start)]
pub fn main() {
    console_log::init_with_level(log::Level::Trace).unwrap();
    console_error_panic_hook::set_once();
    Program::mount_to_body(App::new());
}

index.html

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>Counter</title>
    <style type="text/css">
        body { font-family: verdana, arial, monospace; }
        main {
            width:30px;
            height: 100px;
            margin:auto;
            text-align: center;
        }
        input, .count{
            font-size: 40px;
            padding: 30px;
        }
    </style>
    <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 = "2018"

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

[dependencies]
sauron = "0.50.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 一起使用

许可证: MIT

依赖项

~3.5MB
~75K SLoC