feat: add an unhygenic render macro (#556)
* feat: add an unhygenic render macro * chore: use render instead of rsx!(cx,
This commit is contained in:
1 parent
0c48cb3601
commit
28fba42e7e
28 files changed
+158
-163
No files matched your search
@@ -32,7 +32,7 @@ static TestComponent: Component = |cx|{
|
||||
|
||||
#[inline_props]
|
||||
fn test_component(cx: Scope, name: String) -> Element {
|
||||
rsx!(cx, "Hello, {name}")
|
||||
render!("Hello, {name}")
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@ Sometimes you want a signal to propagate across your app, either through far-awa
|
||||
const TITLE: Atom<String> = || "".to_string();
|
||||
const Provider: Component = |cx|{
|
||||
let title = use_signal(&cx, &TITLE);
|
||||
rsx!(cx, input { value: title })
|
||||
render!(input { value: title })
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@@ -53,14 +53,14 @@ Commas are entirely optional, but might be useful to delineate between elements
|
||||
|
||||
The `render` function provides an **extremely efficient** allocator for VNodes and text, so try not to use the `format!` macro in your components. Rust's default `ToString` methods pass through the global allocator, but all text in components is allocated inside a manually-managed Bump arena. To push you in the right direction, all text-based attributes take `std::fmt::Arguments` directly, so you'll want to reach for `format_args!` when the built-in `f-string` interpolation just doesn't cut it.
|
||||
|
||||
### Ignoring `cx.render` with `rsx!(cx, ...)`
|
||||
### Ignoring `cx.render` with `render!(...)`
|
||||
|
||||
Sometimes, writing `cx.render` is a hassle. The `rsx! macro will accept any token followed by a comma as the target to call "render" on:
|
||||
|
||||
```rust
|
||||
cx.render(rsx!( div {} ))
|
||||
// becomes
|
||||
rsx!(cx, div {})
|
||||
render!(div {})
|
||||
```
|
||||
|
||||
### Conditional Rendering
|
||||
@@ -70,9 +70,9 @@ Sometimes, you might not want to render an element given a condition. The rsx! m
|
||||
```rust
|
||||
rsx!({
|
||||
if enabled {
|
||||
rsx!(cx, div {"enabled"})
|
||||
render!(div {"enabled"})
|
||||
} else {
|
||||
rsx!(cx, li {"disabled"})
|
||||
render!(li {"disabled"})
|
||||
}
|
||||
})
|
||||
```
|
||||
@@ -96,8 +96,8 @@ match case {
|
||||
|
||||
// the nodes must be rendered first
|
||||
match case {
|
||||
true => rsx!(cx, div {}),
|
||||
false => rsx!(cx, div {})
|
||||
true => render!(div {}),
|
||||
false => render!(div {})
|
||||
}
|
||||
```
|
||||
|
||||
@@ -121,10 +121,10 @@ Sometimes, it makes sense to render VNodes into a list:
|
||||
let mut items = vec![];
|
||||
|
||||
for _ in 0..5 {
|
||||
items.push(rsx!(cx, li {} ))
|
||||
items.push(render!(li {} ))
|
||||
}
|
||||
|
||||
rsx!(cx, {items} )
|
||||
render!({items} )
|
||||
```
|
||||
|
||||
#### Lists and Keys
|
||||
@@ -137,7 +137,7 @@ In these cases, it is vitally important to specify a "key" alongside the element
|
||||
|
||||
```rust
|
||||
fn render_list(cx: Scope, items: HashMap<String, Todo>) -> DomTree {
|
||||
rsx!(cx, ul {
|
||||
render!(ul {
|
||||
{items.iter().map(|key, item| {
|
||||
li {
|
||||
key: key,
|
||||
@@ -209,9 +209,9 @@ cx.render(rsx!{
|
||||
// rsx! is lazy, and the underlying closures cannot have the same type
|
||||
// Rendering produces the VNode type
|
||||
{match rand::gen_range::<i32>(1..3) {
|
||||
1 => rsx!(cx, h1 { "big" })
|
||||
2 => rsx!(cx, h2 { "medium" })
|
||||
_ => rsx!(cx, h3 { "small" })
|
||||
1 => render!(h1 { "big" })
|
||||
2 => render!(h2 { "medium" })
|
||||
_ => render!(h3 { "small" })
|
||||
}}
|
||||
|
||||
// Optionals
|
||||
|
||||
@@ -53,14 +53,14 @@ As vírgulas são totalmente opcionais, mas podem ser úteis para delinear entre
|
||||
|
||||
A função `render` fornece um alocador **extremamente eficiente** para `VNodes` e `text`, então tente não usar a macro `format!` em seus componentes. Os métodos `ToString` padrão do Rust passam pelo alocador global, mas todo o texto nos componentes é alocado dentro de uma ""arena Bump"" gerenciada manualmente. Para levá-lo na direção certa, todos os atributos baseados em texto recebem `std::fmt::Arguments` diretamente, então você vai querer usar `format_args!` quando a interpolação interna `f-string` simplesmente não funcionar.
|
||||
|
||||
### Ignorando `cx.render` com `rsx!(cx, ...)`
|
||||
### Ignorando `cx.render` com `render!(...)`
|
||||
|
||||
Às vezes, escrever `cx.render` é um aborrecimento. O `rsx!` macro aceitará qualquer token seguido por uma vírgula como destino para chamar "render" em:
|
||||
|
||||
```rust
|
||||
cx.render(rsx!( div {} ))
|
||||
// becomes
|
||||
rsx!(cx, div {})
|
||||
render!(div {})
|
||||
```
|
||||
|
||||
### Renderização Condicional
|
||||
@@ -70,9 +70,9 @@ rsx!(cx, div {})
|
||||
```rust
|
||||
rsx!({
|
||||
if enabled {
|
||||
rsx!(cx, div {"enabled"})
|
||||
render!(div {"enabled"})
|
||||
} else {
|
||||
rsx!(cx, li {"disabled"})
|
||||
render!(li {"disabled"})
|
||||
}
|
||||
})
|
||||
```
|
||||
@@ -96,8 +96,8 @@ match case {
|
||||
|
||||
// the nodes must be rendered first
|
||||
match case {
|
||||
true => rsx!(cx, div {}),
|
||||
false => rsx!(cx, div {})
|
||||
true => render!(div {}),
|
||||
false => render!(div {})
|
||||
}
|
||||
```
|
||||
|
||||
@@ -121,10 +121,10 @@ cx.render(rsx!{
|
||||
let mut items = vec![];
|
||||
|
||||
for _ in 0..5 {
|
||||
items.push(rsx!(cx, li {} ))
|
||||
items.push(render!(li {} ))
|
||||
}
|
||||
|
||||
rsx!(cx, {items} )
|
||||
render!({items} )
|
||||
```
|
||||
|
||||
#### Listas e chaves
|
||||
@@ -137,7 +137,7 @@ Nesses casos, é de vital importância especificar uma "chave" ao lado do elemen
|
||||
|
||||
```rust
|
||||
fn render_list(cx: Scope, items: HashMap<String, Todo>) -> DomTree {
|
||||
rsx!(cx, ul {
|
||||
render!(ul {
|
||||
{items.iter().map(|key, item| {
|
||||
li {
|
||||
key: key,
|
||||
@@ -209,9 +209,9 @@ cx.render(rsx!{
|
||||
// rsx! is lazy, and the underlying closures cannot have the same type
|
||||
// Rendering produces the VNode type
|
||||
{match rand::gen_range::<i32>(1..3) {
|
||||
1 => rsx!(cx, h1 { "big" })
|
||||
2 => rsx!(cx, h2 { "medium" })
|
||||
_ => rsx!(cx, h3 { "small" })
|
||||
1 => render!(h1 { "big" })
|
||||
2 => render!(h2 { "medium" })
|
||||
_ => render!(h3 { "small" })
|
||||
}}
|
||||
|
||||
// Optionals
|
||||
|
||||
Reference in new issue
Block a user