Macro html

html!() { /* proc-macro */ }

Render a component tree to an HTML string, using XML-like tags.

The ergonomics are based on JSX:

Simple HTML elements start with a lowercase

let rendered = html! { <div id={"main"}>{"Hello"}</div> };
assert_eq!(rendered, r#"<div id="main">Hello</div>"#);

Custom components start with an uppercase

use render::Render;

#[derive(Debug)]
struct Heading<'t> { title: &'t str }

impl<'t> Render for Heading<'t> {
    fn render_into<W: std::fmt::Write>(self, writer: &mut W) -> std::fmt::Result {
        Render::render_into(rsx! { <h1>{self.title}</h1> }, writer)
    }
}

let rendered = html! { <Heading title={"Hello world!"} /> };

assert_eq!(rendered, r#"<h1>Hello world!</h1>"#);

Values are always surrounded by curly braces

let rendered = html! {
    <div id={"main"} />
};

assert_eq!(rendered, r#"<div id="main"/>"#);

HTML entities can accept dashed-separated value

let rendered = html! {
    <div data-testid={"sometestid"} />
};

assert_eq!(rendered, r#"<div data-testid="sometestid"/>"#);

Custom components can’t accept dashed-separated values

// This will fail the compilation:
let rendered = html! {
    <MyElement data-testid={"some test id"} />
};

Punning is supported

but instead of expanding to value={true}, it expands to value={value} like Rust’s punning

let class = "someclass";

let rendered = html! {
    <div class />
};

assert_eq!(rendered, r#"<div class="someclass"/>"#);

Punning is not supported for dashed-delimited attributes

let rendered = html! {
    <div this-wont-work />
};

assert_eq!(rendered, r#"<div class="some_class"/>"#);