4 releases

0.1.0	Jan 28, 2024
0.1.0-alpha	Jan 26, 2024
0.0.1	Jan 24, 2024
0.0.0	Jan 24, 2024

#470 in Procedural macros

MIT/Apache

38KB
909 lines

Yew LMTH

A macro crate for writing HTML-like syntax for Yew application, highly inspired by Sycamore and Dioxus. It works by translating it into a corresponding yew::prelude::html!() macro.

Features

Basic Tags
- Types: built-in, component, generic, void (non-closing).
- Attributes: string literal, expression or code block binding.
- Content: tag children, string literal, or code block.
Yew
- Fragment tag: ! { ... }
- Dynamic tag names: @{expr} ( ... ) { ... }
- Conditional rendering: if ... { ... } else { ... }, if let ... { ... } else { ... }
Others
- List rendering: iter().map( lmth! { ...} )..collect::<Html>() (for shorthand is not supported)

Syntax

`lmth!` syntax	meaning	`html!` syntax
`! { ... }`	Yew's fragment	`<> ... </>`
`@{expr} { ... }`	Dynamicly named tag	`<@{expr}> ... </@>`
`tag (attrs) { ... }`	Tag with attributes and content	`<tag attrs>{ ... }</tag>`
`tag (attrs)`	Void tag with attributes	`<tag attrs />`
`tag { ... }`	Tag with content	`<tag>{ ... }</tag>`
`tag`	Void tag with no attribute	`<tag />`

Attributes

Attributes are separated by commas: tag (attr: val, attr: val, ...) { ... }

`lmth!` syntax	meaning	`html!` syntax
`attr: expr`	Attribute with expression as value	`attr={expr}`
`attr: {code}`	Attribute with code block as value	`attr={code}`
`attr="litstr"`	Attribute with literal string as value	`attr="litstr"`
`attr`	Shorthand for `{attr}` in yew	`{attr}`

Content

`lmth!` syntax	meaning	`html!` syntax
`{code}`	Code as content	`{code}`
`"litstr"`	Literal string as content	`"litstr"`
`tag ...`	Tag	corresponding tag

Conditional rendering

`lmth!` syntax	meaning	`html!` syntax
`if {code} { ... }`	Conditional rendering	`if {code} { ... }`
`if let {code} { ... }`	Conditional rendering	`if let {code} { ... }`

Example

Please refer to GitHub repo's examples folder.

use yew_lmth::lmth;

lmth! {
    div (class="container") {
       h1 { "Hello, world!" }
       button (onclick: handle_click()) { "Click me!" }
       img (src="https://yew.rs/img/logo.svg")
    }
}

will expands to:

yew::prelude::html! {
    <div class="container">
        <h1>{ "Hello, world!" }</h1>
        <button onclick={handle_click()}>{ "Click me!" }</button>
        <img src="https://yew.rs/img/logo.svg" />
    </div>
}

Dependencies

~220–660KB
~16K SLoC