Better styling for router related components

[Threated]

Made a few changes to IntoAttribute to make it usable as Box<dyn IntoAttribute> to support styling similar to native tags.

Before the <A> tag took a MaybeSignal<String> so you needed to do:

view!{cx,
  <A href="home" class="my-class".to_string()>
  <A href="home" class=Signal::derive(cx, move || "my-class".to_string())>
}

Now you can do:

view!{cx,
  <A href="home" class="my-class">
  <A href="home" class=move || "my-class">
}

And it also works for Form, ActionForm and MultiActionForm

I tried really hard to implement this using generics, but it does not seem possible. The type of the generic parameter needs to be inferred even if its value is None because it needs to know what Option::<T>::None it is.

[gbj]

Oh I like this a lot. I should probably do the same thing for class, properties, and views.

I think we should export a type alias for this to make it easier to use. Something like AttributeValue? Do you have thoughts on naming?

[Threated]

AttributeValue sounds good to me. Where should we I put the alias? In leptos/src/lib.rs to the children type aliases?

[Threated]

Ouh I have something to make it even better!

[Threated]

Btw is it intended that I have to say class=class and can't just say class in the attributes?
If i do <h1 class></h1> the macro will resolve to .attr("class",(cx, "") instead of .attr("class", (cx, class)).

[Threated]

You have to love Rust for this conversion trait magic 🪄
I implemented IntoAttribute for (Scope, Option<AttributeValue>) and (Scope, AttributeValue) so they can work directly in the view Macro.

This works now:

#[component]
pub fn MyHeading(
  cx: Scope,
  text: String,
  #[prop(optional, into)]
  class: Option<AttributeValue>
) -> impl IntoView {
  view!{
    cx,
    <h1 class=class>{text}</h1>
  }
}

[gbj]

Btw is it intended that I have to say class=class and can't just say class in the attributes?

If i do <h1 class></h1> the macro will resolve to .attr("class",(cx, "") instead of .attr("class", (cx, class)).

On this particular point, this is just to maintain compatibility with the way Boolean attributes work in HTML.

<button disabled> in HTML is the same as <button disabled="">

I may add a shorthand syntax in the view macro like <button {disabled}> to expand to <button disabled=disabled> in the future, but not sure if that's a good idea yet.

[gbj]

AttributeValue sounds good to me. Where should we I put the alias? In leptos/src/lib.rs to the children type aliases?

Yeah that's what I was thinking.

[Threated]

On this particular point, this is just to maintain compatibility with the way Boolean attributes work in HTML.

Ah I see that makes sense.

I may add a shorthand syntax in the view macro like <button {disabled}> to expand to <button disabled=disabled> in the future, but not sure if that's a good idea yet.

Yeah thats debatable. I was just a bit confused as I expected it to work because the syntax works for custom components.

[Threated]

Should I change anything or is this ready to merge?

[gbj]

Nope looks good! Merging now.