mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 14:44:12 +00:00
wip: continue to tweak suspense
This commit is contained in:
parent
08ca068d1c
commit
7e6cea3a13
9 changed files with 90 additions and 84 deletions
|
@ -63,7 +63,10 @@ async fn breed_pic(cx: Scope, breed: String) -> Element {
|
|||
Ok(resp) => render! {
|
||||
div {
|
||||
button {
|
||||
onclick: move |_| fut.restart(),
|
||||
onclick: move |_| {
|
||||
println!("clicked");
|
||||
fut.restart()
|
||||
},
|
||||
"Click to fetch another doggo"
|
||||
}
|
||||
img {
|
||||
|
|
|
@ -22,14 +22,6 @@ pub(crate) struct VProps<'a, P, A, F: ComponentReturn<'a, A> = Element<'a>> {
|
|||
_marker: PhantomData<A>,
|
||||
}
|
||||
|
||||
enum PropsAllocation<P> {
|
||||
/// If it's memoized, then the heap owns the props
|
||||
Memoized(*mut P),
|
||||
|
||||
/// If it's borrowed, then the parent owns the props
|
||||
Borrowed(P),
|
||||
}
|
||||
|
||||
impl<'a, P, A, F> VProps<'a, P, A, F>
|
||||
where
|
||||
F: ComponentReturn<'a, A>,
|
||||
|
|
|
@ -19,18 +19,10 @@ impl VirtualDom {
|
|||
mutations: &mut Mutations<'a>,
|
||||
template: &'a VNode<'a>,
|
||||
) -> usize {
|
||||
let mutations_to_this_point = mutations.len();
|
||||
|
||||
self.scope_stack.push(scope);
|
||||
let out = self.create(mutations, template);
|
||||
self.scope_stack.pop();
|
||||
|
||||
if !self.collected_leaves.is_empty() {
|
||||
if let Some(boundary) = self.scopes[scope.0].has_context::<SuspenseContext>() {
|
||||
println!("Boundary detected and pending leaves!");
|
||||
}
|
||||
}
|
||||
|
||||
out
|
||||
}
|
||||
|
||||
|
@ -338,98 +330,79 @@ impl VirtualDom {
|
|||
use RenderReturn::*;
|
||||
|
||||
match return_nodes {
|
||||
Sync(Some(t)) => self.create_component(mutations, scope, t, idx, component),
|
||||
Sync(Some(t)) => self.mount_component(mutations, scope, t, idx),
|
||||
Sync(None) | Async(_) => {
|
||||
self.create_component_placeholder(template, idx, component, scope, mutations)
|
||||
self.mount_component_placeholder(template, idx, scope, mutations)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn create_component<'a>(
|
||||
fn mount_component<'a>(
|
||||
&mut self,
|
||||
mutations: &mut Mutations<'a>,
|
||||
scope: ScopeId,
|
||||
template: &'a VNode<'a>,
|
||||
idx: usize,
|
||||
component: &'a VComponent<'a>,
|
||||
) -> usize {
|
||||
// // Keep track of how many mutations are in the buffer in case we need to split them out if a suspense boundary
|
||||
// // is encountered
|
||||
// let mutations_to_this_point = mutations.len();
|
||||
// Keep track of how many mutations are in the buffer in case we need to split them out if a suspense boundary
|
||||
// is encountered
|
||||
let mutations_to_this_point = mutations.len();
|
||||
|
||||
// Create the component's root element
|
||||
let created = self.create_scope(scope, mutations, template);
|
||||
|
||||
if !self.collected_leaves.is_empty() {
|
||||
println!("collected leaves: {:?}", self.collected_leaves);
|
||||
// If there are no suspense leaves below us, then just don't bother checking anything suspense related
|
||||
if self.collected_leaves.is_empty() {
|
||||
return created;
|
||||
}
|
||||
|
||||
created
|
||||
// If running the scope has collected some leaves and *this* component is a boundary, then handle the suspense
|
||||
let boundary = match self.scopes[scope.0].has_context::<SuspenseContext>() {
|
||||
Some(boundary) => boundary,
|
||||
_ => return created,
|
||||
};
|
||||
|
||||
// // If running the scope has collected some leaves and *this* component is a boundary, then handle the suspense
|
||||
// let boundary = match self.scopes[scope.0].has_context::<SuspenseContext>() {
|
||||
// Some(boundary) if !self.collected_leaves.is_empty() => boundary,
|
||||
// _ => return created,
|
||||
// };
|
||||
// Since this is a boundary, use its placeholder within the template as the placeholder for the suspense tree
|
||||
let new_id = self.next_element(template, template.template.node_paths[idx]);
|
||||
|
||||
// // Since this is a boundary, use it as a placeholder
|
||||
// let new_id = self.next_element(template, template.template.node_paths[idx]);
|
||||
// component.placeholder.set(Some(new_id));
|
||||
// self.scopes[scope.0].placeholder.set(Some(new_id));
|
||||
// mutations.push(AssignId {
|
||||
// id: new_id,
|
||||
// path: &template.template.node_paths[idx][1..],
|
||||
// });
|
||||
// Now connect everything to the boundary
|
||||
self.scopes[scope.0].placeholder.set(Some(new_id));
|
||||
|
||||
// // Now connect everything to the boundary
|
||||
// let boundary_mut = boundary;
|
||||
// let split_off = mutations.split_off(mutations_to_this_point);
|
||||
// let split_off: Vec<Mutation> = unsafe { std::mem::transmute(split_off) };
|
||||
// This involves breaking off the mutations to this point, and then creating a new placeholder for the boundary
|
||||
// Note that we break off dynamic mutations only - since static mutations aren't rendered immediately
|
||||
let split_off = unsafe {
|
||||
std::mem::transmute::<Vec<Mutation>, Vec<Mutation>>(
|
||||
mutations.split_off(mutations_to_this_point),
|
||||
)
|
||||
};
|
||||
boundary.mutations.borrow_mut().edits.extend(split_off);
|
||||
boundary.created_on_stack.set(created);
|
||||
boundary
|
||||
.waiting_on
|
||||
.borrow_mut()
|
||||
.extend(self.collected_leaves.drain(..));
|
||||
|
||||
// if boundary_mut.placeholder.get().is_none() {
|
||||
// boundary_mut.placeholder.set(Some(new_id));
|
||||
// }
|
||||
// Now assign the placeholder in the DOM
|
||||
mutations.push(AssignId {
|
||||
id: new_id,
|
||||
path: &template.template.node_paths[idx][1..],
|
||||
});
|
||||
|
||||
// // In the generated edits, we want to pick off from where we left off.
|
||||
// boundary_mut.mutations.borrow_mut().edits.extend(split_off);
|
||||
|
||||
// boundary_mut
|
||||
// .waiting_on
|
||||
// .borrow_mut()
|
||||
// .extend(self.collected_leaves.drain(..));
|
||||
|
||||
// 0
|
||||
|
||||
// let boudary = self.scopes[scope.0]
|
||||
// .consume_context::<SuspenseContext>()
|
||||
// .unwrap();
|
||||
|
||||
// boudary
|
||||
// .waiting_on
|
||||
// .borrow_mut()
|
||||
// .extend(self.collected_leaves.drain(..));
|
||||
|
||||
// if boudary.placeholder.get().is_none() {
|
||||
// boudary.placeholder.set(Some(new_id));
|
||||
// }
|
||||
0
|
||||
}
|
||||
|
||||
/// Take the rendered nodes from a component and handle them if they were async
|
||||
///
|
||||
/// IE simply assign an ID to the placeholder
|
||||
fn create_component_placeholder(
|
||||
fn mount_component_placeholder(
|
||||
&mut self,
|
||||
template: &VNode,
|
||||
idx: usize,
|
||||
component: &VComponent,
|
||||
scope: ScopeId,
|
||||
mutations: &mut Mutations,
|
||||
) -> usize {
|
||||
let new_id = self.next_element(template, template.template.node_paths[idx]);
|
||||
|
||||
// Set the placeholder of the component
|
||||
component.placeholder.set(Some(new_id));
|
||||
|
||||
// Set the placeholder of the scope
|
||||
self.scopes[scope.0].placeholder.set(Some(new_id));
|
||||
|
||||
|
|
|
@ -92,7 +92,6 @@ impl ScopeState {
|
|||
render_fn: component as *const (),
|
||||
static_props: P::IS_STATIC,
|
||||
props: Cell::new(Some(extended)),
|
||||
placeholder: Cell::new(None),
|
||||
scope: Cell::new(None),
|
||||
})
|
||||
}
|
||||
|
|
|
@ -39,7 +39,16 @@ pub struct VNode<'a> {
|
|||
}
|
||||
|
||||
impl<'a> VNode<'a> {
|
||||
pub fn single_component(
|
||||
pub fn placeholder_template(cx: &'a ScopeState) -> Self {
|
||||
Self::template_from_dynamic_node(
|
||||
cx,
|
||||
DynamicNode::Placeholder(Cell::new(ElementId(0))),
|
||||
"dioxus-placeholder",
|
||||
)
|
||||
.unwrap()
|
||||
}
|
||||
|
||||
pub fn template_from_dynamic_node(
|
||||
cx: &'a ScopeState,
|
||||
node: DynamicNode<'a>,
|
||||
id: &'static str,
|
||||
|
@ -134,7 +143,6 @@ impl<'a> DynamicNode<'a> {
|
|||
pub struct VComponent<'a> {
|
||||
pub name: &'static str,
|
||||
pub static_props: bool,
|
||||
pub placeholder: Cell<Option<ElementId>>,
|
||||
pub scope: Cell<Option<ScopeId>>,
|
||||
pub props: Cell<Option<Box<dyn AnyProps<'a> + 'a>>>,
|
||||
pub render_fn: *const (),
|
||||
|
@ -145,7 +153,6 @@ impl<'a> std::fmt::Debug for VComponent<'a> {
|
|||
f.debug_struct("VComponent")
|
||||
.field("name", &self.name)
|
||||
.field("static_props", &self.static_props)
|
||||
.field("placeholder", &self.placeholder)
|
||||
.field("scope", &self.scope)
|
||||
.finish()
|
||||
}
|
||||
|
|
|
@ -20,6 +20,8 @@ pub struct SuspenseBoundary {
|
|||
pub mutations: RefCell<Mutations<'static>>,
|
||||
pub placeholder: Cell<Option<ElementId>>,
|
||||
|
||||
pub created_on_stack: Cell<usize>,
|
||||
|
||||
// whenever the suspense resolves, we call this onresolve function
|
||||
// this lets us do things like putting up a loading spinner
|
||||
//
|
||||
|
@ -41,6 +43,7 @@ impl SuspenseBoundary {
|
|||
waiting_on: Default::default(),
|
||||
mutations: RefCell::new(Mutations::new(0)),
|
||||
placeholder: Cell::new(None),
|
||||
created_on_stack: Cell::new(0),
|
||||
onresolve: None,
|
||||
onstart: None,
|
||||
})
|
||||
|
|
|
@ -19,6 +19,7 @@ use futures_util::{pin_mut, StreamExt};
|
|||
use slab::Slab;
|
||||
use std::{
|
||||
any::Any,
|
||||
borrow::BorrowMut,
|
||||
cell::Cell,
|
||||
collections::{BTreeSet, HashMap},
|
||||
future::Future,
|
||||
|
@ -541,9 +542,35 @@ impl VirtualDom {
|
|||
self.dirty_scopes.remove(&dirty);
|
||||
|
||||
// if the scope is currently suspended, then we should skip it, ignoring any tasks calling for an update
|
||||
if !self.is_scope_suspended(dirty.id) {
|
||||
self.run_scope(dirty.id);
|
||||
self.diff_scope(&mut mutations, dirty.id);
|
||||
if self.is_scope_suspended(dirty.id) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Save the current mutations length so we can split them into boundary
|
||||
let mutations_to_this_point = mutations.len();
|
||||
|
||||
self.diff_scope(&mut mutations, dirty.id);
|
||||
|
||||
// If suspended leaves are present, then we should find the boundary for this scope and attach things
|
||||
// No placeholder necessary since this is a diff
|
||||
if !self.collected_leaves.is_empty() {
|
||||
let mut boundary = self.scopes[dirty.id.0]
|
||||
.consume_context::<SuspenseContext>()
|
||||
.unwrap();
|
||||
|
||||
let boundary_mut = boundary.borrow_mut();
|
||||
|
||||
// Attach mutations
|
||||
boundary_mut
|
||||
.mutations
|
||||
.borrow_mut()
|
||||
.extend(mutations.split_off(mutations_to_this_point));
|
||||
|
||||
// Attach suspended leaves
|
||||
boundary
|
||||
.waiting_on
|
||||
.borrow_mut()
|
||||
.extend(self.collected_leaves.drain(..));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@ async fn it_works() {
|
|||
fn app(cx: Scope) -> Element {
|
||||
println!("running root app");
|
||||
|
||||
VNode::single_component(
|
||||
VNode::template_from_dynamic_node(
|
||||
cx,
|
||||
cx.component(suspense_boundary, (), "suspense_boundary"),
|
||||
"app",
|
||||
|
@ -29,7 +29,7 @@ fn suspense_boundary(cx: Scope) -> Element {
|
|||
cx.provide_context(Rc::new(RefCell::new(SuspenseBoundary::new(cx.scope_id()))))
|
||||
});
|
||||
|
||||
VNode::single_component(cx, cx.component(async_child, (), "async_child"), "app")
|
||||
VNode::template_from_dynamic_node(cx, cx.component(async_child, (), "async_child"), "app")
|
||||
}
|
||||
|
||||
async fn async_child(cx: Scope<'_>) -> Element {
|
||||
|
@ -47,7 +47,7 @@ async fn async_child(cx: Scope<'_>) -> Element {
|
|||
|
||||
println!("Future awaited and complete");
|
||||
|
||||
VNode::single_component(cx, cx.component(async_text, (), "async_text"), "app")
|
||||
VNode::template_from_dynamic_node(cx, cx.component(async_text, (), "async_text"), "app")
|
||||
}
|
||||
|
||||
async fn async_text(cx: Scope<'_>) -> Element {
|
||||
|
|
|
@ -323,6 +323,8 @@ export class Interpreter {
|
|||
this.RemoveEventListener(edit.id, edit.event_name);
|
||||
break;
|
||||
case "NewEventListener":
|
||||
// console.log("creating listener! ", edit);
|
||||
|
||||
// this handler is only provided on desktop implementations since this
|
||||
// method is not used by the web implementation
|
||||
let handler = (event) => {
|
||||
|
|
Loading…
Reference in a new issue