Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2025-02-17 06:08:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

wip: websys dom working properly

Browse source
This commit is contained in:
Jonathan Kelley 2021-07-30 17:04:04 -04:00
parent d717c22d9c
commit cfa0247cbb
9 changed files with 200 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/core/src/arena.rs
View file

@ -45,7 +45,7 @@ pub struct SharedResources {
pub(crate) heuristics: Shared<HeuristicsEngine>,
pub(crate) tasks: Shared<FuturesUnordered<FiberTask>>,
pub tasks: Shared<FuturesUnordered<FiberTask>>,
/// We use a SlotSet to keep track of the keys that are currently being used.
/// However, we don't store any specific data since the "mirror"

3
packages/core/src/diff.rs
View file

@ -526,7 +526,8 @@ impl<'real, 'bump> DiffMachine<'real, 'bump> {
let mut is_static = true;
let mut added_to_stack = 0;
for child in children {
// add them backwards
for child in children.iter().rev() {
let child_meta = self.create_vnode(child);
is_static = is_static && child_meta.is_static;
added_to_stack += child_meta.added_to_stack;

16
packages/core/src/virtual_dom.rs
View file

@ -19,6 +19,8 @@
//! This module includes just the barebones for a complete VirtualDOM API.
//! Additional functionality is defined in the respective files.
use futures_util::StreamExt;
use crate::hooks::{SuspendedContext, SuspenseHook};
use crate::{arena::SharedResources, innerlude::*};
@ -400,6 +402,20 @@ impl VirtualDom {
Ok(())
}
pub async fn wait_for_event(&mut self) -> Option<EventTrigger> {
let r = self.shared.tasks.clone();
let mut r = r.borrow_mut();
let gh = r.next().await;
gh
}
pub fn any_pending_events(&self) -> bool {
let r = self.shared.tasks.clone();
let r = r.borrow();
!r.is_empty()
}
pub fn base_scope(&self) -> &Scope {
unsafe { self.shared.get_scope(self.base_scope).unwrap() }
}

11
packages/ssr/src/lib.rs
View file

@ -83,6 +83,15 @@ impl<'a> TextRenderer<'a> {
}
write!(f, "{}", text.text)?
}
VNodeKind::Anchor(anchor) => {
//
if self.cfg.indent {
for _ in 0..il {
write!(f, " ")?;
}
}
write!(f, "<!-- -->")?;
}
VNodeKind::Element(el) => {
if self.cfg.indent {
for _ in 0..il {
@ -120,7 +129,7 @@ impl<'a> TextRenderer<'a> {
//
// when the page is loaded, the `querySelectorAll` will be used to collect all the nodes, and then add
// them interpreter's stack
match (self.cfg.pre_render, node.dom_id()) {
match (self.cfg.pre_render, node.try_direct_id()) {
(true, Some(id)) => {
write!(f, " dio_el=\"{}\"", id)?;
//

6
packages/web/Cargo.toml
View file

@ -78,7 +78,7 @@ uuid = { version = "0.8.2", features = ["v4", "wasm-bindgen"] }
dioxus-hooks = { path = "../hooks" }
gloo-timers = { version = "0.2.1", features = ["futures"] }
serde = { version = "1.0.126", features = ["derive"] }
surf = { version = "2.2.0", default-features = false, features = [
"wasm-client",
] }
# surf = { git = "https://github.com/http-rs/surf", default-features = false, features = [
# "wasm-client",
# ] }
# wasm-timer = "0.2.5"

45
packages/web/examples/basic.rs Normal file
View file

@ -0,0 +1,45 @@
//! Basic example that renders a simple VNode to the browser.
use dioxus::events::on::MouseEvent;
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
use dioxus_hooks::*;
use dioxus_html as dioxus_elements;
// use wasm_timer;
use std::future::Future;
use std::{pin::Pin, time::Duration};
use dioxus::prelude::*;
use dioxus_web::*;
fn main() {
// Setup logging
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
console_error_panic_hook::set_once();
// Run the app
dioxus_web::launch(App, |c| c)
}
static App: FC<()> = |cx| {
let mut count = use_state(cx, || 0);
cx.render(rsx! {
div {
button {
"add"
onclick: move |_| count += 1
}
ul {
{(0..*count).map(|f| rsx!{
li { "a - {f}" }
li { "b - {f}" }
li { "c - {f}" }
})}
}
}
})
};

124
packages/web/src/dom.rs
View file

@ -48,6 +48,7 @@ impl WebsysDom {
let sender_callback = Arc::new(move |ev| {
let c = sender.clone();
wasm_bindgen_futures::spawn_local(async move {
log::debug!("sending event through channel");
c.send(ev).await.unwrap();
});
});
@ -102,7 +103,7 @@ impl WebsysDom {
DomEdit::PushRoot { id: root } => self.push(root),
DomEdit::PopRoot => self.pop(),
DomEdit::AppendChildren { many } => self.append_children(many),
DomEdit::ReplaceWith { many } => self.replace_with(many),
DomEdit::ReplaceWith { n, m } => self.replace_with(n, m),
DomEdit::Remove => self.remove(),
DomEdit::RemoveAllChildren => self.remove_all_children(),
DomEdit::CreateTextNode { text, id } => self.create_text_node(text, id),
@ -113,12 +114,15 @@ impl WebsysDom {
event_name: event,
scope,
mounted_node_id: node,
element_id: idx,
} => self.new_event_listener(event, scope, idx, node),
} => self.new_event_listener(event, scope, node),
DomEdit::RemoveEventListener { event } => todo!(),
DomEdit::SetText { text } => self.set_text(text),
DomEdit::SetAttribute { field, value, ns } => self.set_attribute(field, value, ns),
DomEdit::RemoveAttribute { name } => self.remove_attribute(name),
DomEdit::InsertAfter { n } => self.insert_after(n),
DomEdit::InsertBefore { n } => self.insert_before(n),
}
}
}
@ -169,37 +173,51 @@ impl WebsysDom {
}
}
fn replace_with(&mut self, many: u32) {
fn replace_with(&mut self, n: u32, m: u32) {
log::debug!("Called [`replace_with`]");
let new_node = self.stack.pop();
let old_node = self.stack.pop();
// TODO: use different-sized replace withs
if many == 1 {
if old_node.has_type::<Element>() {
old_node
.dyn_ref::<Element>()
.unwrap()
.replace_with_with_node_1(&new_node)
.unwrap();
} else if old_node.has_type::<web_sys::CharacterData>() {
old_node
.dyn_ref::<web_sys::CharacterData>()
.unwrap()
.replace_with_with_node_1(&new_node)
.unwrap();
} else if old_node.has_type::<web_sys::DocumentType>() {
old_node
.dyn_ref::<web_sys::DocumentType>()
.unwrap()
.replace_with_with_node_1(&new_node)
.unwrap();
} else {
panic!("Cannot replace node: {:?}", old_node);
}
let mut new_nodes = vec![];
for _ in 0..m {
new_nodes.push(self.stack.pop());
}
self.stack.push(new_node);
let mut old_nodes = vec![];
for _ in 0..n {
old_nodes.push(self.stack.pop());
}
let old = old_nodes[0].clone();
let arr: js_sys::Array = new_nodes.iter().collect();
let el = old.dyn_into::<Element>().unwrap();
el.replace_with_with_node(&arr).unwrap();
// let arr = js_sys::Array::from();
// TODO: use different-sized replace withs
// if m == 1 {
// if old_node.has_type::<Element>() {
// old_node
// .dyn_ref::<Element>()
// .unwrap()
// .replace_with_with_node_1(&new_node)
// .unwrap();
// } else if old_node.has_type::<web_sys::CharacterData>() {
// old_node
// .dyn_ref::<web_sys::CharacterData>()
// .unwrap()
// .replace_with_with_node_1(&new_node)
// .unwrap();
// } else if old_node.has_type::<web_sys::DocumentType>() {
// old_node
// .dyn_ref::<web_sys::DocumentType>()
// .unwrap()
// .replace_with_with_node_1(&new_node)
// .unwrap();
// } else {
// panic!("Cannot replace node: {:?}", old_node);
// }
// }
// self.stack.push(new_node);
}
fn remove(&mut self) {
@ -213,7 +231,8 @@ impl WebsysDom {
}
fn create_placeholder(&mut self, id: u64) {
self.create_element("pre", None, id)
self.create_element("pre", None, id);
self.set_attribute("hidden", "", None);
}
fn create_text_node(&mut self, text: &str, id: u64) {
// let nid = self.node_counter.next();
@ -255,14 +274,8 @@ impl WebsysDom {
// ElementId::new(nid)
}
fn new_event_listener(
&mut self,
event: &'static str,
scope: ScopeId,
_element_id: usize,
real_id: u64,
) {
let (_on, event) = event.split_at(2);
fn new_event_listener(&mut self, event: &'static str, scope: ScopeId, real_id: u64) {
// let (_on, event) = event.split_at(2);
let event = wasm_bindgen::intern(event);
// attach the correct attributes to the element
@ -367,8 +380,37 @@ impl WebsysDom {
}
}
fn raw_node_as_any(&self) -> &mut dyn std::any::Any {
todo!()
fn insert_after(&mut self, n: u32) {
let mut new_nodes = vec![];
for _ in 0..n {
new_nodes.push(self.stack.pop());
}
let after = self.stack.top().clone();
let arr: js_sys::Array = new_nodes.iter().collect();
let el = after.dyn_into::<Element>().unwrap();
el.after_with_node(&arr).unwrap();
// let mut old_nodes = vec![];
// for _ in 0..n {
// old_nodes.push(self.stack.pop());
// }
// let el = self.stack.top();
}
fn insert_before(&mut self, n: u32) {
let n = n as usize;
let root = self
.stack
.list
.get(self.stack.list.len() - n)
.unwrap()
.clone();
for _ in 0..n {
let el = self.stack.pop();
root.insert_before(&el, None).unwrap();
}
}
}

70
packages/web/src/lib.rs
View file

@ -75,61 +75,55 @@ pub async fn run_with_props<T: Properties + 'static>(
root_props: T,
cfg: WebConfig,
) -> Result<()> {
let dom = VirtualDom::new_with_props(root, root_props);
let mut dom = VirtualDom::new_with_props(root, root_props);
let root_el = load_document().get_element_by_id("dioxus_root").unwrap();
// let tasks = dom.shared.tasks.clone();
let root_el = load_document().get_element_by_id("dioxusroot").unwrap();
let mut websys_dom = dom::WebsysDom::new(root_el, cfg);
// let mut edits = Vec::new();
// internal_dom.rebuild(&mut websys_dom, &mut edits)?;
// websys_dom.process_edits(&mut edits);
let mut edits = Vec::new();
dom.rebuild(&mut websys_dom, &mut edits)?;
websys_dom.process_edits(&mut edits);
log::info!("Going into event loop");
// #[allow(unreachable_code)]
loop {
todo!();
// let trigger = {
// let real_queue = websys_dom.wait_for_event();
// if internal_dom.tasks.is_empty() {
// log::info!("tasks is empty, waiting for dom event to trigger soemthing");
// real_queue.await
// } else {
// log::info!("tasks is not empty, waiting for either tasks or event system");
// let task_queue = (&mut internal_dom.tasks).next();
let trigger = {
let real_queue = websys_dom.wait_for_event();
if dom.any_pending_events() {
log::info!("tasks is not empty, waiting for either tasks or event system");
let mut task = dom.wait_for_event();
// pin_mut!(real_queue);
// pin_mut!(task_queue);
pin_mut!(real_queue);
pin_mut!(task);
// match futures_util::future::select(real_queue, task_queue).await {
// futures_util::future::Either::Left((trigger, _)) => trigger,
// futures_util::future::Either::Right((trigger, _)) => trigger,
// }
// }
// };
match futures_util::future::select(real_queue, task).await {
futures_util::future::Either::Left((trigger, _)) => trigger,
futures_util::future::Either::Right((trigger, _)) => trigger,
}
} else {
log::info!("tasks is empty, waiting for dom event to trigger soemthing");
real_queue.await
}
};
// if let Some(real_trigger) = trigger {
// log::info!("event received");
if let Some(real_trigger) = trigger {
log::info!("event received");
// internal_dom.queue_event(real_trigger);
dom.queue_event(real_trigger);
// let mut edits = Vec::new();
// internal_dom
// .progress_with_event(&mut websys_dom, &mut edits)
// .await?;
// websys_dom.process_edits(&mut edits);
// }
let mut edits = Vec::new();
dom.progress_with_event(&mut websys_dom, &mut edits).await?;
websys_dom.process_edits(&mut edits);
}
}
// should actually never return from this, should be an error, rustc just cant see it
Ok(())
}
fn iter_node_list() {}
// struct NodeListIter {
// node_list: NodeList,
// }
// impl Iterator for NodeListIter {}
struct HydrationNode {
id: usize,
node: Node,

20
packages/web/src/nodeslab.rs
View file

@ -8,17 +8,12 @@ pub struct NodeSlab {
impl NodeSlab {
pub fn new(capacity: usize) -> NodeSlab {
NodeSlab {
nodes: Vec::with_capacity(capacity),
}
}
fn insert_and_extend(&mut self, node: Node, id: usize) {
if id > self.nodes.len() * 3 {
panic!("Trying to insert an element way too far out of bounds");
let mut nodes = Vec::with_capacity(capacity);
for x in 0..5 {
nodes.push(None);
}
if id < self.nodes.len() {}
NodeSlab { nodes }
}
}
impl Index<usize> for NodeSlab {
@ -30,11 +25,12 @@ impl Index<usize> for NodeSlab {
impl IndexMut<usize> for NodeSlab {
fn index_mut(&mut self, index: usize) -> &mut Self::Output {
if index >= self.nodes.len() * 3 {
if index >= self.nodes.capacity() * 3 {
panic!("Trying to mutate an element way too far out of bounds");
}
if index > self.nodes.len() {
self.nodes.resize_with(index, || None);
if index + 1 > self.nodes.len() {
self.nodes.resize_with(index + 1, || None);
}
&mut self.nodes[index]
}