写一个迷你虚拟 DOM

[dependencies]
dioxus = { version = "=0.7.10", features = ["router", "fullstack"] }
dioxus-core = "=0.7.10"
dioxus-ssr = "=0.7.10"
mini-vdom = { path = "../mini-vdom" }

pub struct Template {
  pub roots: &'static [TNode],
  /// 第 i 个动态节点的路径：第一个字节是根的下标，之后每级一个子节点下标。
  /// 必须按深度优先的顺序编号，load_placeholders 倒着填时靠这个顺序。
  pub node_paths: &'static [&'static [u8]],
  pub attr_paths: &'static [&'static [u8]],
}

pub enum TNode {
  Element { tag: &'static str, attrs: &'static [TAttr], children: &'static [TNode] },
  Text(&'static str),
  Dynamic(usize),
}

pub enum TAttr {
  Static(&'static str, &'static str),
  Dynamic(usize),
}

// div { class: "box", id: "c{count}",
//   h1 { "Counter" }
//   p { "count = {count}" }
//   button { title: "next {next}", "+1" }
//   Child { n: count() }
// }
pub static COUNTER: Template = Template {
  roots: &[TNode::Element {
    tag: "div",
    attrs: &[TAttr::Static("class", "box"), TAttr::Dynamic(0)],
    children: &[
      TNode::Element { tag: "h1", attrs: &[], children: &[TNode::Text("Counter")] },
      TNode::Element { tag: "p", attrs: &[], children: &[TNode::Dynamic(0)] },
      TNode::Element { tag: "button", attrs: &[TAttr::Dynamic(1)], children: &[TNode::Text("+1")] },
      TNode::Dynamic(1),
    ],
  }],
  node_paths: &[&[0, 1, 0], &[0, 3]],
  attr_paths: &[&[0], &[0, 2]],
};

pub struct VNode {
  pub template: &'static Template,
  pub dyn_nodes: Vec<Dyn>,
  pub dyn_attrs: Vec<Attr>,
  pub(crate) mount: Mount,
}

/// 挂到渲染器上之后才有的信息
#[derive(Default)]
pub(crate) struct Mount {
  pub(crate) root_ids: Vec<ElementId>,
  pub(crate) attr_ids: Vec<ElementId>,
  /// 文本和占位存 ElementId，组件存 ScopeId，Fragment 不用
  pub(crate) node_ids: Vec<usize>,
}

pub enum Dyn {
  Text(String),
  Placeholder,
  /// 非空；Dyn::fragment 把空列表变成 Placeholder
  Fragment(Vec<VNode>),
  Component(VComponent),
}

/// 动态属性：None 表示删掉这个属性
pub struct Attr {
  pub name: &'static str,
  pub value: Option<String>,
}

pub struct VComponent {
  pub name: &'static str,
  /// 组件函数的地址，不同就整个替换
  pub(crate) render_fn: usize,
  pub(crate) props: Box<dyn AnyProps>,
}

impl<P: PartialEq + Clone + 'static> AnyProps for VProps<P> {
  fn render(&self) -> VNode {
    (self.render_fn)(&self.props)
  }

  fn memoize(&mut self, new: &dyn Any) -> bool {
    match new.downcast_ref::<P>() {
      Some(new) if *new == self.props => true,
      Some(new) => {
        self.props = new.clone();
        false
      }
      None => false,
    }
  }
  // props()、duplicate() 略
}

pub fn counter() -> VNode {
  let count = use_signal(|| 0_i64);
  COUNT.set(Some(count)); // 交给测试和对照程序从外面写
  let n = count.get();
  log(format!("Counter runs n={n}"));
  VNode::new(
    &COUNTER,
    vec![Dyn::text(format!("count = {n}")), Dyn::component("Child", child, n)],
    vec![Attr::new("id", Some(format!("c{n}"))), Attr::new("title", Some(format!("next {}", n + 1)))],
  )
}

fn child(n: &i64) -> VNode {
  log(format!("Child runs n={n}"));
  let branch = if n % 2 == 0 { VNode::new(&EVEN, vec![], vec![]) } else { VNode::new(&ODD, vec![], vec![]) };
  VNode::new(&CHILD, vec![Dyn::fragment(vec![branch])], vec![])
}

