Submillisecond LiveView

使用 lunatic 框架构建的 Submillisecond 网页框架的 LiveView 实现。

什么是 LiveView？

LiveView 通过服务器渲染的 HTML 提供丰富的实时用户体验。

LiveView 的编程模型是声明式的：不是“当事件 X 发生时，更改页面的 Y”，LiveView 中的事件是常规消息，可能导致其状态发生变化。一旦状态发生变化，LiveView 将重新渲染其 HTML 模板的相关部分，并将其推送到浏览器，浏览器以最有效的方式更新自己。这意味着开发者将 LiveView 模板编写为任何其他服务器渲染的 HTML，LiveView 负责跟踪更改并将相关差异发送到浏览器。

它由 Elixir 的 Phoenix 网页框架推广。

先决条件

需要 Lunatic 运行时，以及 wasm32-wasi 目标。

cargo install lunatic-runtime
rustup target add wasm32-wasi

还建议添加一个 .cargo/config.toml 文件，其中包含构建目标和运行者配置。

# .cargo/config.toml

[build]
target = "wasm32-wasi"

[target.wasm32-wasi]
runner = "lunatic"

代码示例

use serde::{Deserialize, Serialize};
use submillisecond::{router, static_router, Application};
use submillisecond_live_view::prelude::*;

fn main() -> std::io::Result<()> {
    Application::new(router! {
        "/" => Counter::handler("index.html", "#app")
        "/static" => static_router!("./static")
    })
    .serve("127.0.0.1:3000")
}

#[derive(Clone, Serialize, Deserialize)]
struct Counter {
    count: i32,
}

impl LiveView for Counter {
    type Events = (Increment, Decrement);

    fn mount(_uri: Uri, _socket: Option<&mut Socket>) -> Self {
        Counter { count: 0 }
    }

    fn render(&self) -> Rendered {
        html! {
            button @click=(Increment) { "Increment" }
            button @click=(Decrement) { "Decrement" }
            p { "Count is " (self.count) }
        }
    }
}

#[derive(Deserialize)]
struct Increment {}

impl LiveViewEvent<Increment> for Counter {
    fn handle(state: &mut Self, _event: Increment) {
        state.count += 1;
    }
}

#[derive(Deserialize)]
struct Decrement {}

impl LiveViewEvent<Decrement> for Counter {
    fn handle(state: &mut Self, _event: Decrement) {
        state.count -= 1;
    }
}

运行示例

克隆仓库

git clone [email protected]:lunatic-solutions/submillisecond-live-view.git
cd submillisecond-live-view

运行示例

cargo run --example clock

许可证

根据您的选择，受以下其中一项许可证的约束：

• Apache 许可证 2.0 版，(https://apache.ac.cn/licenses/LICENSE-2.0)
• MIT 许可证 (http://opensource.org/licenses/MIT)

。