create.rs 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. use crate::any_props::AnyProps;
  2. use crate::innerlude::{VComponent, VPlaceholder, VText};
  3. use crate::mutations::Mutation;
  4. use crate::mutations::Mutation::*;
  5. use crate::nodes::VNode;
  6. use crate::nodes::{DynamicNode, TemplateNode};
  7. use crate::virtual_dom::VirtualDom;
  8. use crate::{AttributeValue, ElementId, RenderReturn, ScopeId, SuspenseContext};
  9. use std::cell::Cell;
  10. use std::iter::{Enumerate, Peekable};
  11. use std::rc::Rc;
  12. use std::slice;
  13. use TemplateNode::*;
  14. impl<'b> VirtualDom {
  15. /// Create a new template [`VNode`] and write it to the [`Mutations`] buffer.
  16. ///
  17. /// This method pushes the ScopeID to the internal scopestack and returns the number of nodes created.
  18. pub(crate) fn create_scope(&mut self, scope: ScopeId, template: &'b VNode<'b>) -> usize {
  19. self.scope_stack.push(scope);
  20. let out = self.create(template);
  21. self.scope_stack.pop();
  22. out
  23. }
  24. /// Create this template and write its mutations
  25. pub(crate) fn create(&mut self, node: &'b VNode<'b>) -> usize {
  26. // The best renderers will have templates prehydrated and registered
  27. // Just in case, let's create the template using instructions anyways
  28. if !self.templates.contains_key(&node.template.name) {
  29. self.register_template(node);
  30. }
  31. // we know that this will generate at least one mutation per node
  32. self.mutations.edits.reserve(node.template.roots.len());
  33. // Walk the roots, creating nodes and assigning IDs
  34. // todo: adjust dynamic nodes to be in the order of roots and then leaves (ie BFS)
  35. let mut attrs = node.template.attr_paths.iter().enumerate().peekable();
  36. let mut nodes = node.template.node_paths.iter().enumerate().peekable();
  37. node.template
  38. .roots
  39. .iter()
  40. .enumerate()
  41. .map(|(idx, root)| match root {
  42. DynamicText { id } | Dynamic { id } => {
  43. nodes.next().unwrap();
  44. self.write_dynamic_root(node, *id)
  45. }
  46. Element { .. } => self.write_element_root(node, idx, &mut attrs, &mut nodes),
  47. Text { .. } => self.write_static_text_root(node, idx),
  48. })
  49. .sum()
  50. }
  51. fn write_static_text_root(&mut self, node: &VNode, idx: usize) -> usize {
  52. // Simply just load the template root, no modifications needed
  53. self.load_template_root(node, idx);
  54. // Text producs just one node on the stack
  55. 1
  56. }
  57. fn write_dynamic_root(&mut self, template: &'b VNode<'b>, idx: usize) -> usize {
  58. use DynamicNode::*;
  59. match &template.dynamic_nodes[idx] {
  60. node @ Fragment(_) => self.create_dynamic_node(template, node, idx),
  61. node @ Component { .. } => self.create_dynamic_node(template, node, idx),
  62. Placeholder(VPlaceholder { id }) => {
  63. let id = self.set_slot(template, id, idx);
  64. self.mutations.push(CreatePlaceholder { id });
  65. 1
  66. }
  67. Text(VText { id, value }) => {
  68. let id = self.set_slot(template, id, idx);
  69. self.create_static_text(value, id);
  70. 1
  71. }
  72. }
  73. }
  74. fn create_static_text(&mut self, value: &str, id: ElementId) {
  75. // Safety: we promise not to re-alias this text later on after committing it to the mutation
  76. let unbounded_text: &str = unsafe { std::mem::transmute(value) };
  77. self.mutations.push(CreateTextNode {
  78. value: unbounded_text,
  79. id,
  80. });
  81. }
  82. /// We write all the descndent data for this element
  83. ///
  84. /// Elements can contain other nodes - and those nodes can be dynamic or static
  85. ///
  86. /// We want to make sure we write these nodes while on top of the root
  87. fn write_element_root(
  88. &mut self,
  89. template: &'b VNode<'b>,
  90. root_idx: usize,
  91. dynamic_attrs: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
  92. dynamic_nodes: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
  93. ) -> usize {
  94. // Load the template root and get the ID for the node on the stack
  95. let root_on_stack = self.load_template_root(template, root_idx);
  96. // Write all the attributes below this root
  97. self.write_attrs_on_root(dynamic_attrs, root_idx, root_on_stack, template);
  98. // Load in all of the placeholder or dynamic content under this root too
  99. self.load_placeholders(dynamic_nodes, root_idx, template);
  100. 1
  101. }
  102. /// Load all of the placeholder nodes for descendents of this root node
  103. ///
  104. /// ```rust, ignore
  105. /// rsx! {
  106. /// div {
  107. /// // This is a placeholder
  108. /// some_value,
  109. ///
  110. /// // Load this too
  111. /// "{some_text}"
  112. /// }
  113. /// }
  114. /// ```
  115. fn load_placeholders(
  116. &mut self,
  117. dynamic_nodes: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
  118. root_idx: usize,
  119. template: &'b VNode<'b>,
  120. ) {
  121. let (start, end) = match collect_dyn_node_range(dynamic_nodes, root_idx) {
  122. Some((a, b)) => (a, b),
  123. None => return,
  124. };
  125. for idx in (start..=end).rev() {
  126. let m = self.create_dynamic_node(template, &template.dynamic_nodes[idx], idx);
  127. if m > 0 {
  128. // The path is one shorter because the top node is the root
  129. let path = &template.template.node_paths[idx][1..];
  130. self.mutations.push(ReplacePlaceholder { m, path });
  131. }
  132. }
  133. }
  134. fn write_attrs_on_root(
  135. &mut self,
  136. attrs: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
  137. root_idx: usize,
  138. root: ElementId,
  139. node: &VNode,
  140. ) {
  141. while let Some((mut attr_id, path)) = attrs.next_if(|(_, p)| p[0] == root_idx as u8) {
  142. let id = self.assign_static_node_as_dynamic(path, root, node, attr_id);
  143. loop {
  144. self.write_attribute(&node.dynamic_attrs[attr_id], id);
  145. // Only push the dynamic attributes forward if they match the current path (same element)
  146. match attrs.next_if(|(_, p)| *p == path) {
  147. Some((next_attr_id, _)) => attr_id = next_attr_id,
  148. None => break,
  149. }
  150. }
  151. }
  152. }
  153. fn write_attribute(&mut self, attribute: &crate::Attribute, id: ElementId) {
  154. // Make sure we set the attribute's associated id
  155. attribute.mounted_element.set(id);
  156. // Safety: we promise not to re-alias this text later on after committing it to the mutation
  157. let unbounded_name: &str = unsafe { std::mem::transmute(attribute.name) };
  158. match &attribute.value {
  159. AttributeValue::Text(value) => {
  160. // Safety: we promise not to re-alias this text later on after committing it to the mutation
  161. let unbounded_value: &str = unsafe { std::mem::transmute(*value) };
  162. self.mutations.push(SetAttribute {
  163. name: unbounded_name,
  164. value: unbounded_value,
  165. ns: attribute.namespace,
  166. id,
  167. })
  168. }
  169. AttributeValue::Bool(value) => self.mutations.push(SetBoolAttribute {
  170. name: unbounded_name,
  171. value: *value,
  172. id,
  173. }),
  174. AttributeValue::Listener(_) => {
  175. self.mutations.push(NewEventListener {
  176. // all listeners start with "on"
  177. name: &unbounded_name[2..],
  178. id,
  179. })
  180. }
  181. AttributeValue::Float(_) => todo!(),
  182. AttributeValue::Int(_) => todo!(),
  183. AttributeValue::Any(_) => todo!(),
  184. AttributeValue::None => todo!(),
  185. }
  186. }
  187. fn load_template_root(&mut self, template: &VNode, root_idx: usize) -> ElementId {
  188. // Get an ID for this root since it's a real root
  189. let this_id = self.next_root(template, root_idx);
  190. template.root_ids[root_idx].set(Some(this_id));
  191. self.mutations.push(LoadTemplate {
  192. name: template.template.name,
  193. index: root_idx,
  194. id: this_id,
  195. });
  196. this_id
  197. }
  198. /// We have some dynamic attributes attached to a some node
  199. ///
  200. /// That node needs to be loaded at runtime, so we need to give it an ID
  201. ///
  202. /// If the node in question is on the stack, we just return that ID
  203. ///
  204. /// If the node is not on the stack, we create a new ID for it and assign it
  205. fn assign_static_node_as_dynamic(
  206. &mut self,
  207. path: &'static [u8],
  208. this_id: ElementId,
  209. template: &VNode,
  210. attr_id: usize,
  211. ) -> ElementId {
  212. if path.len() == 1 {
  213. return this_id;
  214. }
  215. // if attribute is on a root node, then we've already created the element
  216. // Else, it's deep in the template and we should create a new id for it
  217. let id = self.next_element(template, template.template.attr_paths[attr_id]);
  218. self.mutations.push(Mutation::AssignId {
  219. path: &path[1..],
  220. id,
  221. });
  222. id
  223. }
  224. /// Insert a new template into the VirtualDom's template registry
  225. fn register_template(&mut self, template: &'b VNode<'b>) {
  226. // First, make sure we mark the template as seen, regardless if we process it
  227. self.templates
  228. .insert(template.template.name, template.template);
  229. // If it's all dynamic nodes, then we don't need to register it
  230. if !template.template.is_completely_dynamic() {
  231. self.mutations.templates.push(template.template);
  232. }
  233. }
  234. pub(crate) fn create_dynamic_node(
  235. &mut self,
  236. template: &'b VNode<'b>,
  237. node: &'b DynamicNode<'b>,
  238. idx: usize,
  239. ) -> usize {
  240. use DynamicNode::*;
  241. match node {
  242. Text(text) => self.create_dynamic_text(template, text, idx),
  243. Placeholder(place) => self.create_placeholder(place, template, idx),
  244. Component(component) => self.create_component_node(template, component, idx),
  245. Fragment(frag) => frag.iter().map(|child| self.create(child)).sum(),
  246. }
  247. }
  248. fn create_dynamic_text(
  249. &mut self,
  250. template: &'b VNode<'b>,
  251. text: &'b VText<'b>,
  252. idx: usize,
  253. ) -> usize {
  254. // Allocate a dynamic element reference for this text node
  255. let new_id = self.next_element(template, template.template.node_paths[idx]);
  256. // Make sure the text node is assigned to the correct element
  257. text.id.set(Some(new_id));
  258. // Safety: we promise not to re-alias this text later on after committing it to the mutation
  259. let value = unsafe { std::mem::transmute(text.value) };
  260. // Add the mutation to the list
  261. self.mutations.push(HydrateText {
  262. id: new_id,
  263. path: &template.template.node_paths[idx][1..],
  264. value,
  265. });
  266. // Since we're hydrating an existing node, we don't create any new nodes
  267. 0
  268. }
  269. pub(crate) fn create_placeholder(
  270. &mut self,
  271. placeholder: &VPlaceholder,
  272. template: &'b VNode<'b>,
  273. idx: usize,
  274. ) -> usize {
  275. // Allocate a dynamic element reference for this text node
  276. let id = self.next_element(template, template.template.node_paths[idx]);
  277. // Make sure the text node is assigned to the correct element
  278. placeholder.id.set(Some(id));
  279. // Assign the ID to the existing node in the template
  280. self.mutations.push(AssignId {
  281. path: &template.template.node_paths[idx][1..],
  282. id,
  283. });
  284. // Since the placeholder is already in the DOM, we don't create any new nodes
  285. 0
  286. }
  287. pub(super) fn create_component_node(
  288. &mut self,
  289. template: &'b VNode<'b>,
  290. component: &'b VComponent<'b>,
  291. idx: usize,
  292. ) -> usize {
  293. use RenderReturn::*;
  294. // Load up a ScopeId for this vcomponent
  295. let scope = self.load_scope_from_vcomponent(component);
  296. match unsafe { self.run_scope(scope).extend_lifetime_ref() } {
  297. Ready(t) => self.mount_component(scope, template, t, idx),
  298. Aborted(t) => self.mount_aborted(template, t),
  299. Async(_) => self.mount_async(template, idx, scope),
  300. }
  301. }
  302. /// Load a scope from a vcomponent. If the props don't exist, that means the component is currently "live"
  303. fn load_scope_from_vcomponent(&mut self, component: &VComponent) -> ScopeId {
  304. component
  305. .props
  306. .take()
  307. .map(|props| {
  308. let unbounded_props: Box<dyn AnyProps> = unsafe { std::mem::transmute(props) };
  309. self.new_scope(unbounded_props, component.name).id
  310. })
  311. .unwrap_or_else(|| component.scope.get().unwrap())
  312. }
  313. fn mount_component(
  314. &mut self,
  315. scope: ScopeId,
  316. parent: &'b VNode<'b>,
  317. new: &'b VNode<'b>,
  318. idx: usize,
  319. ) -> usize {
  320. // Keep track of how many mutations are in the buffer in case we need to split them out if a suspense boundary
  321. // is encountered
  322. let mutations_to_this_point = self.mutations.edits.len();
  323. // Create the component's root element
  324. let created = self.create_scope(scope, new);
  325. // If there are no suspense leaves below us, then just don't bother checking anything suspense related
  326. if self.collected_leaves.is_empty() {
  327. return created;
  328. }
  329. // If running the scope has collected some leaves and *this* component is a boundary, then handle the suspense
  330. let boundary = match self.scopes[scope.0].has_context::<Rc<SuspenseContext>>() {
  331. Some(boundary) => boundary,
  332. _ => return created,
  333. };
  334. // Since this is a boundary, use its placeholder within the template as the placeholder for the suspense tree
  335. let new_id = self.next_element(new, parent.template.node_paths[idx]);
  336. // Now connect everything to the boundary
  337. self.scopes[scope.0].placeholder.set(Some(new_id));
  338. // This involves breaking off the mutations to this point, and then creating a new placeholder for the boundary
  339. // Note that we break off dynamic mutations only - since static mutations aren't rendered immediately
  340. let split_off = unsafe {
  341. std::mem::transmute::<Vec<Mutation>, Vec<Mutation>>(
  342. self.mutations.edits.split_off(mutations_to_this_point),
  343. )
  344. };
  345. boundary.mutations.borrow_mut().edits.extend(split_off);
  346. boundary.created_on_stack.set(created);
  347. boundary
  348. .waiting_on
  349. .borrow_mut()
  350. .extend(self.collected_leaves.drain(..));
  351. // Now assign the placeholder in the DOM
  352. self.mutations.push(AssignId {
  353. id: new_id,
  354. path: &parent.template.node_paths[idx][1..],
  355. });
  356. 0
  357. }
  358. fn mount_aborted(&mut self, parent: &'b VNode<'b>, placeholder: &VPlaceholder) -> usize {
  359. let id = self.next_element(parent, &[]);
  360. self.mutations.push(Mutation::CreatePlaceholder { id });
  361. placeholder.id.set(Some(id));
  362. 1
  363. }
  364. /// Take the rendered nodes from a component and handle them if they were async
  365. ///
  366. /// IE simply assign an ID to the placeholder
  367. fn mount_async(&mut self, template: &VNode, idx: usize, scope: ScopeId) -> usize {
  368. let new_id = self.next_element(template, template.template.node_paths[idx]);
  369. // Set the placeholder of the scope
  370. self.scopes[scope.0].placeholder.set(Some(new_id));
  371. // Since the placeholder is already in the DOM, we don't create any new nodes
  372. self.mutations.push(AssignId {
  373. id: new_id,
  374. path: &template.template.node_paths[idx][1..],
  375. });
  376. 0
  377. }
  378. fn set_slot(
  379. &mut self,
  380. template: &'b VNode<'b>,
  381. slot: &'b Cell<Option<ElementId>>,
  382. id: usize,
  383. ) -> ElementId {
  384. let id = self.next_element(template, template.template.node_paths[id]);
  385. slot.set(Some(id));
  386. id
  387. }
  388. }
  389. fn collect_dyn_node_range(
  390. dynamic_nodes: &mut Peekable<Enumerate<slice::Iter<&[u8]>>>,
  391. root_idx: usize,
  392. ) -> Option<(usize, usize)> {
  393. let start = match dynamic_nodes.peek() {
  394. Some((idx, p)) if p[0] == root_idx as u8 => *idx,
  395. _ => return None,
  396. };
  397. let mut end = start;
  398. while let Some((idx, p)) = dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8) {
  399. if p.len() == 1 {
  400. continue;
  401. }
  402. end = idx;
  403. }
  404. Some((start, end))
  405. }