[0.7] Attribute spreading and defaults

[ozpv]

I'm trying to figure out the best way to add default attributes to components and still have attribute spread compatibility.

The current way I'm doing it is like this:

/// The Icon component.
#[component]
pub fn Icon(
    /// The icon to render.
    #[prop(into)]
    icon: Signal<icondata_core::Icon>,
) -> impl IntoView {
    move || {
        let icon = icon.get();
        svg::svg()
            //  I want to set a default for style/merge the style from the spread
            .style(icon.style)
            .attr("x", icon.x)
            .attr("y", icon.y)
            // also the width and heights are another I want defaults for
            .attr("width", "1rem")
            .attr("height", "1rem")
            .attr("viewBox", icon.view_box)
            .attr("stroke-linecap", icon.stroke_linecap)
            .attr("stroke-linejoin", icon.stroke_linejoin)
            .attr("stroke-width", icon.stroke_width)
            .attr("stroke-linecap", icon.stroke_linecap)
            .attr("stroke", icon.stroke)
            .attr("fill", icon.fill.unwrap_or("currentColor"))
            .attr("role", "graphics-symbol")
            .inner_html(icon.data)
    }
}

I add the default attr into the component, and whenever I want to replace it, I do something like this:

<Icon icon={i::BiGraphql} {..} width="2em" height="2em" style="color: green" />

This works for CSR, however, this does not work when using SSR. My theory is the WASM recognizes there are duplicate attributes and replaces or merges them for us before rendering.

This is the response of the streamed HTML from SSR:

<svg width="1rem" height="1rem" viewBox="0 0 24 24" fill="currentColor" role="graphics-symbol" width="3rem" height="3rem">...</svg>

What ends up happening is my browser (firefox) truncates the duplicate attributes and I'm left with only the default ones at the beginning.
Like this:

<svg width="1rem" height="1rem" viewBox="0 0 24 24" fill="currentColor" role="graphics-symbol">...</svg>

I have some questions:

How should I go about setting default attrs when spreading, am I missing something?

Should I just use optional props instead?

Could functionality be added to where the spread will override certain attributes like width and height (i.e. ones where it wouldn't make sense to have duplicates anyway) and merge ones like style and class together?

[gbj]

This works for CSR, however, this does not work when using SSR. My theory is the WASM recognizes there are duplicate attributes and replaces or merges them for us before rendering.

When you set an attribute using CSR, it calls .setAttribute() on the DOM element. If you set the same attribute twice, this means that it first sets it to X, then to Y. (This is just how the DOM APIs work, so where you say "the WASM" what you mean is "the browser.")

When you set an attribute using SSR, it simply adds it to the list of attributes. This means width and height end up appearing twice, as you said. And then, as you note, you end up with the first instance of that attribute, not the last instance.

This means that calling setAttribute multiple times on a DOM element and setting an attribute multiple times in HTML have opposite behavior.

Should I just use optional props instead?

I think that's basically the answer to the question: spreading should be used to add additional attributes, not to try to overwrite existing attributes.

[ozpv]

okay, thanks!