yew-lmth

Crates.ioyew-lmth
lib.rsyew-lmth
version0.1.0
sourcesrc
created_at2024-01-24 07:41:10.399309
updated_at2024-01-28 14:57:51.356096
descriptionA macro crate for writing HTML-like syntax for Yew application, inspired by Sycamore and Dioxus.
homepage
repositoryhttps://github.com/Saplyn/yew-lmth
max_upload_size
id1111799
size49,490
Liu Qisheng (Saplyn)

documentation

README

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
  • Others
    • List rendering: iter().map( lmth! { ...} )..collect::<Html>() (for shorthand is not supported)

Syntax

Tags

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>
}
Commit count: 0

cargo fmt