  fn create(&mut self, node: &mut VNode, scope: ScopeId) -> usize {
    let t = node.template;
    node.mount = Mount {
      root_ids: vec![ElementId(0); t.roots.len()],
      attr_ids: vec![ElementId(0); t.attr_paths.len()],
      node_ids: vec![usize::MAX; t.node_paths.len()],
    };
    let mut created = 0;
    for (root, tnode) in t.roots.iter().enumerate() {
      created += match tnode {
        TNode::Dynamic(k) => self.create_dyn(&mut node.dyn_nodes[*k], &mut node.mount.node_ids[*k], scope),
        TNode::Text(_) | TNode::Element { .. } => {
          let id = self.next_element();
          node.mount.root_ids[root] = id;
          self.edits.push(Mutation::LoadTemplate { template: t, index: root, id });
          if let TNode::Element { .. } = tnode {
            // 先写属性：这时模板还是原样，路径有效
            self.write_attrs(node, root);
            // 再填动态节点，倒着填
            self.load_placeholders(node, root, scope);
          }
          1
        }
      };
    }
    created
  }

  fn load_placeholders(&mut self, node: &mut VNode, root: usize, scope: ScopeId) {
    let paths = node.template.node_paths;
    // 倒着走：前面的占位换成多个节点后，后面的路径就错了
    for k in Template::nested_under(paths, root).into_iter().rev() {
      let m = self.create_dyn(&mut node.dyn_nodes[k], &mut node.mount.node_ids[k], scope);
      if m > 0 {
        self.edits.push(Mutation::ReplacePlaceholder { path: &paths[k][1..], m });
      }
    }
  }

---- placeholders_filled_in_reverse stdout ----

thread 'placeholders_filled_in_reverse' (2150688) panicked at tests/mini.rs:12:3:
assertion `left == right` failed
  left: "<div><li>0</li>tail</div>"
 right: "<div><li>0</li><li>1</li>tail</div>"

  fn diff(&mut self, old: &mut VNode, new: &mut VNode, scope: ScopeId) {
    if !std::ptr::eq(old.template, new.template) {
      let m = self.create(new, scope);
      self.remove(old, true, Some(m));
      return;
    }
    new.mount = std::mem::take(&mut old.mount);
    for (k, (a, b)) in old.dyn_attrs.iter().zip(&new.dyn_attrs).enumerate() {
      if a != b {
        let id = new.mount.attr_ids[k];
        self.edits.push(Mutation::SetAttribute { name: b.name, value: b.value.clone(), id });
      }
    }
    for (k, (a, b)) in old.dyn_nodes.iter_mut().zip(new.dyn_nodes.iter_mut()).enumerate() {
      self.diff_dyn(a, b, &mut new.mount.node_ids[k], scope);
    }
  }

  fn diff_dyn(&mut self, old: &mut Dyn, new: &mut Dyn, slot: &mut usize, scope: ScopeId) {
    match (&mut *old, &mut *new) {
      (Dyn::Text(a), Dyn::Text(b)) => {
        if a != b {
          self.edits.push(Mutation::SetText { value: b.clone(), id: ElementId(*slot) });
        }
        return;
      }
      (Dyn::Placeholder, Dyn::Placeholder) => return,
      (Dyn::Fragment(a), Dyn::Fragment(b)) if a.len() == b.len() => {
        for (x, y) in a.iter_mut().zip(b.iter_mut()) {
          self.diff(x, y, scope);
        }
        return;
      }
      (Dyn::Component(a), Dyn::Component(b)) if a.render_fn == b.render_fn => {
        self.diff_component(ScopeId(*slot), b);
        return;
      }
      _ => {}
    }
    // 种类不同、列表长度不同、组件函数不同：先建新的，再让它顶替旧的
    let old_slot = *slot;
    let m = self.create_dyn(new, slot, scope);
    self.remove_dyn(old, old_slot, true, Some(m));
  }

