[−][src]Macro render_macros::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 example deliberately fails to compile
// 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
ⓘThis example deliberately fails to compile
let rendered = html! { <div this-wont-work /> }; assert_eq!(rendered, r#"<div class="some_class"/>"#);