What are the code styling conventions for rsx code?

[danieldaquino]

Good evening!

I noticed that native HTML elements tend to use lowercase for HTML tag names, and lowercase with no separators for attribute names.

Example from this documentation page:

rsx! {
    div { class: "bg-red-100",
        button {
            onclick: move |_| info!("Clicked"),
            "Click me!"
        }
    }
}

However, components from Dioxus Primitives use UpperCamelCase for component names, and snake_case for attributes.

Example from https://dioxuslabs.com/components (Alert Dialog):

// Usage example:
let open = use_signal(|| false);
rsx! {
    button {
        onclick: move |_| open.set(true),
        type: "button",
        "Show Alert Dialog"
    }
    AlertDialogRoot { open: Some(open), on_open_change: move |v| open.set(v),
        AlertDialogContent {
            // You may pass class/style for custom appearance
            AlertDialogTitle { "Title" }
            AlertDialogDescription { "Description" }
            AlertDialogActions {
                AlertDialogCancel { "Cancel" }
                AlertDialogAction { "Confirm" }
            }
        }
    }
}

What are the conventions for rsx code? When should I use one convention vs. another?

Thank you in advance!

[danieldaquino]

@ealmloff, would you happen to have some context on when to use each styling convention?

Thank you!

[ealmloff]

elements are always lowercase, component should be upper camel case with snake case attributes like structs. Built in events are smushed case (like onclick) to match the javascript name.

[danieldaquino]

Thank you!