dioxus-hot-reload: Dioxus 热重载实用工具

网站 | 指南 | API 文档 | 聊天

概述

Dioxus 支持对 rsx 宏的静态部分进行热重载。这允许在不重新编译 Rust 代码的情况下更改应用程序的样式。这对于快速迭代应用程序的样式非常有用。

热重载可以更新以下更改，而无需重新编译

rsx! {
    div {
        "Count: {count}",
    }
}

=>

rsx! {
    div {
        color: "red",
        font_size: "2em",
        "Count: {count}",
    }
}

但它不能更新以下更改

rsx! {
    div {
        "Count: {count}",
    }
}

=>

rsx! {
    div {
        "Count: {count*2}",
        onclick: |_| println!("clicked"),
    }
}

用法

此 crate 实现了对非 WASM 的本地编译目标的 hot reloading。有关使用 Web 渲染器的热重载，请参阅 dioxus-cli 项目。

将此添加到任何支持热重载的渲染器的主函数顶部以启动热重载服务器

fn main(){
    hot_reload_init!();
    // launch your application
}

默认情况下，开发服务器会监视宏调用所在的 crate 的根目录，并忽略 /target 目录和根目录中任何设置在 .gitignore 文件中的目录中的更改。要监视自定义路径，请在对配置构建器调用 with_paths 函数

fn main(){
    hot_reload_init!(Config::new().with_paths(&["src", "examples", "assets"]));
    // launch your application
}

默认情况下，热重载服务器将在控制台输出一些日志，要禁用这些日志，请在对配置构建器调用 with_logging 函数

fn main(){
    hot_reload_init!(Config::new().with_logging(false));
    // launch your application
}

当逻辑更改时，可以使用配置构建器上的 with_rebuild_command 函数重新构建应用程序。当热重载失败时，此命令将被调用以快速更新 rsx

fn main(){
    hot_reload_init!(Config::new().with_rebuild_command("cargo run"));
    // launch your application
}

如果您使用的是 html 之外的空间名，您可以实现 HotReloadingContext 特性来提供您的元素/属性的 Rust 名称与结果字符串之间的映射。

然后，您可以将上下文提供给构建器，以使热重载与您的自定义空间协同工作

fn main(){
    // Note: Use default instead of new if you are using a custom namespace
    hot_reload_init!(Config::<MyContext>::default());
    // launch your application
}

为自定义渲染器实现热重载

为了将热重载支持添加到您的自定义渲染器中，您可以使用connect函数。这将连接到您刚刚启动的开发服务器，您只需要提供一种将Template传输到VirtualDom的方法。一旦实现此功能，您的用户就可以像使用任何其他渲染器一样使用hot_reload_init函数。

async fn launch(app: Component) {
    let mut vdom = VirtualDom::new(app);
    // ...

    let (tx, mut rx) = tokio::sync::mpsc::unbounded_channel();
    dioxus_hot_reload::connect(move |msg| {
        let _ = tx.send(msg);
    });

    loop {
        tokio::select! {
            Some(msg) = rx.recv() => {
                match msg{
                    HotReloadMsg::Shutdown => {
                        // ... shutdown the application
                    }
                    HotReloadMsg::UpdateTemplate(template) => {
                        // update the template in the virtual dom
                        vdom.replace_template(template);
                    }
                }
            }
            _ = vdom.wait_for_work() => {
                // ...
            }
        }
        let mutations = vdom.render_immediate();
        // apply the mutations to the dom
    }
}

贡献

• 在我们的问题追踪器上报告问题。
• 加入discord并提问！

许可证

本项目采用MIT许可证。

除非您明确声明，否则您提交给Dioxus的任何有意贡献都应按照MIT许可证授权，不附加任何额外条款或条件。