maciejhirsz / kobold

Easy declarative web interfaces.
https://docs.rs/kobold/
Mozilla Public License 2.0
385 stars 7 forks source link

Optional closing tags #62

Closed maciejhirsz closed 1 year ago

maciejhirsz commented 1 year ago

This implements the proposal from #50 with some alterations:

All closing tags for HTML elements are optional

End of macro closes all tags:

view! {
    // no closing tags necessary at the end of macro
    <header><h1> "Hello Kobold"
}

Closing an ancestor closes all children:

view! {
    <div>
        <header>
            <h1> "Hello Kobold"
    // Closing the `div` closes both `h1` and `header`
    </div>
}

:warning: Note: components still need to be closed:

view! {
    // trailing `/` is mandatory for components without children
    <MyComponent />
    <p> "Paragraph under the component"
}

Void elements don't need to be closed

view! {
    <div>
        "This text is inside the div"
        // `input` is forbidden from having children and doesn't need closing
        <input type="text">
        "This text is also inside the div"
}

Some tags are implicitly closed by other tags

This follows all the HTML5 rules, making the following legal syntax:

view! {
    <ul.my-list>
        // `li` closes previous `li`
        <li> "Item 1"
        <li> "Item 2"
        <li> "Item 3"
}
view! {
    <table.some-class>
        <tr>
            // `td` closes previous `td` or `th`
            <td> "Row 1, Col 1"
            <td> "Row 1, Col 2"
            <td> "Row 1, Col 3"
        // `tr` closes previous `td`, `th`, and/or `tr`
        <tr>
            <td> "Row 2, Col 1"
            <td> "Row 2, Col 2"
            <td> "Row 2, Col 3"
}