maciejhirsz / kobold

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

`view!` macro syntax changes #50

Closed maciejhirsz closed 1 year ago

maciejhirsz commented 1 year ago

Following the discussion in #48 and having slept on it, I think the best solution for syntax would be to avoid the </> implied closing tags, and instead follow the actual HTML5 spec for tags.

Self-closing tags

The following elements wouldn't require the closing tailing slash /> and would be forbidden from having child nodes:

Optional closing tags

The following elements would would have their closing tags made optional altogether:

Aside from being closed by the opening tags mentioned above (if any), those elements are closed if their parent elements are closed (including implicit closing of the parent element).

All tags close on termination

To top it all of all open tags would automatically close at the end of the view! macro invocation.

Examples

All these rules combined would mean the following would all be valid syntax:

view! { <span.fancy-text> "Text" }
view! {
    <p>
        "Paragraph 1"
        <br>
        "Still paragraph 1"
    <p>
        "Paragraph 2"
        <img src="kobold.png" alt="Kobold">
        "Still paragraph 2"
}
view! {
    <ul.my-list>
        <li> "Item 1"
        <li> "Item 2"
        <li> "Item 3"
}
view! {
    <table.some-class>
        <tr>
            <td> "Row 1, Col 1"
            <td> "Row 1, Col 2"
            <td> "Row 1, Col 3"
        <tr>
            <td> "Row 2, Col 1"
            <td> "Row 2, Col 2"
            <td> "Row 2, Col 3"
} 

This should all be backwards compatible with what's currently implemented, though it adds ambiguity to closing tags making implicit closing </> unfeasible (and also unnecessary I believe).

In addition components would still have to follow the XML rules for closing since there is no way for the macro to know whether a component allows closing tags or not.

CC: @nanoqsh

maciejhirsz commented 1 year ago

Implemented in #62