  fn diff_component(&mut self, id: ScopeId, new: &VComponent) {
    let Some(scope) = self.scope_mut(id) else { return };
    if scope.props.memoize(new.props.props()) {
      return;
    }
    let height = scope.height;
    self.run_and_diff(id);
    // 它要是也被 signal 标脏了，这次已经顺带跑过
    self.dirty.remove(&(height, id));
  }

  fn next_element(&mut self) -> ElementId {
    match self.free_ids.pop() {
      Some(id) => ElementId(id),
      None => {
        self.next_id += 1;
        ElementId(self.next_id)
      }
    }
  }

  fn remove(&mut self, node: &mut VNode, emit: bool, replace_with: Option<usize>) {
    let t = node.template;
    // 1. 模板深处带动态属性的元素
    let mut last = None;
    for (k, path) in t.attr_paths.iter().enumerate() {
      let id = node.mount.attr_ids[k];
      if path.len() > 1 && last != Some(id) {
        self.reclaim(id);
        last = Some(id);
      }
    }
    // 2. 模板深处的动态节点：随根一起离开 DOM，不发指令，只回收和销毁
    for k in 0..t.node_paths.len() {
      if t.node_paths[k].len() > 1 {
        self.remove_dyn(&mut node.dyn_nodes[k], node.mount.node_ids[k], false, None);
      }
    }
    // 3. 根：只有根发指令，最后一个根用 ReplaceWith 让栈上的新节点顶替
    let last_root = t.roots.len().saturating_sub(1);
    for (i, root) in t.roots.iter().enumerate() {
      let replace_with = replace_with.filter(|_| i == last_root);
      match root {
        TNode::Dynamic(k) => {
          self.remove_dyn(&mut node.dyn_nodes[*k], node.mount.node_ids[*k], emit, replace_with)
        }
        TNode::Text(_) | TNode::Element { .. } => self.remove_id(node.mount.root_ids[i], emit, replace_with),
      }
    }
  }

#[derive(Default)]
struct Runtime {
  signals: Vec<SignalSlot>,
  hooks: HashMap<ScopeId, Vec<Box<dyn Any>>>,
  hook_index: usize,
  /// 正在运行的组件。dioxus 是 ReactiveContext 栈的栈顶
  current: Option<ScopeId>,
  /// 被标脏、还没进队列的组件。相当于 dioxus 通道里的 SchedulerMsg::Immediate
  dirty: Vec<ScopeId>,
}

struct SignalSlot {
  value: Box<dyn Any>,
  subscribers: BTreeSet<ScopeId>,
}

thread_local! {
  static RT: RefCell<Runtime> = RefCell::new(Runtime::default());
}

  fn read(&self, subscribe: bool) -> T {
    with_rt(|rt| {
      let current = rt.current;
      let slot = &mut rt.signals[self.id];
      if let (true, Some(scope)) = (subscribe, current) {
        slot.subscribers.insert(scope);
      }
      match slot.value.downcast_ref::<T>() {
        Some(v) => v.clone(),
        None => unreachable!("Signal<T> 只由 Signal::<T>::new 创建，槽位不回收也不换类型"),
      }
    })
  }

