rust ui syntax alternative

[Areopagitics]

Leptos framework also includes a fully rust based builder syntax. I can't say I'm a huge fan, but it's a step in the right direction, but something really sleek and minimal (between Leptos and the new xilem-web) in rust would be really handy and better for LSP.

leptos example

div().child((
        button().on(ev::click, clear).child("Clear"),
        button().on(ev::click, decrement).child("-1"),
        span().child(("Value: ", value, "!")),
        button().on(ev::click, increment).child("+1")
    ))

xilem-web example

el::li((
        el::div((
            checkbox,
            el::label(todo.title.clone())
                .on_dblclick(|state: &mut Todo, _| TodoAction::SetEditing(state.id)),
            el::button(())
                .class("destroy")
                .on_click(|state: &mut Todo, _| TodoAction::Destroy(state.id)),
        ))
        .class("view"),
        el::input(())
            .attr("value", todo.title_editing.clone())
            .class("edit")
            .on_keydown(|state: &mut Todo, evt| {
                let key = evt.key();
                if key == "Enter" {
                    state.save_editing();
                    Some(TodoAction::CommitEdit)
                } else if key == "Escape" {
                    Some(TodoAction::CancelEditing)
                } else {
                    None
                }
            })
            .on_input(|state: &mut Todo, evt| {
                // TODO There could/should be further checks, if this is indeed the right event (same DOM element)
                if let Some(element) = evt
                    .target()
                    .and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok())
                {
                    evt.prevent_default();
                    state.title_editing = element.value();
                }
            })
            .passive(true)
            .on_blur(|_, _| TodoAction::CancelEditing),
    ))
    .class(todo.completed.then_some("completed"))
    .class(editing.then_some("editing"))

[Areopagitics]

ok, just saw that it's mentioned in #5024 as planned for 0.8, but maybe this can stay open unless there is another place where its already being discussed

[wheregmis]

I was exploring it #5181 on this one, but the more i went through it, i started admiring RSX

[Areopagitics]

great! is there an official place where it is being explored for 0.8? if there is maybe we can close this

[wheregmis]

great! is there an official place where it is being explored for 0.8? if there is maybe we can close this

Not i am aware of except for that PR

[Areopagitics]

what do you think of gpui's builder? so far, this one looks the cleanest:

        div()
            .flex()
            .flex_col()
            .gap_3()
            .bg(rgb(0x505050))
            .size(px(500.0))
            .justify_center()
            .items_center()
            .shadow_lg()
            .border_1()
            .border_color(rgb(0x0000ff))
            .text_xl()
            .text_color(rgb(0xffffff))
            .child(format!("Hello, {}!", &self.text))
            .child(
                div()
                    .flex()
                    .gap_2()
                    .child(div().size_8().bg(gpui::red()))
                    .child(div().size_8().bg(gpui::green()))
                    .child(div().size_8().bg(gpui::blue()))
                    .child(div().size_8().bg(gpui::yellow()))
                    .child(div().size_8().bg(gpui::black()))
                    .child(div().size_8().bg(gpui::white())),
            )