diff --git a/notes/SOLVEDPROBLEMS.md b/notes/SOLVEDPROBLEMS.md
index 039afddeb..5329ffb74 100644
--- a/notes/SOLVEDPROBLEMS.md
+++ b/notes/SOLVEDPROBLEMS.md
@@ -222,7 +222,7 @@ fn Example<'src>(ctx: Context<'src, ()>) -> VNode<'src> {
let handler1 = move |_| println!("Value is {}", val); // deref coercion performed here for printing
let handler2 = move |_| println!("Value is {}", val); // deref coercion performed here for printing
- ctx.view(html! {
+ ctx.render(html! {
@@ -316,7 +316,7 @@ Any "dirty" node causes an entire subtree render. Calling "setState" at the very
```rust
static APP: FC<()> = |ctx, props| {
let title = use_context(Title);
- ctx.view(html!{
+ ctx.render(html!{
"{title}"
// VComponent::new(|| (FC, PropsForFc)) -> needs a context to immediately update the component's props imperatively? store the props in a box on bump? store the props on the child?
@@ -336,7 +336,7 @@ static APP: FC<()> = |ctx, props| {
})
};
static HEAVY_LIST: FC<()> = |ctx, props| {
- ctx.view({
+ ctx.render({
{0.100.map(i => )}
})
};
diff --git a/packages/core/README.md b/packages/core/README.md
index 45077ee82..120335e40 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -57,7 +57,7 @@ fn serve_app(ctx: &Context<()>) -> VNode {
.with_handler("graph", graph_component)
.build();
- ctx.view(html! {
+ ctx.render(html! {
LiveContext>
diff --git a/packages/core/examples/alternative.rs b/packages/core/examples/alternative.rs
index 65e7d227a..71ade9536 100644
--- a/packages/core/examples/alternative.rs
+++ b/packages/core/examples/alternative.rs
@@ -1,10 +1,8 @@
//! An alternative function syntax
//!
-
-
use bumpalo::Bump;
-use dioxus_core::prelude::{VNode};
+use dioxus_core::prelude::VNode;
fn main() {}
@@ -47,7 +45,7 @@ fn Example(ctx: Context2) -> DTree {
let val = use_state(&ctx, || String::from("asd"));
let props = ctx.props();
- ctx.view(move |b| {
+ ctx.render(move |b| {
dioxus_core::nodebuilder::div(b)
.child(dioxus_core::nodebuilder::text(props.c.as_str()))
.child(virtual_child(b, Props2 { a: val }, AltChild))
@@ -59,7 +57,7 @@ fn Example(ctx: Context2) -> DTree {
fn Example2(ctx: Context2<()>, name: &str, _blah: &str) -> DTree {
let val = use_state(&ctx, || String::from("asd"));
- ctx.view(move |b| {
+ ctx.render(move |b| {
dioxus_core::nodebuilder::div(b)
.child(dioxus_core::nodebuilder::text(name))
.child(virtual_child(b, Props2 { a: val }, AltChild))
@@ -81,7 +79,7 @@ struct Props2<'a> {
impl Properties for Props2<'_> {}
fn AltChild(ctx: Context2) -> DTree {
- ctx.view(|_b| {
+ ctx.render(|_b| {
//
todo!()
})
diff --git a/packages/core/examples/borrowed.rs b/packages/core/examples/borrowed.rs
index 562349239..e88999390 100644
--- a/packages/core/examples/borrowed.rs
+++ b/packages/core/examples/borrowed.rs
@@ -19,14 +19,20 @@ struct ListItem {
}
fn app(ctx: Context, props: &Props) -> DomTree {
- ctx.view(move |b| {
+ let (f, setter) = use_state(&ctx, || 0);
+
+ ctx.render(move |b| {
let mut root = builder::div(b);
for child in &props.items {
// notice that the child directly borrows from our vec
// this makes lists very fast (simply views reusing lifetimes)
root = root.child(builder::virtual_child(
b,
- ChildProps { item: child },
+ ChildProps {
+ item: child,
+ item_handler: setter,
+ },
+ //
child_item,
));
}
@@ -34,10 +40,152 @@ fn app(ctx: Context, props: &Props) -> DomTree {
})
}
+type StateSetter = dyn Fn(T);
+
struct ChildProps<'a> {
+ // Pass down complex structs
item: &'a ListItem,
+
+ // Even pass down handlers!
+ item_handler: &'a StateSetter,
}
-fn child_item(_ctx: Context, _props: &ChildProps) -> DomTree {
+fn child_item(ctx: Context, props: &ChildProps) -> DomTree {
todo!()
+ // ctx.render(rsx! {
+ // div {
+ // item: child,
+ // handler: setter,
+ // abc: 123,
+ // onclick: props.item_handler,
+
+ // h1 { "abcd123" }
+ // h2 { "abcd123" }
+ // div {
+ // "abcd123"
+ // h2 { }
+ // p { }
+ // },
+ // }
+ // })
}
+
+/*
+
+
+
+
+rsx! {
+ ChildItem {
+ // props
+ item: child, handler: setter,
+
+ // children
+ div { class:"abcd", abc: 123 },
+ div { class:"abcd", abc: 123 },
+
+ // Auto-text coercion
+ "eyo matie {abc}",
+
+ // Anything that accepts Into
+ {},
+ }
+}
+
+// dreaming of this syntax
+#[derive(Properties)]
+struct ChildProps<'a> {
+ username: &'a str,
+ item_handler: &'a dyn Fn(i32),
+}
+
+fn child_item(ctx: Context, props: &ChildProps) -> DomTree {
+ ctx.render(rsx! {
+ div {
+ class: "abc123",
+ abc: 123,
+ onclick: props.item_handler,
+
+ h1 { "Hello, {props.username}!" },
+ h2 { "Welcome the RSX syntax" },
+ div {
+ h3 { "This is a subheader" }
+ button {
+ onclick: props.handler,
+ "This is a button"
+ }
+ "This is child text"
+ },
+ }
+ })
+}
+
+// This is also nice
+
+#[dioxus::component]
+static CHILD: FC = |ctx, username: &str, handler: &dyn Fn(i32)| {
+ ctx.render(rsx! {
+ div {
+ class: "abc123",
+ abc: 123,
+ onclick: handler,
+
+ h1 { "Hello, {username}!" },
+ h2 { "Welcome the RSX syntax" },
+ div {
+ h3 { "This is a subheader" }
+ button {
+ onclick: props.handler,
+ "This is a button"
+ }
+ "This is child text"
+ },
+ }
+ })
+}
+Menlo, Monaco, 'Courier New', monospace
+
+
+
+struct Item {
+ name: String,
+ content: String,
+}
+
+#[dioxus::live_component]
+static CHILD: FC = |ctx, username: &str, handler: &dyn Fn(i32)| {
+ // return lazy nodes or
+ let ssr = ctx.suspend(async {
+ let data = fetch("https://google.com")
+ .await?
+ .json::()
+ .await?;
+ rsx! {
+ div {
+ h1 { "Welcome: {data.name}" }
+ p { "Content: \n {data.content}" }
+ }
+ }
+ });
+
+ ctx.render(rsx! {
+ div {
+ class: "abc123",
+ abc: 123,
+ onclick: handler,
+
+ h1 { "Hello, {username}!" },
+ h2 { "Welcome the RSX syntax" },
+ div {
+ h3 { "This is a subheader" }
+ button {
+ onclick: props.handler,
+ "This is a button"
+ }
+ {ssr}
+ },
+ }
+ })
+}
+
+*/
diff --git a/packages/core/examples/contextapi.rs b/packages/core/examples/contextapi.rs
index ae4ec58dd..99bbcf168 100644
--- a/packages/core/examples/contextapi.rs
+++ b/packages/core/examples/contextapi.rs
@@ -14,7 +14,7 @@ struct Props {
static Example: FC = |ctx, props| {
let value = ctx.use_context(|c: &SomeContext| c.items.last().unwrap());
- ctx.view(move |bump| {
+ ctx.render(move |bump| {
button(bump)
.on("click", move |_| {
println!("Value is {}", props.name);
@@ -26,7 +26,7 @@ static Example: FC = |ctx, props| {
})
.finish()
})
- // ctx.view(html! {
+ // ctx.render(html! {
//
//
@@ -86,7 +86,7 @@ fn main() {}
// // VNodes can be constructed via a builder or the html! macro
// // However, both of these are "lazy" - they need to be evaluated (aka, "viewed")
// // We can "view" them with Context for ultimate speed while inside components
-// ctx.view(|bump| {
+// ctx.render(|bump| {
// div(bump)
// .attr("class", "edit")
// .child(text("Hello"))
@@ -102,7 +102,7 @@ fn main() {}
// // We can "view" them with Context for ultimate speed while inside components
// // use "phase" style allocation;
-// ctx.view(html! {
+// ctx.render(html! {
//