Macro html_node::typed::component

macro_rules! component {
    (
        $vis:vis $ElementName:ident $([$AttributeName:ident])? $({
                $($attribute:ident $(: $atype:ty)?),* $(,)?
        })?;

        |$attributes:pat_param, $extra_attributes:pat_param, $children:pat_param| $body:expr
    ) => { ... };
}

Available on crate feature typed only.

Make a typed HTML node.

Examples

Passing Type-Checking

use html_node::typed::{self, elements::*};

typed::component! {
    CustomBody {
        r: u8,
        g: u8,
        b: u8,
        width: i32,
    };

    |CustomBodyAttributes { r, g, b, width }, _, children| typed::html! {
        <div style={format!("background-color: rgb({r}, {g}, {b}); width: {width}px;")}>
            { children }
        </div>
    }
}

let html = typed::html! {
    <CustomBody component r=255 g=0 b=0 width=100>"Hello, world!"</CustomBody>
};

let expected = "\
<div style=\"background-color: rgb(255, 0, 0); width: 100px;\">\
    Hello, world!\
</div>\
";

assert_eq!(html.to_string(), expected);