Skip to content

A macro crate for writing HTML-like syntax for Yew application, inspired by Sycamore and Dioxus.

License

Apache-2.0, MIT licenses found

Licenses found

Apache-2.0
LICENSE-Apache
MIT
LICENSE-MIT
Notifications You must be signed in to change notification settings

Saplyn/yew-lmth

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>
}

About

A macro crate for writing HTML-like syntax for Yew application, inspired by Sycamore and Dioxus.

Resources

License

Apache-2.0, MIT licenses found

Licenses found

Apache-2.0
LICENSE-Apache
MIT
LICENSE-MIT

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages