一次点击

use std::{any::Any, rc::Rc, time::Duration};

use dioxus::prelude::*;
use dioxus_core::{ElementId, Event};
use dioxus_html::{PlatformEventData, SerializedHtmlEventConverter, SerializedMouseData};

fn app() -> Element {
  let mut count = use_signal(|| 0);
  println!("  [app 运行] count = {}", count.peek());
  use_effect(move || println!("  [effect] count = {}", count()));
  rsx! {
    div { class: "c",
      "count = {count}"
      button { onclick: move |_| count += 1, "+" }
    }
  }
}

async fn wait(dom: &mut VirtualDom, label: &str) {
  let ready = tokio::time::timeout(Duration::from_millis(50), dom.wait_for_work()).await;
  println!("{label}: wait_for_work {}", if ready.is_ok() { "返回了（有脏 scope）" } else { "50ms 内没返回（没有脏 scope）" });
}

#[tokio::main(flavor = "current_thread")]
async fn main() {
  if std::env::var("TRACE").is_ok() {
    tracing_subscriber::fmt()
      .with_env_filter("dioxus_signals=trace,dioxus_core::reactive_context=trace,dioxus_core::virtual_dom=trace")
      .without_time()
      .with_ansi(false)
      .init();
  }
  set_event_converter(Box::new(SerializedHtmlEventConverter));
  let mut dom = VirtualDom::new(app);

  println!("--- 1. rebuild_to_vec ---");
  let m = dom.rebuild_to_vec();
  for e in &m.edits {
    println!("{e:?}");
  }
  println!("{}", dioxus_ssr::render(&dom));
  wait(&mut dom, "rebuild 之后").await;

  println!("--- 2. handle_event(\"click\", .., ElementId(2)) ---");
  let event = Event::new(
    Rc::new(PlatformEventData::new(Box::<SerializedMouseData>::default())) as Rc<dyn Any>,
    true,
  );
  dom.runtime().handle_event("click", event, ElementId(2));
  println!("handle_event 返回");
  wait(&mut dom, "点击之后").await;

  println!("--- 3. render_immediate_to_vec ---");
  let m = dom.render_immediate_to_vec();
  for e in &m.edits {
    println!("{e:?}");
  }
  println!("{}", dioxus_ssr::render(&dom));
  wait(&mut dom, "渲染之后").await;
}

--- 1. rebuild_to_vec ---
  [app 运行] count = 0
LoadTemplate { index: 0, id: ElementId(1) }
AssignId { path: [1], id: ElementId(2) }
NewEventListener { name: "click", id: ElementId(2) }
CreateTextNode { value: "count = 0", id: ElementId(3) }
ReplacePlaceholder { path: [0], m: 1 }
AppendChildren { id: ElementId(0), m: 1 }
<div class="c">count = 0<button>+</button></div>
  [effect] count = 0
rebuild 之后: wait_for_work 50ms 内没返回（没有脏 scope）
--- 2. handle_event("click", .., ElementId(2)) ---
handle_event 返回
点击之后: wait_for_work 返回了（有脏 scope）
--- 3. render_immediate_to_vec ---
  [app 运行] count = 1
SetText { value: "count = 1", id: ElementId(3) }
<div class="c">count = 1<button>+</button></div>
  [effect] count = 1
渲染之后: wait_for_work 50ms 内没返回（没有脏 scope）

--- 2. handle_event("click", .., ElementId(2)) ---
TRACE dioxus_signals::signal: Write on signal at src/bin/click.rs:14:34 finished, updating subscribers
TRACE dioxus_core::reactive_context: Marking reactive context created at src/bin/click.rs:10:3 as dirty
TRACE dioxus_core::reactive_context: Marking reactive context created at ~/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-core-0.7.10/src/reactive_context.rs:116:21 as dirty
handle_event 返回
TRACE VirtualDom::wait_for_work:VirtualDom::process_events: dioxus_core::virtual_dom: Marking task Task { id: DefaultKey(1v1), unsend: PhantomData<*const ()> } (spawned in ScopeId(3)) as dirty
TRACE VirtualDom::wait_for_work:VirtualDom::process_events: dioxus_core::virtual_dom: Marking scope ScopeId(3) as dirty
点击之后: wait_for_work 返回了（有脏 scope）
--- 3. render_immediate_to_vec ---
  [app 运行] count = 1
TRACE VirtualDom::render_immediate: dioxus_signals::signal: Subscribing to the reactive context ReactiveContext(for scope: ScopeId(3, "root"))
TRACE VirtualDom::render_immediate: dioxus_signals::signal: Subscribing to the reactive context ReactiveContext(for scope: ScopeId(3, "root"))
TRACE VirtualDom::render_immediate: dioxus_signals::signal: Subscribing to the reactive context ReactiveContext(for scope: ScopeId(3, "root"))
SetText { value: "count = 1", id: ElementId(3) }
<div class="c">count = 1<button>+</button></div>
TRACE VirtualDom::wait_for_work:VirtualDom::process_events:VirtualDom::poll_tasks: dioxus_signals::signal: Subscribing to the reactive context ReactiveContext created at src/bin/click.rs:10:3
  [effect] count = 1
渲染之后: wait_for_work 50ms 内没返回（没有脏 scope）

use dioxus::logger::tracing::info;
use dioxus::prelude::*;

fn app() -> Element {
  let mut count = use_signal(|| 0);
  info!("app 运行 count = {}", count.peek());
  use_effect(move || info!("effect count = {}", count()));
  rsx! {
    div { class: "c",
      "count = {count}"
      button {
        id: "inc",
        onclick: move |_| {
          count += 1;
          info!("onclick 写完 count");
        },
        "+"
      }
    }
  }
}

fn main() {
  dioxus::launch(app);
}

const text = () => document.querySelector('div.c').textContent;
console.log('before click(): ' + text());
document.querySelector('#inc').click();
console.log('click() 返回后（同步）: ' + text());
await Promise.resolve();
console.log('一个微任务之后: ' + text());
await new Promise((r) => setTimeout(r, 0));
console.log('setTimeout 0 之后: ' + text());

[console.log] INFO src/main.rs:6 app 运行 count = 0
[console.log] INFO src/main.rs:7 effect count = 0
--- 点击前 ---
#main: <div id="main" data-dioxus-id="0"><div class="c">count = 0<button id="inc" data-dioxus-id="2">+</button></div></div>
监听器 #main: click
监听器 div.c: (none)
监听器 #inc: (none)
--- 点击 ---
[console.log] before click(): count = 0+
[console.log] INFO src/main.rs:15 onclick 写完 count
[console.log] click() 返回后（同步）: count = 0+
[console.log] INFO src/main.rs:6 app 运行 count = 1
[console.log] INFO src/main.rs:7 effect count = 1
[console.log] 一个微任务之后: count = 1+
[console.log] setTimeout 0 之后: count = 1+
MutationObserver: ["characterData \"count = 0\" -> \"count = 1\""]
--- 点击后 ---
#main: <div id="main" data-dioxus-id="0"><div class="c">count = 1<button id="inc" data-dioxus-id="2">+</button></div></div>

  createListener(event_name: string, element: HTMLElement, bubbles: boolean) {
    // ...
    if (bubbles) {
      if (this.global[event_name] === undefined) {
        this.global[event_name] = { active: 1, callback: this.handler };
        this.root.addEventListener(event_name, this.handler);
      } else {
        this.global[event_name].active++;
      }
    } else {
      const id = element.getAttribute("data-dioxus-id");
      if (!this.local[id]) {
        this.local[id] = {};
      }
      element.addEventListener(event_name, this.handler);
    }
  }

        let handler: Closure<dyn Fn(&Event)> = Closure::wrap(Box::new({
            let runtime = runtime.clone();
            move |web_sys_event: &web_sys::Event| {
                let name = web_sys_event.type_();
                let element = walk_event_for_id(web_sys_event);
                let bubbles = web_sys_event.bubbles();

                let Some((element, target)) = element else {
                    return;
                };

                // ...
                if !event_type_matches(name.as_str(), web_sys_event) {
                    return;
                }

                let data = virtual_event_from_websys_event(web_sys_event.clone(), target);

                let event = dioxus_core::Event::new(Rc::new(data) as Rc<dyn Any>, bubbles);
                runtime.handle_event(name.as_str(), event.clone(), element);

                // Prevent the default action if the user set prevent default on the event
                let prevent_default = !event.default_action_enabled();
                if prevent_default {
                    web_sys_event.prevent_default();
                }
            }
        }));

    pub fn handle_event(self: &Rc<Self>, name: &str, event: Event<dyn Any>, element: ElementId) {
        let _runtime = RuntimeGuard::new(self.clone());
        let elements = self.elements.borrow();

        if let Some(Some(parent_path)) = elements.get(element.0).copied() {
            if event.propagates() {
                self.handle_bubbling_event(parent_path, name, event);
            } else {
                self.handle_non_bubbling_event(parent_path, name, event);
            }
        }
    }

            fn add_assign(&mut self, rhs: T) {
                self.with_mut(|v| *v = *v + rhs)
            }

impl<T: 'static, S: Storage<SignalData<T>> + 'static> Drop for SignalSubscriberDrop<T, S> {
    fn drop(&mut self) {
        #[cfg(debug_assertions)]
        {
            tracing::trace!(
                "Write on signal at {} finished, updating subscribers",
                self.origin
            );
        }
        self.signal.update_subscribers();
    }
}

            let mut subscribers = std::mem::take(&mut *inner.subscribers.lock().unwrap());
            subscribers.retain(|reactive_context| reactive_context.mark_dirty());
            // Extend the subscribers list instead of overwriting it in case a subscriber is added while reactive contexts are marked dirty
            inner.subscribers.lock().unwrap().extend(subscribers);

        let sender = runtime.sender.clone();
        let update_scope = move || {
            _ = sender.unbounded_send(SchedulerMsg::Immediate(id));
        };

    loop {
        // ...
        {
            let work = virtual_dom.wait_for_work().fuse();
            pin_mut!(work);
            // ...
                select! {
                    _ = work => {},
                    hyd = rx_hydration => {
                        // ...
                    }
                }
        }
        // ...
        virtual_dom.render_immediate(&mut websys_dom);
        // ...
        websys_dom.flush_edits();
    }

    pub fn render_immediate(&mut self, to: &mut impl WriteMutations) {
        // ...
        self.process_events();

        // ...
        let _runtime = RuntimeGuard::new(self.runtime.clone());
        while let Some(work) = self.pop_work() {
            match work {
                Work::PollTask(task) => {
                    _ = self.runtime.handle_task_wakeup(task);
                    // Make sure we process any new events
                    self.queue_events();
                }
                Work::RerunScope(scope) => {
                    // If the scope is dirty, run the scope and get the mutations
                    self.runtime.clone().while_rendering(|| {
                        self.run_and_diff_scope(Some(to), scope.id);
                    });
                }
            }
        }

        self.runtime.finish_render();
    }

        // If the templates are different, we need to replace the entire template
        if self.template != new.template {
            // ...
            return self.replace(std::slice::from_ref(new), parent, dom, to);
        }

        self.move_mount_to(new, dom);
        // ...
        if let Some(to) = to.as_deref_mut() {
            self.diff_attributes(new, dom, to);
        }

        // Now diff the dynamic nodes
        let mount_id = new.mount.get();
        for (dyn_node_idx, (old, new)) in self
            .dynamic_nodes
            .iter()
            .zip(new.dynamic_nodes.iter())
            .enumerate()
        {
            self.diff_dynamic_node(mount_id, dyn_node_idx, old, new, dom, to.as_deref_mut())
        }

    fn set_node_text(&mut self, value: &str, id: ElementId) {
        if self.skip_mutations() {
            return;
        }
        self.interpreter.set_text(id.0 as u32, value)
    }

    fn set_text(id: u32, text: &str) {
        "{this.nodes[$id$].textContent = $text$;}"
    }

            // At this point, we have finished running all tasks that are pending and we haven't found any scopes to rerun. This means it is safe to run our lowest priority work: effects
            while let Some(effect) = self.pop_effect() {
                effect.run();
                // Check if any new scopes are queued for rerun
                self.queue_events();
                if self.has_dirty_scopes() {
                    return;
                }
            }

[console.log] before click(): count = 0+
[console.log] INFO src/main.rs:15 onclick 写完 count
[console.log] click() 返回后（同步）: count = 0+
[console.log] INFO src/main.rs:6 app 运行 count = 1
[console.log] INFO src/main.rs:7 effect count = 1
[console.log] 一个微任务之后: count = 1+