wip: text block encoder

Author: mrchantey

Cargo.lock

@@ -109,6 +109,9 @@ console_error_panic_hook = "0.1.7"
 [workspace.dependencies.web-sys]
 version = "0.3.76"
 features = [
+	"Text",
+	"Node",
+	"NodeList",
 	# Blob
 	'Blob',
 	'BlobEvent',

Cargo.toml

@@ -18,6 +18,7 @@ serde = ["dep:serde", "dep:bincode"]
 flume = ["dep:flume"]
 
 [dependencies]
+sweet_utils.workspace = true
 thiserror.workspace = true
 anyhow.workspace = true
 flume = { workspace = true, optional = true }

crates/sweet_core/Cargo.toml

@@ -0,0 +1,168 @@
+use crate::prelude::*;
+use wasm_bindgen::JsCast;
+use web_sys::window;
+use web_sys::Document;
+use web_sys::Element;
+use web_sys::HtmlDivElement;
+use web_sys::HtmlElement;
+
+/// A hydrator for working with the dom
+pub struct DomHydrator {
+	constants: HtmlConstants,
+	// cache document reference
+	document: Document,
+	/// sparse set element array, cached for fast reference
+	elements: Vec<Option<Element>>,
+}
+
+impl Default for DomHydrator {
+	fn default() -> Self {
+		Self {
+			constants: Default::default(),
+			document: window().unwrap().document().unwrap(),
+			elements: Default::default(),
+		}
+	}
+}
+
+impl DomHydrator {
+	/// we've found a html node with a matching id
+	#[allow(unused)]
+	fn apply_rsx(
+		&self,
+		el: Element,
+		rsx: RsxNode,
+		cx: &RsxContext,
+	) -> Result<(), HydrationError> {
+		Ok(())
+	}
+
+	/// try to get cached element or find it in the dom.
+	/// This also uncollapses the child text nodes
+	fn get_or_find_element(
+		&mut self,
+		rsx_id: usize,
+	) -> Result<Element, HydrationError> {
+		if let Some(Some(el)) = self.elements.get(rsx_id) {
+			return Ok(el.clone());
+		}
+
+		let query =
+			format!("[{}='{}']", self.constants.id_attribute_key, rsx_id);
+
+		if let Some(el) = self.document.query_selector(&query).unwrap() {
+			self.elements.resize(rsx_id + 1, None);
+			self.elements[rsx_id] = Some(el.clone());
+			self.uncollapse_children(&el, rsx_id)?;
+			Ok(el)
+		} else {
+			Err(HydrationError::InvalidContext(format!(
+				"Could not find node with id: {}",
+				rsx_id
+			)))
+		}
+	}
+
+	fn uncollapse_children(
+		&self,
+		el: &Element,
+		rsx_id: usize,
+	) -> Result<(), HydrationError> {
+		if let Some(encoded) =
+			el.get_attribute(self.constants.block_attribute_key)
+		{
+			let positions =
+				TextBlockEncoder::decode(&encoded).map_err(|err| {
+					HydrationError::InvalidContext(format!(
+						"Could not decode block attribute on element: {}\n{:?}",
+						rsx_id, err
+					))
+				})?;
+
+			let indices = TextBlockPosition::into_split_positions(positions);
+
+			let children = el.child_nodes();
+
+			for (child_index, positions) in indices.into_iter().enumerate() {
+				let child =
+					children.item(child_index as u32).ok_or_else(|| {
+						HydrationError::InvalidContext(format!(
+							"Could not find child at index: {}",
+							child_index
+						))
+					})?;
+				let child: web_sys::Text = child.dyn_into().map_err(|_| {
+					HydrationError::InvalidContext(format!(
+						"Could not convert child to text node"
+					))
+				})?;
+				// let mut cursor = 0;
+				// let text = child.text
+				// for position in positions {
+				// 	let next_split = position - cursor;
+				// 	child.split_text(next_split as u32 - cursor).unwrap();
+				// 	cursor = position as u32;
+				// 	sweet_utils::log!("child: {:?}", child);
+				// }
+			}
+		}
+		Ok(())
+	}
+}
+
+
+impl Hydrator for DomHydrator {
+	/// returns body inner html
+	fn render(&self) -> String {
+		window()
+			.unwrap()
+			.document()
+			.unwrap()
+			.body()
+			.unwrap()
+			.inner_html()
+	}
+
+	fn update_rsx_node(
+		&mut self,
+		rsx: RsxNode,
+		cx: &RsxContext,
+	) -> Result<(), HydrationError> {
+		let el = self.get_or_find_element(cx.element_id)?;
+		match rsx {
+			RsxNode::Fragment(vec) => todo!(),
+			RsxNode::Block {
+				initial,
+				register_effect,
+			} => {
+				sweet_utils::log!("element found! {}", el.tag_name());
+			}
+			RsxNode::Doctype => todo!(),
+			RsxNode::Comment(_) => todo!(),
+			RsxNode::Text(val) => {
+				if let Some(encoded) =
+					el.get_attribute(self.constants.block_attribute_key)
+				{
+					let parts =
+						TextBlockEncoder::decode(&encoded).map_err(|err| {
+							HydrationError::InvalidContext(format!(
+							"Could not decode block attribute on element: {}\n{:?}",
+							cx.element_id,err
+						))
+						})?;
+				} else {
+					return Err(HydrationError::InvalidContext(format!(
+						"Could not find block attribute on element: {}",
+						cx.element_id
+					)));
+				};
+
+				// let block_encoding = self.document.create_text_node(&val);
+			}
+			RsxNode::Element(rsx_element) => todo!(),
+		}
+
+
+		Ok(())
+	}
+}

crates/sweet_core/src/hydration/dom_hydrator.rs

@@ -8,22 +8,15 @@ pub struct RsxContext {
 	/// the number of rsx nodes visited
 	rsx_node_count: usize,
 	/// the rsx id of the parent element
-	pub html_pos: TreePosition,
+	// pub html_pos: TreePosition,
 	/// an id for the current element
 	pub element_id: usize,
-	/// the actual index of the html node child.
-	/// This is post collapse so you may need to
-	/// use [TextBlockEncoder] to split the node
+	/// The index of this child *at rsx time*. This will be incorrect
+	/// post reload because other children may be added or removed
 	pub element_child_index: usize,
-	/// text nodes may sit alongside one another
-	/// in the [HtmlNode] tree so use this value to index
-	/// before collapse
-	pub element_child_index_uncollapsed: usize,
-
-	/// if this is true and a text node is visited,
-	/// the child index will not increment as these will collapse
-	/// in html. The positioning will be encoded by [TextBlockEncoder]
-	prev_text_node: bool,
+	/// in rsx the html may move around during a reload but the indices of
+	/// child blocks is constant so we use that to track the position
+	pub element_child_block_index: usize,
 }
 
 impl Default for RsxContext {
@@ -32,9 +25,7 @@ impl Default for RsxContext {
 			rsx_node_count: 0,
 			element_id: 0,
 			element_child_index: 0,
-			element_child_index_uncollapsed: 0,
-			html_pos: TreePosition::root(),
-			prev_text_node: false,
+			element_child_block_index: 0,
 		}
 	}
 }
@@ -51,33 +42,32 @@ impl RsxContext {
 		match node {
 			RsxNodeDiscriminants::Fragment => {}
 			RsxNodeDiscriminants::Block => {}
-			RsxNodeDiscriminants::Text => self.visit_text_node(),
-			RsxNodeDiscriminants::Doctype => self.visit_non_text_node(),
-			RsxNodeDiscriminants::Comment => self.visit_non_text_node(),
+			RsxNodeDiscriminants::Text
+			| RsxNodeDiscriminants::Doctype
+			| RsxNodeDiscriminants::Comment => self.next_rsx_id(),
 			RsxNodeDiscriminants::Element => {
-				self.visit_non_text_node();
+				self.next_rsx_id();
 				self.element_id = self.rsx_id();
 			}
 		}
 	}
 	/// call this before visiting the children of an element
 	pub fn before_element_children(&mut self) {
-		self.prev_text_node = false;
 		self.element_child_index = 0;
-		self.element_child_index_uncollapsed = 0;
-		self.html_pos.push_child();
+		self.element_child_block_index = 0;
+		// self.html_pos.push_child();
 	}
 
 	/// call this after visiting the children of an element
-	pub fn after_element_children(&mut self) {
-		self.prev_text_node = false;
-		self.html_pos.pop_child();
-	}
+	pub fn after_element_children(&mut self) {}
 
 	pub fn after_visit_next(&mut self, node: &RsxNodeDiscriminants) {
+		self.element_child_index += 1;
 		match node {
 			RsxNodeDiscriminants::Fragment => {}
-			RsxNodeDiscriminants::Block => {}
+			RsxNodeDiscriminants::Block => {
+				self.element_child_block_index += 1;
+			}
 			RsxNodeDiscriminants::Text => {}
 			RsxNodeDiscriminants::Doctype => {}
 			RsxNodeDiscriminants::Comment => {}
@@ -87,27 +77,6 @@ impl RsxContext {
 
 	fn next_rsx_id(&mut self) { self.rsx_node_count += 1; }
 
-	/// visit a real html node
-	fn visit_non_text_node(&mut self) {
-		self.element_child_index += 1;
-		self.element_child_index_uncollapsed += 1;
-		self.prev_text_node = false;
-		self.html_pos.next_sibling();
-		self.next_rsx_id();
-	}
-	
-	/// visit a text node that may be collapsed
-	fn visit_text_node(&mut self) {
-		self.element_child_index_uncollapsed += 1;
-		if !self.prev_text_node {
-			// this will create a new child
-			self.prev_text_node = true;
-			self.element_child_index += 1;
-			self.html_pos.next_sibling();
-		}
-		// otherwise this node will collapse into prev
-		self.next_rsx_id();
-	}
 }
 
 impl std::fmt::Display for RsxContext {