Constructing HTML attributes dynamically with a builder syntax

[povilasb]

I'm trying to do exactly what this example is saying with leptos = 0.8.2:

// This also has the benefit of being more flexible: because these are all plain Rust functions and methods, it’s easier to use them in things like iterator adapters without any additional “magic”:

// take some set of attribute names and values
let attrs: Vec<(&str, AttributeValue)> = todo!();
// you can use the builder syntax to “spread” these onto the
// element in a way that’s not possible with the view macro
let p = attrs
    .into_iter()
    .fold(p(), |el, (name, value)| el.attr(name, value));

But since .attr() changes the output type, I can't use it with .fold():

use leptos::prelude::*;
use leptos::html;

fn build_element(classes: &Vec<String>) -> impl IntoView {
    classes
        .iter()
        .fold(html::p(), |elem, cls| elem.attr("class", cls))
        .into_view()
}

error[E0308]: mismatched types
   --> src/main.rs
    |
153 |         .fold(html::p(), |elem, cls| elem.attr("class", cls))
    |                                      ^^^^^^^^^^^^^^^^^^^^^^^ expected `HtmlElement<P, (), ()>`, found `HtmlElement<P, (...,), ...>`
    |
    = note: expected struct `leptos::html::HtmlElement<_, (), _>`
               found struct `leptos::html::HtmlElement<_, (CustomAttr<&str, &std::string::String>,), _>`

Any ways to append attributes to an HtmlElement without changing the At type variable?

For the reference, I'm trying to port leptos-markdown to the latest leptos version.

[gbj]

I am not sure who maintains that fork/translation of the book or where it diverged from main, but it's not the current version of that page.

If I were writing your build_element function, here's how I'd do it:

fn build_element(classes: &Vec<String>) -> impl IntoView {
    let class = classes.join(" ");
    html::p().class(class)
}

(Note that your example would compile but not work as expected in previous versions, so not compiling is probably an improvement — repeatedly setting the class attribute, or any attribute, will overwrite it with the last value.)

[povilasb]

Appreciate the prompt answer 🙇

I guess that's an overly simplified example.
Here's the code that used to work with leptos = 0.6 I am trying to migrate to 0.8:

   fn el_with_attributes(
        self,
        e: HtmlElement,
        inside: Self::View,
        attributes: ElementAttributes<Callback<MouseEvent>>,
    ) -> Self::View {
        let mut r: leptos::HtmlElement<AnyElement> = match e {
            HtmlElement::Div => html::div().into_any(),
            HtmlElement::Span => html::span().into_any(),
            HtmlElement::Paragraph => html::p().into_any(),
            ...
        };

        r = r.child(inside);
        if let Some(s) = attributes.style {
            r = r.attr("style", s.to_string())
        }
        if let Some(c) = attributes.on_click {
            r = r.on(ev::click, move |e| Callable::call(&c, e));
        }
        r = r.classes(attributes.classes.join(" "));
        r.into_view()
    }

Which is conditionally applying r.attr(), r.on(), etc.
And those methods change the HtmlElement type variables in leptos >= 0.8, thus something like that is not possible as it is.

Is there any other interface that would act as AnyHtmlElement?

[gbj]

Sure, you can implement a function like this -- it's mostly just that some of the builder patterns have changed to accommodate the type system, so the changes here have been relatively bigger than in typical code. But here's a version of the function above that compiles

fn el_with_attributes(
    e: HtmlElement,
    inside: AnyView,
    attributes: ElementAttributes<Callback<MouseEvent>>,
) -> AnyView {
    use leptos::ev::{click, on};
    use leptos::tachys::html::class::class;
    use leptos::tachys::html::style::style;

    let r: AnyView = match e {
        HtmlElement::Div => html::div().child(inside).into_any(),
        HtmlElement::Span => html::span().child(inside).into_any(),
        HtmlElement::Paragraph => html::p().child(inside).into_any(),
    };

    let classes = (!attributes.classes.is_empty()).then(|| attributes.classes.join(" "));

    let r = r
        .add_any_attr(style(attributes.style))
        .add_any_attr(class(classes))
        .into_any();
    if let Some(c) = attributes.on_click {
        r.add_any_attr(on(click, move |e| c.run(e))).into_any()
    } else {
        r
    }
}

[povilasb]

m, I see: impl AddAnyAttr for AnyView { - thank you a bunch 🙌