How could be dynamic attributes for dynamic styling?

[yuniruyuni]

Hello. Could you please tell me if you have the idea for good dynamic style separation 🙇

More detailed, I want to do the following:

What is aiming?

• Defining a new Button component.
• The component takes two parameters: Kind/Size.
• Each property changes the Button's style.

What is I wanted to do?

• I want to split style concerns into sub-methods or variables.
• I want to make just "attributes"(NOT component) on methods,
• and melt it into a single button component.

Dummy code:

Following is my ideal image for this.

use dioxus::prelude::*;

#[derive(Copy,Clone)]
pub enum Kind {
    Primary,
    Secondary,
}

impl Kind {
    // define styles(attributes) for each Kind.
    fn style<'a>(self) -> Attributes<'a> {
        match self {
            // Any better way? Ideally, I want to use kind of `rsx!` for generating this
            Primary => Some(
                &[
                    dioxus::core::Attribute { namespace: None, name: "color", value: "white", is_static: false, is_volatile: false },
                    dioxus::core::Attribute { namespace: None, name: "background-color", value: "#3F7CB9", is_static: false, is_volatile: false },
                ],
            ),
            Secondary => Some(
                &[
                    dioxus::core::Attribute { namespace: None, name: "color", value: "#333", is_static: false, is_volatile: false },
                    dioxus::core::Attribute { namespace: None, name: "background-color", value: "transparent", is_static: false, is_volatile: false },
                    dioxus::core::Attribute { namespace: None, name: "box-shadow", value: "rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset", is_static: false, is_volatile: false },
                ],
            ),
        }
    }
}

#[derive(Copy,Clone)]
pub enum Size {
    Small,
    Medium,
    Large,
}

impl Size {
    // As same as Kind, it defines style for each Size.
    fn style<'a>(self) -> Attributes<'a> {
        match self {
            Small => Some(
                &[
                    dioxus::core::Attribute { namespace: None, name: "font-size", value: "12px", is_static: false, is_volatile: false },
                    dioxus::core::Attribute { namespace: None, name: "padding", value: "10px 16px", is_static: false, is_volatile: false },
                ],
            ),
            Medium => Some(
                &[
                    dioxus::core::Attribute { namespace: None, name: "font-size", value: "14px", is_static: false, is_volatile: false },
                    dioxus::core::Attribute { namespace: None, name: "padding", value: "11px 20px", is_static: false, is_volatile: false },
                ],
            ),
            Large => Some(
                &[
                    dioxus::core::Attribute { namespace: None, name: "font-size", value: "12px", is_static: false, is_volatile: false },
                    dioxus::core::Attribute { namespace: None, name: "padding", value: "12px 24px", is_static: false, is_volatile: false },
                ],
            ),
        }
    }
}

#[derive(Props)]
pub struct ButtonProps {
    kind: Kind,
    size: Size,
}

pub fn Button(cx: Scope<ButtonProps>) -> Element {
    rsx!{
        cx,
        button {
            display: "inline-block",
            font_family: "Nunito Sans, Helvetica Neue, Helvetica, Arial, sans-serif",
            font_weight: "700",
            line_height: "1",
            border: "0",
            border_radius: "3em",
            cursor: "pointer",

            // Currently, it's not work...
            ..cx.props.kind.style(),
            ..cx.props.size.style(),
        },
    }
}

But it's not working. How could I do? What is the best practice in dioxus?

[mrxiaozhuox]

I have copy the dioxus-document demo and try to run it. but there also have error.

[yuniruyuni]

I've noticed there are two kind of problems related with this.

1. elements doesn't implement .. property.

In components implementation, we have .. token parsing on this line:

dioxus/packages/core-macro/src/rsx/component.rs

Lines 52 to 54 in 6771ead

	if content.peek(Token![..]) {
	content.parse::<Token![..]>()?;
	manual_props = Some(content.parse::<Expr>()?);

But elements doesn't have this feature:

dioxus/packages/core-macro/src/rsx/element.rs

Line 23 in 6771ead

fn parse(stream: ParseStream) -> Result<Self> {

2. components's .. parsing cannot handle two .. attributes.

It can handle just single expression for this:

dioxus/packages/core-macro/src/rsx/component.rs

Line 54 in 6771ead

manual_props = Some(content.parse::<Expr>()?);

so what I need is maybe

1. implement .. in elements
2. implement the support for over two .. in components/elements.

[jkelleyrtp]

Good to know that multiple .. support is required. How would precedence work? Does normal rust allow for the spread operator? I'm not sure if we can merge two anonymous structs like that.

[yuniruyuni]

I don't have detailed knowledge about rust language spec, but normally rust can .. like spread operator just for same struct and so double items are not allowed. (if there are two items, it could overwrite all fields by the second item...)
You can see this behavior in this sample: https://play.rust-lang.org/?version=stable&mode=debug&edition=2021&gist=8537fb441b5773a8059d2a91dd114496
(The spread operator like is called struct update syntax in rust spec.)

Actually, this kind of syntax is now proposed in RFC but currently, there are some unresolved problems around type-inferences: http://rust-lang.github.io/rfcs/2528-type-changing-struct-update-syntax.html

So if you implement it, it's just rsx!'s special behavior. mmm... it's not acceptable?

[yuniruyuni]

From official discord, @jkelleyrtp says:

so it will ok on ver 0.1.8.