Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-22 20:23:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

Feat: view -> render

Browse source
This commit is contained in:
Jonathan Kelley 2021-02-28 21:21:17 -05:00
parent 10a236fc65
commit c8bb392cad
24 changed files with 204 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
README.md
View file

@ -14,7 +14,18 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla
static Example: FC<()> = |ctx| {
let (value, set_value) = use_state(&ctx, || "...?");
ctx.view(html! {
// custom (more powerful) syntax
ctx.render(html! {
div {
h1 { "Hello, {value}" }
button { "?", onclick: move |_| set_value("world!") }
button { "?", onclick: move |_| set_value("Dioxus 🎉") }
}
})
// Classic syntax
// no more updates, frozen
ctx.render(html!{
<div>
<h1> "Hello, {value}" </h1>
<button onclick={move |_| set_value("world!")}> "?" </button>

2
docs/posts/01-hello-world.md
View file

@ -9,7 +9,7 @@ struct MyProps {
}
fn Example(ctx: Context<MyProps>) -> VNode {
ctx.view(html! {
ctx.render(html! {
<div> "Hello {ctx.props().name}!" </div>
})
}

6
examples/website.rs
View file

@ -20,7 +20,7 @@ mod state {
}
static APP: FC<()> = |ctx, props| {
ctx.view(html! {
ctx.render(html! {
<div>
<div>
@ -29,7 +29,7 @@ static APP: FC<()> = |ctx, props| {
/// Draw the navbar on top of the screen
static Navbar: FC<state::Route> = |ctx, props| {
ctx.view(html! {
ctx.render(html! {
<div>
<div>
@ -37,7 +37,7 @@ static Navbar: FC<state::Route> = |ctx, props| {
};
static Homepage: FC<()> = |ctx, props| {
ctx.view(html! {
ctx.render(html! {
<div>
<div>

6
notes/SOLVEDPROBLEMS.md
View file

@ -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! {
<div>
<button onclick={handler1}> "Echo value with h1" </button>
<button onclick={handler2}> "Echo value with h2" </button>
@ -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!{
<div>
<h1> "{title}"</h1>
<HeavyList /> // 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 => <BigElement >)}
})
};

2
packages/core/README.md
View file

@ -57,7 +57,7 @@ fn serve_app(ctx: &Context<()>) -> VNode {
.with_handler("graph", graph_component)
.build();
ctx.view(html! {
ctx.render(html! {
<LiveContext ctx={livecontext}>
<App />
</ LiveContext>

10
packages/core/examples/alternative.rs
View file

@ -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<Props>) -> 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<Props>) -> 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<Props2>) -> DTree {
ctx.view(|_b| {
ctx.render(|_b| {
//
todo!()
})

154
packages/core/examples/borrowed.rs
View file

@ -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,
},
// <ChildItem item=child hanldler=setter />
child_item,
));
}
@ -34,10 +40,152 @@ fn app(ctx: Context, props: &Props) -> DomTree {
})
}
type StateSetter<T> = dyn Fn(T);
struct ChildProps<'a> {
// Pass down complex structs
item: &'a ListItem,
// Even pass down handlers!
item_handler: &'a StateSetter<i32>,
}
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<VChild>
{},
}
}
// 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::<Item>()
.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}
},
}
})
}
*/

4
packages/core/examples/contextapi.rs
View file

@ -14,7 +14,7 @@ struct Props {
static Example: FC<Props> = |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<Props> = |ctx, props| {
})
.finish()
})
// ctx.view(html! {
// ctx.render(html! {
// <div>
// <button onclick={move |_| println!("Value is {}", value)} />
// <button onclick={move |_| println!("Value is {}", value)} />

3
packages/core/examples/dummy.rs
View file

@ -5,7 +5,6 @@
// use dioxus_core::prelude::*;
// use once_cell::sync::{Lazy, OnceCell};
use std::ops::Deref;
/*
@ -97,7 +96,7 @@ fn t<'a>(ctx: Context<'a>) {
// let val2 = refed.as_bytes();
});
ctx.view(move |_b| {});
ctx.render(move |_b| {});
}
fn main() {}

2
packages/core/examples/listener.rs
View file

@ -13,7 +13,7 @@ fn main() {
static Example: FC<()> = |ctx, props| {
let (name, set_name) = use_state(&ctx, || "...?");
ctx.view(html! {
ctx.render(html! {
<div>
<h1> "Hello, {name}" </h1>
<button onclick={move |_| set_name("jack")}> "jack!" </button>

6
packages/core/examples/macrosrc.rs
View file

@ -70,7 +70,7 @@ fn main() {}
// });
// // todo!()
// ctx.view(html! {
// ctx.render(html! {
// <div>
// <h1> "Products" </h1>
// <button> "hello!" </button>
@ -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! {
// <div>
// // your template goes here
// // feel free to directly use "name"

4
packages/core/examples/nested.rs
View file

@ -12,7 +12,7 @@ static Header: FC<()> = |ctx, props| {
let handler1 = move || println!("Value is {}", inner.current());
ctx.view(|bump| {
ctx.render(|bump| {
builder::div(bump)
.child(VNode::Component(VComponent::new(
Bottom,
@ -24,7 +24,7 @@ static Header: FC<()> = |ctx, props| {
};
static Bottom: FC<()> = |ctx, props| {
ctx.view(html! {
ctx.render(html! {
<div>
<h1> "bruh 1" </h1>
<h1> "bruh 2" </h1>

2
packages/core/examples/step.rs
View file

@ -30,7 +30,7 @@ struct Props {
// }
static Example: FC<Props> = |ctx, _props| {
ctx.view(html! {
ctx.render(html! {
<div>
<h1> "hello world!" </h1>
<h1> "hello world!" </h1>

4
packages/core/src/component.rs
View file

@ -44,7 +44,7 @@ mod tests {
static TestComponent: FC<()> = |ctx, props| {
//
ctx.view(html! {
ctx.render(html! {
<div>
</div>
})
@ -52,7 +52,7 @@ mod tests {
static TestComponent2: FC<()> = |ctx, props| {
//
ctx.view(|bump: &Bump| VNode::text("blah"))
ctx.render(|bump: &Bump| VNode::text("blah"))
};
#[test]

4
packages/core/src/context.rs
View file

@ -73,10 +73,10 @@ impl<'a> Context<'a> {
/// let lazy_tree = html! {<div>"Hello World"</div>};
///
/// // Actually build the tree and allocate it
/// ctx.view(lazy_tree)
/// ctx.render(lazy_tree)
/// }
///```
pub fn view(self, lazy_nodes: impl FnOnce(&'a Bump) -> VNode<'a> + 'a) -> DomTree {
pub fn render(self, lazy_nodes: impl FnOnce(&'a Bump) -> VNode<'a> + 'a) -> DomTree {
let safe_nodes = lazy_nodes(self.bump);
let unsafe_nodes = unsafe { std::mem::transmute::<VNode<'a>, VNode<'static>>(safe_nodes) };
self.final_nodes.deref().borrow_mut().replace(unsafe_nodes);

2
packages/core/src/debug_renderer.rs
View file

@ -30,7 +30,7 @@ mod tests {
fn ensure_creation() -> Result<(), ()> {
let mut dom = VirtualDom::new(|ctx, props| {
//
ctx.view(html! { <div>"hello world" </div> })
ctx.render(html! { <div>"hello world" </div> })
});
// dom.progress()?;

12
packages/core/src/scope.rs
View file

@ -266,7 +266,7 @@ mod tests {
use crate::prelude::format_args_f;
static ListenerTest: FC<()> = |ctx, props| {
ctx.view(html! {
ctx.render(html! {
<div onclick={|_| println!("Hell owlrld")}>
"hello"
</div>
@ -288,7 +288,7 @@ mod tests {
fn test_scope() {
let example: FC<()> = |ctx, props| {
use crate::builder::*;
ctx.view(|b| div(b).child(text("a")).finish())
ctx.render(|b| div(b).child(text("a")).finish())
};
let props = ();
@ -318,7 +318,7 @@ mod tests {
let childprops: ExampleProps<'a> = ExampleProps { name: content };
// let childprops: ExampleProps<'a> = ExampleProps { name: content };
ctx.view(move |b: &'a Bump| {
ctx.render(move |b: &'a Bump| {
div(b)
.child(text(props.name))
// .child(text(props.name))
@ -336,7 +336,7 @@ mod tests {
}
fn child_example<'b>(ctx: Context<'b>, props: &'b ExampleProps) -> DomTree {
ctx.view(move |b| {
ctx.render(move |b| {
div(b)
.child(text(props.name))
//
@ -346,7 +346,7 @@ mod tests {
static CHILD: FC<ExampleProps> = |ctx, props: &'_ ExampleProps| {
// todo!()
ctx.view(move |b| {
ctx.render(move |b| {
div(b)
.child(text(props.name))
//
@ -371,7 +371,7 @@ mod tests {
// stored value
// let (text, set_val) = crate::hooks::use_state(&ctx, || "abcd".to_string());
ctx.view(move |b| {
ctx.render(move |b| {
todo!()
// div(b)
// // .child(text(props.name))

2
packages/core/src/virtual_dom.rs
View file

@ -290,7 +290,7 @@ mod tests {
#[test]
fn start_dom() {
let mut dom = VirtualDom::new(|ctx, props| {
ctx.view(|bump| {
ctx.render(|bump| {
use crate::builder::*;
div(bump).child(text("hello, world")).finish()
})

4
packages/web/examples/basic.rs
View file

@ -15,7 +15,7 @@ fn main() {
static App: FC<()> = |ctx, _| {
log::info!("Ran component");
use dioxus::builder::*;
ctx.view(|b| {
ctx.render(|b| {
div(b)
.child(text("hello"))
.listeners([on(b, "click", |_| {
@ -24,7 +24,7 @@ static App: FC<()> = |ctx, _| {
})])
.finish()
})
// ctx.view(html! {
// ctx.render(html! {
// <div onclick={move |_| log::info!("button1 clicked!")}>
// "Hello"
// // <div class="flex items-center justify-center flex-col">

2
packages/web/examples/hello.rs
View file

@ -6,7 +6,7 @@ fn main() {
}
static Example: FC<()> = |ctx, _props| {
ctx.view(html! {
ctx.render(html! {
<div>
"Hello world!"
</div>

2
packages/web/examples/jackjill.rs
View file

@ -14,7 +14,7 @@ static Example: FC<()> = |ctx, props| {
log::debug!("Running component....");
ctx.view(html! {
ctx.render(html! {
// <div>
// <h1> "Hello, {name}" </h1>
// <button onclick={move |_| set_name("jack")}> "jack!" </button>

2
packages/web/examples/weather.rs
View file

@ -10,7 +10,7 @@ fn main() {
console_error_panic_hook::set_once();
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| {
ctx.view(html! {
ctx.render(html! {
<div>
<div class="flex items-center justify-center flex-col">
<div class="flex items-center justify-center">

2
packages/web/src/lib.rs
View file

@ -168,7 +168,7 @@ mod tests {
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| {
todo!()
// ctx.view(html! {
// ctx.render(html! {
// <div>
// "Hello world"
// <button onclick={move |_| log::info!("button1 clicked!")}> "click me" </button>

2
packages/webview/examples/demo.rs
View file

@ -21,7 +21,7 @@ fn main() {
}
static Example: FC<()> = |ctx, _props| {
ctx.view(html! {
ctx.render(html! {
<div>
<div class="flex items-center justify-center flex-col">
<div class="flex items-center justify-center">