1个不稳定版本

0.3.0	2024年2月7日

#1579 in 进程宏

用于 htmx-components

MIT 许可证

14KB
208 行

rust-htmx-components

这是一个POC库，它提供了一些JavaScript增强的HTMX组件，您可以用很少的JavaScript来构建具有常见功能（如过渡、模态和通知）的酷炫Web应用。

试一试，并告诉我们您的体验！

https://github.com/tapegram/rust-htmx-components/assets/1281274/43422f70-11a5-4b37-8854-10372db98046

摘要

此库提供了一组基于RSCX的Rust组件，这些组件的行为由htmx-glue提供，因此您可以几乎纯用Rust来实现HTMX！

组件已预先用Tailwind样式。

用法

查看examples/playground中的简单示例应用程序，其中包括一个可以测试组件的playground页面。

大部分的“魔法”都在html_layout

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{props.head_title}</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <script>{
            "window.YcControls = {
                attachOnReadyQueue: [],
                attach: function(element) {
                    this.attachOnReadyQueue.push(element);
                },
                onReadyQueue: [],
                onReady: function(onReadyHandler) {
                    this.onReadyQueue.push(onReadyHandler);
                },
            };"
        }</script>
        {props.head_links}
        {props.head_scripts}
    </head>
    <body>
        {props.children}
        <script src="https://unpkg.com/htmx-glue/out/common.js"></script>
    </body>
</html>

我们通过CDN包含Tailwind。这绝对不是理想的选择，我们将在不久的将来带来更好的解决方案！

接下来，我们将从htmx-glue连接JS（库中的实际JS在下面的脚本标签中）。我们将初始化并附加我们的YcControls到窗口，以启动这里的所有htmx-glue控件！

为了使用此功能，请查看examples/playground中的page_layout。

<HtmlLayout
    head_scripts={
        html! {
            // Use unminified source for debugging.
            // <script src="https://unpkg.com/[email protected]/dist/htmx.js"></script>
            <script
                src="https://unpkg.com/[email protected]"
                integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
                crossorigin="anonymous"
            ></script>
            <script src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>
            <script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
            <script>{
                r#"
                htmx.on("htmx:sendError", function() {
                    YcControls.showErrorNotification("Network Error!");
                });                

                htmx.on("htmx:responseError", function(error) {
                    YcControls.showErrorNotification(
                        error.detail.xhr.responseText || "Unknown error"
                    );
                });

                document.addEventListener("htmx:confirm", function(e) {
                    if (!e.target.hasAttribute("hx-confirm")) return true;            
                    e.preventDefault();
                    YcControls.confirm({
                        title: e.target.getAttribute("hx-confirm"),
                        message: e.target.dataset.confirmMessage,
                        actionConfirmed: function() {
                            e.detail.issueRequest(true);
                        }
                    });
                });
                "#
            }</script>
        }
    }
>
    <AppShell header=props.header>
        <main hx-ext="loading-states">
            {props.children}
        </main>
    </AppShell>
    <ModalProxy />
    <div hx-history-elt>
        <NotificationLiveRegion />
        <ModalLiveRegion />
    </div>
</HtmlLayout>

这是我们添加HTMX并进行一些最终连接的地方。包括将htmx错误事件连接起来，以便我们可以将它们显示为通知，并为这些组件提供通知和模态实时区域，以便它们可以正常工作。

待办事项/免责声明

目前，我们正在使用CDN上的Tailwind，这在生产环境中被强烈反对。所以请期待更好的解决方案！

致谢

此库直接源自Paul Bouzakis在我们合作的一个项目中做的工作，我们在该项目中正在尝试用htmx和rust构建一个Web应用。

我所做的一切只是将组件提取出来，形成可重用的库，以便我们可以共享它们。

依赖项

~310–770KB
~18K SLoC