html-node-core
| Crates.io | html-node-core |
| lib.rs | html-node-core |
| version | 0.5.0 |
| source | src |
| created_at | 2023-07-28 04:52:56.198465 |
| updated_at | 2023-11-24 04:21:29.519994 |
| description | A html to node macro powered by rstml. |
| homepage | https://github.com/vidhanio/html-node |
| repository | https://github.com/vidhanio/html-node |
| max_upload_size | |
| id | 928144 |
| size | 51,166 |
Vidhan Bhatt (vidhanio)
documentation
README
html-node
HTML nodes in Rust. [powered by rstml].
Features
- Text escaping
- Pretty-printing
- Customizable compile-time type-checked elements and attributes (docs)
- completely optional, and can be mixed with untyped elements when needed!
Projects Using html-node
- vidhan.io
html-nodeused alongsideaxumandtree-sitterfor a personal site.
Example
let shopping_list = vec!["milk", "eggs", "bread"];
let shopping_list_html = html! {
<div>
<h1>Shopping List</h1>
<ul>
{ shopping_list.into_iter().zip(1..).map(|(item, i)| html! {
<li class="item">
<input type="checkbox" id={format!("item-{i}")}>
<label for={format!("item-{i}")}>{text!("{item}")}</label>
</li>
}) }
</ul>
</div>
};
HTML Output
// the `#` flag enables pretty-printing
println!("{shopping_list_html:#}");
<div>
<h1>
Shopping List
</h1>
<ul>
<li class="item">
<input type="checkbox" id="item-1">
<label for="item-1">
milk
</label>
</li>
<li class="item">
<input type="checkbox" id="item-2">
<label for="item-2">
eggs
</label>
</li>
<li class="item">
<input type="checkbox" id="item-3">
<label for="item-3">
bread
</label>
</li>
</ul>
</div>
Rust Output
println!("{shopping_list_html:#?}");
Element(
Element {
name: "div",
attributes: [],
children: Some(
[
Element(
Element {
name: "h1",
attributes: [],
children: Some(
[
Text(
Text {
text: "Shopping List",
},
),
],
),
},
),
Element(
Element {
name: "ul",
attributes: [],
children: Some(
[
Fragment(
Fragment {
children: [
Element(
Element {
name: "li",
attributes: [
(
"class",
Some(
"item",
),
),
],
children: Some(
[
Element(
Element {
name: "input",
attributes: [
(
"type",
Some(
"checkbox",
),
),
(
"id",
Some(
"item-1",
),
),
],
children: None,
},
),
Element(
Element {
name: "label",
attributes: [
(
"for",
Some(
"item-1",
),
),
],
children: Some(
[
Text(
Text {
text: "milk",
},
),
],
),
},
),
],
),
},
),
Element(
Element {
name: "li",
attributes: [
(
"class",
Some(
"item",
),
),
],
children: Some(
[
Element(
Element {
name: "input",
attributes: [
(
"type",
Some(
"checkbox",
),
),
(
"id",
Some(
"item-2",
),
),
],
children: None,
},
),
Element(
Element {
name: "label",
attributes: [
(
"for",
Some(
"item-2",
),
),
],
children: Some(
[
Text(
Text {
text: "eggs",
},
),
],
),
},
),
],
),
},
),
Element(
Element {
name: "li",
attributes: [
(
"class",
Some(
"item",
),
),
],
children: Some(
[
Element(
Element {
name: "input",
attributes: [
(
"type",
Some(
"checkbox",
),
),
(
"id",
Some(
"item-3",
),
),
],
children: None,
},
),
Element(
Element {
name: "label",
attributes: [
(
"for",
Some(
"item-3",
),
),
],
children: Some(
[
Text(
Text {
text: "bread",
},
),
],
),
},
),
],
),
},
),
],
},
),
],
),
},
),
],
),
},
)