13 releases
new 0.3.1 | May 12, 2024 |
---|---|
0.3.0 | May 11, 2024 |
0.2.3 | May 5, 2024 |
0.1.10 | May 3, 2024 |
#1817 in Procedural macros
1,010 downloads per month
Used in 3 crates
(via cercis)
9KB
105 lines
Macro for cercis package
cargo add cercis
Used only with the cercis package
Using examples
For more examples, see cercis
Empty component
all data is transferred to the component by reference
use cercis::prelude::*;
fn main() {
let page = rsx!(div {
MyComponent {}
});
// output: <div><h1>my component</h1></div>
println!("{}", page.render())
}
#[component]
fn MyComponent() -> Element {
rsx!(h1 { "my component" })
}
Params
Parameters are declared as normal function parameters
use cercis::prelude::*;
fn main() {
let text = "Lorem ipsum";
let page = rsx!(div {
MyComponent {
text: text
}
});
// output: <div><p>Lorem ipsum</p></div>
println!("{}", page.render())
}
#[component]
fn MyComponent<'a>(text: &'a str) -> Element {
rsx!(p { "{text}" })
}
Option params
If the parameter is an option, then you can omit it when calling the component
use cercis::prelude::*;
fn main() {
let text = "Lorem ipsum";
let page = rsx!(div {
MyComponent {}
MyComponent {
text: text
}
});
// output: <div><p>empty</p><p>Lorem ipsum</p></div>
println!("{}", page.render())
}
#[component]
fn MyComponent<'a>(text: Option<&'a str>) -> Element {
let text = text.unwrap_or("empty");
rsx!(p { "{text}" })
}
Children
the component can accept elements example: Element
and children if you name the variable children: Element
all
Element
types are optional
use cercis::prelude::*;
fn main() {
let text = "Lorem ipsum";
let page = rsx!(div {
MyComponent { span { "children" } }
MyComponent {
text: rsx!(p { "{text}" }),
span { "children" }
}
MyComponent { text: rsx!(p { "my text" }) }
});
/* output(formatted):
<div>
<div class='container'>
<div></div>
<span>children</span>
</div>
<div class='container'>
<div><p>Lorem ipsum</p></div>
<span>children</span>
</div>
<div class='container'>
<div><p>my text</p></div>
</div>
</div>
*/
println!("{}", page.render())
}
#[component]
fn MyComponent(text: Element, children: Element) -> Element {
rsx!(div {
class: "container",
div { text }
children
})
}
If you have any problems create issue
Dependencies
~300–760KB
~18K SLoC