Adding or exposing a Property struct for standard HTML element

[oxabz]

Idea

I think it could be quite useful to have a prop struct for standard HTML element, it would make it easier to make Components reusable.

Example

I have a PixelCanvas that is a wrapper around a canvas with added logic. I'd like to be easily pass canvas attributes easily through my components, so I can use it with different even and style it independently.

Having a struct that contain the HTML element's attributes would transform

    fn view(&self, ctx: &Context<Self>) -> Html {
        let (width, height) = self.dims;
        let CanvasProps{class, id, onclick, onhover, ..} = ctx.props().underlying_canvas_props;
        html!{
            <canvas {width} {height} {class} {id} {onclick} {onhover} .../>
        }
    }

into

    fn view(&self, ctx: &Context<Self>) -> Html {
        let (width, height) = self.dims;
        let props = ctx.props().underlying_canvas_props;
        html!{
            <canvas {width} {height} ..props/>
        }
    }

[obermillerk]

I think having explicit structs for the valid attributes on each html element type would be way overkill though. Simply allowing passthrough of attributes that aren't explicitly defined as a prop for the component without the need for checking them would be sufficient, much like how if you put an attribute on an input element in the html macro it isn't checked for a valid value, that becomes the browser's problem.

For example, vuejs which I am a bit more familiar with will do this automatically. Any attribute on a component that is not explicitly defined as a prop will be passed down to the root element of the component in vue, or you can move them to a different element than the component root if you wish. Something like this would make reusable functionality so much easier. It could be just a HashMap of attribute names to values, or even a vec of (name, value) tuples, which could just be strings as they are in html.

My personal use case was to create a generic <Input<T> /> component that would abstract out the parsing of the value into type T so I wouldn't have to do it every time, but it's basically impossible without adding props for every valid attribute on input, the vast majority of which my component does not care about at all. Type safety isn't even a real concern in this case, I just want to pass through any attributes I don't specifically care about to the underlying native input element to allow whoever is using the component to specify input type attribute, min or max, etc which again do not matter to the functionality I want to write.

Technically I suppose I could pass an input child with the relevant attributes and hook my functionality into that, but that seems needlessly verbose and confusing for someone other than the author of the component. Not to mention, the user could pass an onchange callback to that input which would complicate things.

It's quite a glaring oversight in my opinion.

[oxabz]

Hey!

I made a proof of concept crate to fix that problem. It's a pretty rough draft for now, but it might be interesting for you.
https://www.reddit.com/r/rust/comments/117392m/yew_i_made_a_poc_for_a_crate_that_allow_you_to/
https://github.com/oxabz/yew-html-attributes

'Would love to get some feedback!