Feat: include the helper
This commit is contained in:
Jonathan Kelley committed
1 parent
f2eec79fd4
commit
07341d2c65
22 files changed
+2990
-1311
No files matched your search
@@ -0,0 +1,49 @@
|
||||
// #![allow(unused, non_upper_case_globals)]
|
||||
// use bumpalo::Bump;
|
||||
// use dioxus_core::nodebuilder::*;
|
||||
// use dioxus_core::{nodes::DomTree, prelude::*};
|
||||
// use std::{collections::HashMap, future::Future, marker::PhantomData};
|
||||
|
||||
fn main() {}
|
||||
|
||||
// struct DummyRenderer {
|
||||
// alloc: Bump,
|
||||
// }
|
||||
|
||||
// impl DummyRenderer {
|
||||
// // "Renders" a domtree by logging its children and outputs
|
||||
// fn render() {}
|
||||
|
||||
// // Takes a domtree, an initial value, a new value, and produces the diff list
|
||||
// fn produce_diffs() {}
|
||||
// }
|
||||
|
||||
// struct Props<'a> {
|
||||
// name: &'a str,
|
||||
// }
|
||||
|
||||
// /// This component does "xyz things"
|
||||
// /// This is sample documentation
|
||||
// static Component: FC<Props> = |ctx| {
|
||||
// // This block mimics that output of the html! macro
|
||||
|
||||
// DomTree::new(move |bump| {
|
||||
// // parse into RSX structures
|
||||
// // regurgetate as rust types
|
||||
|
||||
// // <div> "Child 1" "Child 2"</div>
|
||||
// div(bump)
|
||||
// .attr("class", "edit")
|
||||
// .child(text("Child 1"))
|
||||
// .child(text("Child 2"))
|
||||
// .finish()
|
||||
// })
|
||||
// };
|
||||
|
||||
// /*
|
||||
// source
|
||||
// |> c1 -> VNode
|
||||
// |> c2 -> VNode
|
||||
// |> c3 -> VNode
|
||||
// |> c4 -> VNode
|
||||
// */
|
||||
@@ -0,0 +1,57 @@
|
||||
#![allow(unused, non_upper_case_globals)]
|
||||
use bumpalo::Bump;
|
||||
use dioxus_core::prelude::*;
|
||||
use dioxus_core::{nodebuilder::*, virtual_dom::DomTree};
|
||||
use std::{collections::HashMap, future::Future, marker::PhantomData};
|
||||
|
||||
fn main() {}
|
||||
struct Props<'a> {
|
||||
use_macro: bool,
|
||||
|
||||
// todo uh not static
|
||||
// incorporate lifetimes into the thing somehow
|
||||
text: &'a str,
|
||||
}
|
||||
|
||||
fn Component(ctx: Context<Props>) -> VNode {
|
||||
// Write asynchronous rendering code that immediately returns a "suspended" VNode
|
||||
// The concurrent API will then progress this component when the future finishes
|
||||
// You can suspend the entire component, or just parts of it
|
||||
let product_list = ctx.suspend(async {
|
||||
// Suspend the rendering that completes when the future is done
|
||||
match fetch_data().await {
|
||||
Ok(data) => html! {<div> </div>},
|
||||
Err(_) => html! {<div> </div>},
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
if ctx.props.use_macro {
|
||||
ctx.view(|bump| {
|
||||
div(bump)
|
||||
.attr("class", "edit")
|
||||
.child(text("Hello"))
|
||||
.child(text(ctx.props.text))
|
||||
.finish()
|
||||
})
|
||||
} else {
|
||||
// "View" indicates exactly *when* allocations take place, everything is lazy up to this point
|
||||
ctx.view(html! {
|
||||
<div>
|
||||
// TODO!
|
||||
// Get all this working again
|
||||
// <h1>"Products"</h1>
|
||||
// // Subnodes can even be suspended
|
||||
// // When completely rendered, they won't cause the component itself to re-render, just their slot
|
||||
// <p> {product_list} </p>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/// An example of a datafetching service
|
||||
async fn fetch_data() -> Result<String, ()> {
|
||||
todo!()
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
use std::future::Future;
|
||||
|
||||
use dioxus_core::{prelude::*, virtual_dom::Properties};
|
||||
// use virtual_dom_rs::Closure;
|
||||
|
||||
// Stop-gap while developing
|
||||
// Need to update the macro
|
||||
type VirtualNode = VNode;
|
||||
|
||||
pub fn main() {
|
||||
let dom = VirtualDom::new_with_props(root);
|
||||
// let mut renderer = TextRenderer::new(dom);
|
||||
// let output = renderer.render();
|
||||
}
|
||||
|
||||
#[derive(PartialEq)]
|
||||
struct Props {
|
||||
name: String,
|
||||
}
|
||||
impl Properties for Props {}
|
||||
|
||||
fn root(ctx: &mut Context<Props>) -> VNode {
|
||||
// the regular html syntax
|
||||
|
||||
// html! {
|
||||
// <html>
|
||||
// <Head />
|
||||
// <Body />
|
||||
// <Footer />
|
||||
// </html>
|
||||
// }
|
||||
|
||||
// or a manually crated vnode
|
||||
{
|
||||
let mut node_0 = VNode::element("div");
|
||||
{
|
||||
if let Some(ref mut element_node) = node_0.as_velement_mut() {
|
||||
// element_node.attrs.insert("blah", "blah");
|
||||
// element_node.children.extend(node_0.into_iter());
|
||||
}
|
||||
}
|
||||
|
||||
let mut node_1: IterableNodes = ("Hello world!").into();
|
||||
|
||||
node_1.first().insert_space_before_text();
|
||||
let mut node_2 = VNode::element("button");
|
||||
|
||||
let node_3 = VNode::Component(VComponent::from_fn(
|
||||
Head,
|
||||
Props {
|
||||
name: "".to_string(),
|
||||
},
|
||||
));
|
||||
|
||||
{
|
||||
// let closure = Closure::wrap(Box::new(|_| {}) as Box<FnMut(_)>);
|
||||
// let closure_rc = std::rc::Rc::new(closure);
|
||||
// node_2
|
||||
// .as_velement_mut()
|
||||
// .expect("Not an element")
|
||||
// .events
|
||||
// .0
|
||||
// .insert("onclick".to_string(), closure_rc);
|
||||
}
|
||||
|
||||
if let Some(ref mut element_node) = node_0.as_velement_mut() {
|
||||
element_node.children.extend(node_1.into_iter());
|
||||
}
|
||||
if let Some(ref mut element_node) = node_0.as_velement_mut() {
|
||||
element_node.children.extend(node_2.into_iter());
|
||||
}
|
||||
|
||||
node_0
|
||||
}
|
||||
}
|
||||
|
||||
fn Head(ctx: &mut Context<Props>) -> VNode {
|
||||
html! {
|
||||
<head> "Head Section" </head>
|
||||
}
|
||||
}
|
||||
|
||||
fn Body(ctx: &mut Context<Props>) -> VNode {
|
||||
html! {
|
||||
<body> {"Footer Section"}</body>
|
||||
}
|
||||
}
|
||||
|
||||
fn Footer(ctx: &mut Context<Props>) -> VNode {
|
||||
let mut v = 10_i32;
|
||||
format!("Is this the real life, or is this fantasy, caught in a landslide");
|
||||
|
||||
html! {
|
||||
<div>
|
||||
"Footer Section"
|
||||
"Footer Section"
|
||||
"Footer Section"
|
||||
"Footer Section"
|
||||
"Footer Section"
|
||||
"Footer Section"
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user