Is there a way to use HTML component props for own components?

[Umenokin]

Hi folks

Playing around with leptos and finding the process fun, and relatively painless.
Incredible work and I really like the author's YouTube videos. I encourage the author to produce more of those because one of those influenced me to try out Leptos in the very first place.

Back to my question. Is there a way to reuse original component props? Let's I want to make my own button to make sure consistent style. In TypeScript I would do something like this:

types ButtonProps = HTMLButtonElementProps;

export function Button({ className, ...rest}): ReactElement {
  return <button className={`btn btn-primary ${className}`} {...props} />
}

What would be the way to do something like this in Leptos?

Also, if there is no direct alternative, how can I declare my own properties while reusing some of those from the HTML native button? For example:

type ButtonProps = {
  type?: ButtonType;
  onClick: () => void;
  children: ReactNode;
}

While with children it is clear, are there any recommendations for type and onClick? Should I create my own ButtonType enum or I can get the existing ButtonType from leptos or web_sys? What about those standard callbacks?

Thank you!

[gbj]

Coincidentally just merged a PR (#1619) to make it easier to spread attributes onto an element with a {..attributes} syntax.

By "reuse original component props" I think you mean "reuse typed HTML element attributes," right? We don't have built-in types for attributes. Remember that TypeScript and Rust have very different type systems: ButtonProps in your React example is essentially a HashMap with some type-checking, which means it is always heap-allocated* but only takes up space in memory for fields it actually contains. A Rust struct would be a struct, not a map, but take up space for all fields. Given that HTML is very dynamically typed, the overhead of this makes it less than ideal for our framework purposes. So there are no built-in types for things like typical HTML attributes for a given element.

• asterisk for JIT optimizations

[Umenokin]

Thank you 🙏