  /// 写，然后把订阅者全部标脏。和 dioxus 一样不比较新旧值
  pub fn update(&self, f: impl FnOnce(&mut T)) {
    with_rt(|rt| {
      let slot = &mut rt.signals[self.id];
      match slot.value.downcast_mut::<T>() {
        Some(v) => f(v),
        None => unreachable!("Signal<T> 只由 Signal::<T>::new 创建，槽位不回收也不换类型"),
      }
      let subscribers: Vec<ScopeId> = slot.subscribers.iter().copied().collect();
      rt.dirty.extend(subscribers);
    });
  }

pub(crate) fn run_in_scope<R>(scope: ScopeId, f: impl FnOnce() -> R) -> R {
  let saved = with_rt(|rt| {
    for slot in &mut rt.signals {
      slot.subscribers.remove(&scope);
    }
    let saved = (rt.current, rt.hook_index);
    rt.current = Some(scope);
    rt.hook_index = 0;
    saved
  });
  let out = f();
  with_rt(|rt| (rt.current, rt.hook_index) = saved);
  out
}

pub fn use_hook<T: Clone + 'static>(init: impl FnOnce() -> T) -> T {
  let (scope, index, existing) = with_rt(|rt| {
    let scope = match rt.current {
      Some(s) => s,
      None => panic!("use_hook 只能在组件里调用"),
    };
    let index = rt.hook_index;
    rt.hook_index += 1;
    let existing = rt.hooks.get(&scope).and_then(|h| h.get(index)).map(|b| b.downcast_ref::<T>().cloned());
    (scope, index, existing)
  });
  match existing {
    Some(Some(v)) => v,
    Some(None) => panic!("第 {index} 个 hook 的类型和第一次渲染时不同：hook 不能放进条件里"),
    None => {
      // init 里可能再调 Signal::new，所以不能拿着 RT 的借用调它
      let v = init();
      with_rt(|rt| rt.hooks.entry(scope).or_default().push(Box::new(v.clone())));
      v
    }
  }
}

  pub fn render_immediate(&mut self) -> Vec<Mutation> {
    for id in signal::take_dirty() {
      if let Some(scope) = self.scope(id) {
        self.dirty.insert((scope.height, id));
      }
    }
    while let Some((_, id)) = self.dirty.pop_first() {
      self.run_and_diff(id);
    }
    std::mem::take(&mut self.edits)
  }

---- parent_first_child_once stdout ----

thread 'parent_first_child_once' (2224160) panicked at tests/mini.rs:129:3:
assertion `left == right` failed
  left: ["Parent runs p=1", "Kid runs p=1 c=1", "Kid runs p=1 c=1"]
 right: ["Parent runs p=1", "Kid runs p=1 c=1"]

running 9 tests
test hook_type_changes_panics - should panic ... ok
test templates_are_consistent ... ok
test memoized_child_does_not_rerun ... ok
test unsubscribe_when_not_read ... ok
test identical_statics_are_different_templates ... ok
test placeholders_filled_in_reverse ... ok
test parent_first_child_once ... ok
test counter_rebuild_and_updates ... ok
test list_length_change_replaces_whole_fragment ... ok
test result: ok. 9 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s

fn counter() -> Element {
  let count = use_signal(|| 0_i64);
  COUNT.set(Some(count));
  log(format!("Counter runs n={count}"));
  let next = count() + 1;
  rsx! {
    div { class: "box", id: "c{count}",
      h1 { "Counter" }
      p { "count = {count}" }
      button { title: "next {next}", "+1" }
      Child { n: count() }
    }
  }
}

#[component]
fn Child(n: i64) -> Element {
  log(format!("Child runs n={n}"));
  rsx! {
    if n % 2 == 0 {
      span { "even" }
    } else {
      "odd"
    }
  }
}

fn parent() -> Element {
  let p = use_signal(|| 0_i64);
  let c = use_signal(|| 0_i64);
  HANDLES.set(Some((p, c)));
  let pv = p();
  log(format!("Parent runs p={pv}"));
  rsx! {
    h1 { "p={pv}" }
    Kid { p: pv, c }
  }
}

#[component]
fn Kid(p: i64, c: Signal<i64>) -> Element {
  let cv = c();
  log(format!("Kid runs p={p} c={cv}"));
  rsx! { "child {p} {cv}" }
}

