Feat: massive changes to definition of components

This change switches back to the original `ctx<props>` syntax for
commponents. This lets lifetime elision to remove the need to match
exactly which lifetime (props or ctx) gets  carried to the output. As
such, `Props` is currently required to be static. It *is* possible to
loosen this restriction, and will be done in the future, though only
through adding metadata about the props through the Props derive
macro. Implementing the IS_STATIC trait is unsafe, so the derive macro
will do it through some heuristics.

For now, this unlocks sharing vnodes from parents to children, enabling
pass-thru components, fragments, portals, etc.
This commit is contained in:
Jonathan Kelley committed 2021-06-01 18:33:15 -04:00
1 parent c1fd848f89
commit 508c560320
82 files changed
+692 -558

No files matched your search

+9 -11
View File
@@ -1,9 +1,9 @@
# Utilities
There are a few macros and utility functions that make life easier when writing Dioxus components.
There are a few macros and utility functions that make life easier when writing Dioxus components.
## The `functional_component` procedural macro
The `functional_component` proc macro allows you to inline props into the generic parameter of the component's context. This is useful When writing "pure" components, or when you don't want the extra clutter of structs, derives, and burden of naming things.
This macro allows allows a classic struct definition to be embedded directly into the function arguments. The props are automatically pulled from the context and destructured into the function's body, saving an extra step.
@@ -11,13 +11,13 @@ This macro allows allows a classic struct definition to be embedded directly int
```rust
// Inlines and destructure props *automatically*
#[functional_component]
fn Example(ctx: Context, name: &str, pending: bool, count: i32 ) -> DomTree {
html! {
<div>
fn Example(ctx: Context, name: &str, pending: bool, count: i32 ) -> VNode {
html! {
<div>
<p> "Hello, {name}!" </p>
<p> "Status: {pending}!" </p>
<p> "Count {count}!" </p>
</div>
</div>
}
}
```
@@ -37,18 +37,16 @@ fn Example(ctx: &mut Context<ExampleProps>) -> VNode {
name, pending, count
} = ctx.props();
rsx! {
<div>
rsx! {
<div>
<p> "Hello, {name}!" </p>
<p> "Status: {pending}!" </p>
<p> "Count {count}!" </p>
</div>
</div>
}
}
```
## The rsx! macro
The rsx! macacro is similar to the html! macro in other libraries, but with a few add-ons to make it fun and easy to work with. We'll cover the rsx macro more in depth in the [vnode-macro](3-vnode-macros.md) chapter.