dioxus/packages/core/src/create.rs

405 lines
15 KiB
Rust
Raw Normal View History

2022-11-09 18:58:11 +00:00
use crate::factory::RenderReturn;
2022-11-23 03:59:56 +00:00
use crate::innerlude::{VComponent, VFragment, VText};
use crate::mutations::Mutation;
2022-11-02 01:42:29 +00:00
use crate::mutations::Mutation::*;
use crate::nodes::VNode;
2022-11-03 08:24:20 +00:00
use crate::nodes::{DynamicNode, TemplateNode};
2022-11-09 03:39:37 +00:00
use crate::virtual_dom::VirtualDom;
2022-11-23 02:38:27 +00:00
use crate::{AttributeValue, ScopeId, SuspenseContext, TemplateAttribute};
2022-11-23 03:59:56 +00:00
impl<'b: 'static> VirtualDom {
2022-11-22 01:00:34 +00:00
/// Create a new template [`VNode`] and write it to the [`Mutations`] buffer.
///
/// This method pushes the ScopeID to the internal scopestack and returns the number of nodes created.
2022-11-23 03:59:56 +00:00
pub(crate) fn create_scope(&mut self, scope: ScopeId, template: &'b VNode<'b>) -> usize {
2022-11-09 18:58:11 +00:00
self.scope_stack.push(scope);
2022-11-23 03:59:56 +00:00
let out = self.create(template);
2022-11-09 18:58:11 +00:00
self.scope_stack.pop();
2022-11-22 01:00:34 +00:00
2022-11-09 18:58:11 +00:00
out
}
/// Create this template and write its mutations
2022-11-23 03:59:56 +00:00
pub(crate) fn create(&mut self, template: &'b VNode<'b>) -> usize {
2022-11-09 18:58:11 +00:00
// The best renderers will have templates prehydrated and registered
// Just in case, let's create the template using instructions anyways
if !self.templates.contains_key(&template.template.id) {
2022-11-23 03:59:56 +00:00
self.register_template(template);
}
2022-11-09 18:58:11 +00:00
// Walk the roots, creating nodes and assigning IDs
// todo: adjust dynamic nodes to be in the order of roots and then leaves (ie BFS)
2022-11-16 09:13:39 +00:00
let mut dynamic_attrs = template.template.attr_paths.iter().enumerate().peekable();
let mut dynamic_nodes = template.template.node_paths.iter().enumerate().peekable();
let cur_scope = self.scope_stack.last().copied().unwrap();
let mut on_stack = 0;
2022-11-16 09:13:39 +00:00
for (root_idx, root) in template.template.roots.iter().enumerate() {
on_stack += match root {
2022-11-16 09:13:39 +00:00
TemplateNode::Element { .. } | TemplateNode::Text(_) => {
2022-11-23 03:59:56 +00:00
self.mutations.push(LoadTemplate {
2022-11-16 09:13:39 +00:00
name: template.template.id,
index: root_idx,
});
1
}
2022-11-02 01:42:29 +00:00
2022-11-16 07:22:41 +00:00
TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
2022-11-16 19:48:47 +00:00
match &template.dynamic_nodes[*id] {
2022-11-23 03:59:56 +00:00
DynamicNode::Fragment(frag) => match frag {
VFragment::Empty(slot) => {
let id =
self.next_element(template, template.template.node_paths[*id]);
slot.set(id);
self.mutations.push(CreatePlaceholder { id });
1
}
VFragment::NonEmpty(_) => self.create_dynamic_node(
2022-11-16 09:13:39 +00:00
template,
&template.dynamic_nodes[*id],
*id,
),
2022-11-23 03:59:56 +00:00
},
DynamicNode::Component { .. } => {
self.create_dynamic_node(template, &template.dynamic_nodes[*id], *id)
}
2022-11-20 23:58:05 +00:00
DynamicNode::Text(VText { id: slot, value }) => {
2022-11-18 04:00:39 +00:00
let id = self.next_element(template, template.template.node_paths[*id]);
2022-11-16 09:13:39 +00:00
slot.set(id);
2022-11-23 03:59:56 +00:00
self.mutations.push(CreateTextNode { value, id });
2022-11-16 09:13:39 +00:00
1
}
}
}
};
// we're on top of a node that has a dynamic attribute for a descendant
// Set that attribute now before the stack gets in a weird state
while let Some((mut attr_id, path)) =
dynamic_attrs.next_if(|(_, p)| p[0] == root_idx as u8)
{
2022-11-18 04:00:39 +00:00
let id = self.next_element(template, template.template.attr_paths[attr_id]);
2022-11-23 03:59:56 +00:00
self.mutations.push(AssignId {
path: &path[1..],
id,
});
loop {
let attribute = template.dynamic_attrs.get(attr_id).unwrap();
2022-11-09 18:58:11 +00:00
attribute.mounted_element.set(id);
match &attribute.value {
2022-11-23 03:59:56 +00:00
AttributeValue::Text(value) => self.mutations.push(SetAttribute {
2022-11-09 18:58:11 +00:00
name: attribute.name,
value: *value,
ns: attribute.namespace,
2022-11-03 00:29:18 +00:00
id,
}),
2022-11-23 03:59:56 +00:00
AttributeValue::Bool(value) => self.mutations.push(SetBoolAttribute {
2022-11-16 00:05:22 +00:00
name: attribute.name,
value: *value,
id,
}),
2022-11-23 03:59:56 +00:00
AttributeValue::Listener(_) => self.mutations.push(NewEventListener {
2022-11-18 04:00:39 +00:00
// all listeners start with "on"
event_name: &attribute.name[2..],
scope: cur_scope,
2022-11-16 00:05:22 +00:00
id,
}),
AttributeValue::Float(_) => todo!(),
AttributeValue::Int(_) => todo!(),
AttributeValue::Any(_) => todo!(),
AttributeValue::None => todo!(),
2022-11-03 00:29:18 +00:00
}
2022-11-09 18:58:11 +00:00
// Only push the dynamic attributes forward if they match the current path (same element)
match dynamic_attrs.next_if(|(_, p)| *p == path) {
Some((next_attr_id, _)) => attr_id = next_attr_id,
None => break,
2022-11-03 00:29:18 +00:00
}
}
}
2022-11-02 01:42:29 +00:00
// We're on top of a node that has a dynamic child for a descendant
2022-11-06 22:28:41 +00:00
// Skip any node that's a root
2022-11-16 19:48:47 +00:00
let mut start = None;
let mut end = None;
while let Some((idx, p)) = dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8) {
if p.len() == 1 {
continue;
}
if start.is_none() {
start = Some(idx);
2022-11-04 03:56:31 +00:00
}
2022-11-16 19:48:47 +00:00
end = Some(idx);
}
2022-11-16 09:13:39 +00:00
2022-11-16 19:48:47 +00:00
if let (Some(start), Some(end)) = (start, end) {
for idx in start..=end {
let node = &template.dynamic_nodes[idx];
2022-11-23 03:59:56 +00:00
let m = self.create_dynamic_node(template, node, idx);
2022-11-16 19:48:47 +00:00
if m > 0 {
2022-11-23 03:59:56 +00:00
self.mutations.push(ReplacePlaceholder {
2022-11-16 19:48:47 +00:00
m,
path: &template.template.node_paths[idx][1..],
});
}
}
2022-11-16 09:13:39 +00:00
}
}
on_stack
}
2022-11-22 01:00:34 +00:00
/// Insert a new template into the VirtualDom's template registry
2022-11-23 03:59:56 +00:00
fn register_template(&mut self, template: &'b VNode<'b>) {
2022-11-22 01:00:34 +00:00
for node in template.template.roots {
2022-11-23 03:59:56 +00:00
self.create_static_node(template, node);
2022-11-22 01:00:34 +00:00
}
2022-11-23 03:59:56 +00:00
self.mutations.template_mutations.push(SaveTemplate {
2022-11-22 01:00:34 +00:00
name: template.template.id,
m: template.template.roots.len(),
});
self.templates
.insert(template.template.id, template.template);
}
2022-11-23 03:59:56 +00:00
pub(crate) fn create_static_node(
2022-11-02 01:42:29 +00:00
&mut self,
2022-11-23 03:59:56 +00:00
template: &'b VNode<'b>,
node: &'b TemplateNode<'static>,
2022-11-02 01:42:29 +00:00
) {
match *node {
2022-11-03 00:29:18 +00:00
// Todo: create the children's template
2022-11-18 04:00:39 +00:00
TemplateNode::Dynamic(idx) => {
let id = self.next_element(template, template.template.node_paths[idx]);
2022-11-23 03:59:56 +00:00
self.mutations
.template_mutations
.push(CreatePlaceholder { id })
2022-11-12 02:29:27 +00:00
}
2022-11-23 03:59:56 +00:00
TemplateNode::Text(value) => self
.mutations
.template_mutations
.push(CreateStaticText { value }),
TemplateNode::DynamicText { .. } => self
.mutations
.template_mutations
.push(CreateStaticText { value: "d" }),
2022-11-16 00:05:22 +00:00
2022-11-02 01:42:29 +00:00
TemplateNode::Element {
attrs,
children,
namespace,
tag,
2022-11-16 00:05:22 +00:00
inner_opt,
2022-11-02 01:42:29 +00:00
} => {
2022-11-18 04:00:39 +00:00
let id = self.next_element(template, &[]); // never gets referenced, empty path is fine, I think?
2022-11-02 01:42:29 +00:00
2022-11-23 03:59:56 +00:00
self.mutations.template_mutations.push(CreateElement {
2022-11-02 01:42:29 +00:00
name: tag,
namespace,
id,
});
2022-11-23 03:59:56 +00:00
self.mutations
.template_mutations
.extend(attrs.into_iter().filter_map(|attr| match attr {
TemplateAttribute::Static {
name,
value,
namespace,
..
} => Some(SetAttribute {
name,
value,
id,
ns: *namespace,
}),
_ => None,
}));
2022-11-02 01:42:29 +00:00
2022-11-16 00:05:22 +00:00
if children.is_empty() && inner_opt {
return;
}
2022-11-02 01:42:29 +00:00
children
.into_iter()
2022-11-23 03:59:56 +00:00
.for_each(|child| self.create_static_node(template, child));
2022-11-02 01:42:29 +00:00
2022-11-23 03:59:56 +00:00
self.mutations
.template_mutations
.push(AppendChildren { m: children.len() })
2022-11-02 01:42:29 +00:00
}
}
}
2022-11-23 03:59:56 +00:00
pub(crate) fn create_dynamic_node(
&mut self,
2022-11-23 03:59:56 +00:00
template: &'b VNode<'b>,
node: &'b DynamicNode<'b>,
2022-11-03 08:24:20 +00:00
idx: usize,
) -> usize {
2022-11-22 01:00:34 +00:00
use DynamicNode::*;
match node {
2022-11-23 03:59:56 +00:00
Text(text) => self.create_dynamic_text(template, text, idx),
Fragment(frag) => self.create_fragment(frag, template, idx),
Component(component) => self.create_component_node(template, component, idx),
2022-11-22 01:00:34 +00:00
}
}
2022-11-02 01:42:29 +00:00
2022-11-23 03:59:56 +00:00
fn create_dynamic_text(
2022-11-22 01:00:34 +00:00
&mut self,
2022-11-23 03:59:56 +00:00
template: &'b VNode<'b>,
text: &'b VText<'b>,
2022-11-22 01:00:34 +00:00
idx: usize,
) -> usize {
// Allocate a dynamic element reference for this text node
let new_id = self.next_element(template, template.template.node_paths[idx]);
2022-11-16 00:05:22 +00:00
2022-11-22 01:00:34 +00:00
// Make sure the text node is assigned to the correct element
text.id.set(new_id);
2022-11-16 00:05:22 +00:00
2022-11-22 01:00:34 +00:00
// Add the mutation to the list
2022-11-23 03:59:56 +00:00
self.mutations.push(HydrateText {
2022-11-22 01:00:34 +00:00
id: new_id,
path: &template.template.node_paths[idx][1..],
value: text.value,
});
2022-11-04 05:30:26 +00:00
2022-11-22 01:00:34 +00:00
// Since we're hydrating an existing node, we don't create any new nodes
0
}
2022-11-16 19:48:47 +00:00
2022-11-23 03:59:56 +00:00
pub(crate) fn create_fragment(
2022-11-22 01:00:34 +00:00
&mut self,
2022-11-23 03:59:56 +00:00
frag: &'b VFragment<'b>,
template: &'b VNode<'b>,
2022-11-22 01:00:34 +00:00
idx: usize,
) -> usize {
2022-11-23 02:38:27 +00:00
match frag {
2022-11-23 03:59:56 +00:00
VFragment::NonEmpty(nodes) => {
nodes.iter().fold(0, |acc, child| acc + self.create(child))
}
2022-11-16 19:48:47 +00:00
2022-11-23 02:38:27 +00:00
VFragment::Empty(slot) => {
// Allocate a dynamic element reference for this text node
let id = self.next_element(template, template.template.node_paths[idx]);
2022-11-16 19:48:47 +00:00
2022-11-23 02:38:27 +00:00
// Make sure the text node is assigned to the correct element
slot.set(id);
2022-11-16 19:48:47 +00:00
2022-11-23 02:38:27 +00:00
// Assign the ID to the existing node in the template
2022-11-23 03:59:56 +00:00
self.mutations.push(AssignId {
2022-11-23 02:38:27 +00:00
path: &template.template.node_paths[idx][1..],
id,
});
2022-11-16 19:48:47 +00:00
2022-11-23 02:38:27 +00:00
// Since the placeholder is already in the DOM, we don't create any new nodes
0
}
}
2022-11-22 01:00:34 +00:00
}
2022-11-08 06:55:22 +00:00
2022-11-23 03:59:56 +00:00
fn create_component_node(
2022-11-22 01:00:34 +00:00
&mut self,
2022-11-23 03:59:56 +00:00
template: &'b VNode<'b>,
component: &'b VComponent<'b>,
2022-11-22 01:00:34 +00:00
idx: usize,
) -> usize {
let props = component.props.replace(None).unwrap();
2022-11-09 03:39:37 +00:00
2022-11-22 01:00:34 +00:00
let prop_ptr = unsafe { std::mem::transmute(props.as_ref()) };
let scope = self.new_scope(prop_ptr).id;
2022-11-02 01:42:29 +00:00
2022-11-22 01:00:34 +00:00
component.props.replace(Some(props));
component.scope.set(Some(scope));
2022-11-04 00:34:42 +00:00
2022-11-22 01:00:34 +00:00
let return_nodes = unsafe { self.run_scope(scope).extend_lifetime_ref() };
use RenderReturn::*;
2022-11-16 07:59:19 +00:00
2022-11-22 01:00:34 +00:00
match return_nodes {
2022-11-23 03:59:56 +00:00
Sync(Ok(t)) => self.mount_component(scope, t, idx),
2022-11-23 02:38:27 +00:00
Sync(Err(_e)) => todo!("Propogate error upwards"),
2022-11-23 03:59:56 +00:00
Async(_) => self.mount_component_placeholder(template, idx, scope),
}
}
2022-11-22 01:00:34 +00:00
2022-11-23 03:59:56 +00:00
fn mount_component(&mut self, scope: ScopeId, template: &'b VNode<'b>, idx: usize) -> usize {
2022-11-22 18:05:13 +00:00
// Keep track of how many mutations are in the buffer in case we need to split them out if a suspense boundary
// is encountered
2022-11-23 03:59:56 +00:00
let mutations_to_this_point = self.mutations.len();
2022-11-22 01:00:34 +00:00
// Create the component's root element
2022-11-23 03:59:56 +00:00
let created = self.create_scope(scope, template);
2022-11-22 01:00:34 +00:00
2022-11-22 18:05:13 +00:00
// 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;
2022-11-22 01:00:34 +00:00
}
2022-11-22 18:05:13 +00:00
// 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,
};
// 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]);
// Now connect everything to the boundary
self.scopes[scope.0].placeholder.set(Some(new_id));
// 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>>(
2022-11-23 03:59:56 +00:00
self.mutations.split_off(mutations_to_this_point),
2022-11-22 18:05:13 +00:00
)
};
boundary.mutations.borrow_mut().edits.extend(split_off);
boundary.created_on_stack.set(created);
boundary
.waiting_on
.borrow_mut()
.extend(self.collected_leaves.drain(..));
// Now assign the placeholder in the DOM
2022-11-23 03:59:56 +00:00
self.mutations.push(AssignId {
2022-11-22 18:05:13 +00:00
id: new_id,
path: &template.template.node_paths[idx][1..],
});
0
2022-11-22 01:00:34 +00:00
}
/// Take the rendered nodes from a component and handle them if they were async
///
/// IE simply assign an ID to the placeholder
2022-11-22 18:05:13 +00:00
fn mount_component_placeholder(
2022-11-22 01:00:34 +00:00
&mut self,
template: &VNode,
idx: usize,
scope: ScopeId,
) -> usize {
let new_id = self.next_element(template, template.template.node_paths[idx]);
// Set the placeholder of the scope
self.scopes[scope.0].placeholder.set(Some(new_id));
// Since the placeholder is already in the DOM, we don't create any new nodes
2022-11-23 03:59:56 +00:00
self.mutations.push(AssignId {
2022-11-22 01:00:34 +00:00
id: new_id,
path: &template.template.node_paths[idx][1..],
});
0
}
}