17 releases (4 stable)
1.2.0 | Jun 5, 2024 |
---|---|
1.1.0 | May 27, 2024 |
0.3.1 | May 12, 2024 |
0.2.3 | May 5, 2024 |
0.1.10 | May 3, 2024 |
#2027 in Procedural macros
76 downloads per month
Used in 3 crates
(via cercis)
9KB
98 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<'a>
and children if you name the variable children: Element<'a>
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<'a>(text: Element<'a>, children: Element<'a>) -> Element {
rsx!(div {
class: "container",
div { text }
children
})
}
If you have any problems create issue
Dependencies
~285–740KB
~18K SLoC