#html #html-macro #rstml #macro

html-node-macro

由rstml驱动的HTML到节点宏

25 个版本 (4 个破坏性更新)

0.5.0 2023年11月24日
0.4.1 2023年9月6日
0.3.0 2023年9月6日
0.2.3 2023年8月30日
0.1.18 2023年7月29日

#5 in #rstml

Download history 27/week @ 2024-03-11 17/week @ 2024-03-18 5/week @ 2024-03-25 100/week @ 2024-04-01 32/week @ 2024-04-08 65/week @ 2024-04-15 21/week @ 2024-04-22 10/week @ 2024-04-29 10/week @ 2024-05-06 12/week @ 2024-05-13 27/week @ 2024-05-20 7/week @ 2024-05-27 16/week @ 2024-06-03 18/week @ 2024-06-10 8/week @ 2024-06-17 14/week @ 2024-06-24

每月57次下载
用于 html-node

MIT 许可证

43KB
677

html-node

Rust中的HTML节点。[由 rstml 驱动]。

特性

  • 文本转义
  • 美化打印
  • 可自定义的编译时类型检查元素和属性 (文档)
    • 完全可选,必要时可以与未类型化元素混合!

使用 html-node 的项目

  • vidhan.io
    • html-nodeaxumtree-sitter 一起用于个人网站。

示例

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输出
// 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输出
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",
                                                                                },
                                                                            ),
                                                                        ],
                                                                    ),
                                                                },
                                                            ),
                                                        ],
                                                    ),
                                                },
                                            ),
                                        ],
                                    },
                                ),
                            ],
                        ),
                    },
                ),
            ],
        ),
    },
)

依赖项

~0.5–1MB
~21K SLoC