fn list() -> Element {
  let n = use_signal(|| 2_i64);
  LEN.set(Some(n));
  rsx! {
    ul {
      for i in 0..n() {
        li { "{i}" }
      }
    }
  }
}

debug_assertions = true
===== 1 counter
--- rebuild: dioxus 9 edits, mini 9 edits
  LoadTemplate <div> index=0 id=1          | LoadTemplate <div> index=0 id=1
  SetAttribute id=Text("c0") id=1          | SetAttribute id=Text("c0") id=1
  AssignId path=[2] id=2                   | AssignId path=[2] id=2
  SetAttribute title=Text("next 1") id=2   | SetAttribute title=Text("next 1") id=2
  LoadTemplate <span> index=0 id=3         | LoadTemplate <span> index=0 id=3
  ReplacePlaceholder path=[3] m=1          | ReplacePlaceholder path=[3] m=1
  CreateTextNode "count = 0" id=4          | CreateTextNode "count = 0" id=4
  ReplacePlaceholder path=[1, 0] m=1       | ReplacePlaceholder path=[1, 0] m=1
  AppendChildren id=0 m=1                  | AppendChildren id=0 m=1
  runs:
  Counter runs n=0                         | Counter runs n=0
  Child runs n=0                           | Child runs n=0
  dioxus ssr:  <div class="box" id="c0"><h1>Counter</h1><p>count = 0</p><button title="next 1">+1</button><span>even</span></div>
  mini ssr / mini edits applied: same
--- count = 1: dioxus 5 edits, mini 5 edits
  SetAttribute id=Text("c1") id=1          | SetAttribute id=Text("c1") id=1
  SetAttribute title=Text("next 2") id=2   | SetAttribute title=Text("next 2") id=2
  SetText "count = 1" id=4                 | SetText "count = 1" id=4
  LoadTemplate "odd" index=0 id=5          | LoadTemplate "odd" index=0 id=5
  ReplaceWith id=3 m=1                     | ReplaceWith id=3 m=1
  runs:
  Counter runs n=1                         | Counter runs n=1
  Child runs n=1                           | Child runs n=1
  dioxus ssr:  <div class="box" id="c1"><h1>Counter</h1><p>count = 1</p><button title="next 2">+1</button>odd</div>
  mini ssr / mini edits applied: same
--- count = 2: dioxus 5 edits, mini 5 edits
  SetAttribute id=Text("c2") id=1          | SetAttribute id=Text("c2") id=1
  SetAttribute title=Text("next 3") id=2   | SetAttribute title=Text("next 3") id=2
  SetText "count = 2" id=4                 | SetText "count = 2" id=4
  LoadTemplate <span> index=0 id=3         | LoadTemplate <span> index=0 id=3
  ReplaceWith id=5 m=1                     | ReplaceWith id=5 m=1
  runs:
  Counter runs n=2                         | Counter runs n=2
  Child runs n=2                           | Child runs n=2
  dioxus ssr:  <div class="box" id="c2"><h1>Counter</h1><p>count = 2</p><button title="next 3">+1</button><span>even</span></div>
  mini ssr / mini edits applied: same
...
===== 2 child dirty first, then parent
--- rebuild: dioxus 5 edits, mini 5 edits
  LoadTemplate <h1> index=0 id=1           | LoadTemplate <h1> index=0 id=1
  CreateTextNode "p=0" id=2                | CreateTextNode "p=0" id=2
  ReplacePlaceholder path=[0] m=1          | ReplacePlaceholder path=[0] m=1
  CreateTextNode "child 0 0" id=3          | CreateTextNode "child 0 0" id=3
  AppendChildren id=0 m=2                  | AppendChildren id=0 m=2
  runs:
  Parent runs p=0                          | Parent runs p=0
  Kid runs p=0 c=0                         | Kid runs p=0 c=0
  dioxus ssr:  <h1>p=0</h1>child 0 0
  mini ssr / mini edits applied: same
--- c = 1, then p = 1: dioxus 2 edits, mini 2 edits
  SetText "p=1" id=2                       | SetText "p=1" id=2
  SetText "child 1 1" id=3                 | SetText "child 1 1" id=3
  runs:
  Parent runs p=1                          | Parent runs p=1
  Kid runs p=1 c=1                         | Kid runs p=1 c=1
  dioxus ssr:  <h1>p=1</h1>child 1 1
  mini ssr / mini edits applied: same
===== 3 list length 2 -> 3 -> 1
--- rebuild: dioxus 9 edits, mini 9 edits
  LoadTemplate <ul> index=0 id=1           | LoadTemplate <ul> index=0 id=1
  LoadTemplate <li> index=0 id=2           | LoadTemplate <li> index=0 id=2
  CreateTextNode "0" id=3                  | CreateTextNode "0" id=3
  ReplacePlaceholder path=[0] m=1          | ReplacePlaceholder path=[0] m=1
  LoadTemplate <li> index=0 id=4           | LoadTemplate <li> index=0 id=4
  CreateTextNode "1" id=5                  | CreateTextNode "1" id=5
  ReplacePlaceholder path=[0] m=1          | ReplacePlaceholder path=[0] m=1
  ReplacePlaceholder path=[0] m=2          | ReplacePlaceholder path=[0] m=2
  AppendChildren id=0 m=1                  | AppendChildren id=0 m=1
  dioxus ssr:  <ul><li>0</li><li>1</li></ul>
  mini ssr / mini edits applied: same
--- n = 3: dioxus 4 edits, mini 11 edits
  LoadTemplate <li> index=0 id=6           | LoadTemplate <li> index=0 id=6
≠ CreateTextNode "2" id=7                  | CreateTextNode "0" id=7
  ReplacePlaceholder path=[0] m=1          | ReplacePlaceholder path=[0] m=1
≠ InsertAfter id=4 m=1                     | LoadTemplate <li> index=0 id=8
≠                                          | CreateTextNode "1" id=9
≠                                          | ReplacePlaceholder path=[0] m=1
≠                                          | LoadTemplate <li> index=0 id=10
≠                                          | CreateTextNode "2" id=11
≠                                          | ReplacePlaceholder path=[0] m=1
≠                                          | Remove id=2
≠                                          | ReplaceWith id=4 m=3
  dioxus ssr:  <ul><li>0</li><li>1</li><li>2</li></ul>
  mini ssr / mini edits applied: same
--- n = 1: dioxus 2 edits, mini 6 edits
≠ Remove id=6                              | LoadTemplate <li> index=0 id=4
≠ Remove id=4                              | CreateTextNode "0" id=5
≠                                          | ReplacePlaceholder path=[0] m=1
≠                                          | Remove id=6
≠                                          | Remove id=8
≠                                          | ReplaceWith id=10 m=1
  dioxus ssr:  <ul><li>0</li></ul>
  mini ssr / mini edits applied: same

        match old.len().cmp(&new.len()) {
            Ordering::Greater => self.remove_nodes(to.as_deref_mut(), &old[new.len()..], None),
            Ordering::Less => self.create_and_insert_after(
                to.as_deref_mut(),
                &new[old.len()..],
                old.last().unwrap(),
                parent,
            ),
            Ordering::Equal => {}
        }

        for (new, old) in new.iter().zip(old.iter()) {
            old.diff_node(new, self, to.as_deref_mut());
        }

--- count = 2 again: dioxus 0 edits, mini 0 edits
  runs:
  Counter runs n=2                         | Counter runs n=2
  dioxus ssr:  <div class="box" id="c2"><h1>Counter</h1><p>count = 2</p><button title="next 3">+1</button><span>even</span></div>
  mini ssr / mini edits applied: same