@@ -2,11 +2,22 @@ use crate::{
22 cached_set::{CacheId, CachedSet},
33 change_list::ChangeListBuilder,
44 events::EventsRegistry,
5− node::{Attribute, ElementNode, Listener, Node, NodeKind, TextNode},
5+ node::{Attribute, ElementNode, ElementNodeFlags, Listener, Node, NodeKind, TextNode},
66};
7−use fxhash::FxHashSet;
8−use std::cmp;
7+use fxhash::{FxHashMap, FxHashSet};
8+use std::cmp::Ordering;
9+use std::ops::Range;
10+use std::u32;
911
12+// Diff the `old` node with the `new` node. Emits instructions to modify a
13+// physical DOM node that reflects `old` into something that reflects `new`.
14+//
15+// Upon entry to this function, the physical DOM node must be on the top of the
16+// stack:
17+//
18+// [... node]
19+//
20+// The stack is in the same state when this function exits.
1021pub(crate) fn diff(
1122 cached_set: &CachedSet,
1223 change_list: &mut ChangeListBuilder,
@@ -20,22 +31,18 @@ pub(crate) fn diff(
2031 &NodeKind::Text(TextNode { text: new_text }),
2132 &NodeKind::Text(TextNode { text: old_text }),
2233 ) => {
23− debug!(" both are text nodes");
2434 if new_text != old_text {
25− debug!(" text needs updating");
2635 change_list.set_text(new_text);
2736 }
2837 }
2938
3039 (&NodeKind::Text(_), &NodeKind::Element(_)) => {
31− debug!(" replacing a text node with an element");
3240 create(cached_set, change_list, registry, new, cached_roots);
3341 registry.remove_subtree(&old);
3442 change_list.replace_with();
3543 }
3644
3745 (&NodeKind::Element(_), &NodeKind::Text(_)) => {
38− debug!(" replacing an element with a text node");
3946 create(cached_set, change_list, registry, new, cached_roots);
4047 // Note: text nodes cannot have event listeners, so we don't need to
4148 // remove the old node's listeners from our registry her.
@@ -44,6 +51,7 @@ pub(crate) fn diff(
4451
4552 (
4653 &NodeKind::Element(ElementNode {
54+ flags: new_flags,
4755 tag_name: new_tag_name,
4856 listeners: new_listeners,
4957 attributes: new_attributes,
@@ -51,6 +59,7 @@ pub(crate) fn diff(
5159 namespace: new_namespace,
5260 }),
5361 &NodeKind::Element(ElementNode {
62+ flags: old_flags,
5463 tag_name: old_tag_name,
5564 listeners: old_listeners,
5665 attributes: old_attributes,
@@ -58,9 +67,7 @@ pub(crate) fn diff(
5867 namespace: old_namespace,
5968 }),
6069 ) => {
61− debug!(" updating an element");
6270 if new_tag_name != old_tag_name || new_namespace != old_namespace {
63− debug!(" different tag names or namespaces; creating new element and replacing old element");
6471 create(cached_set, change_list, registry, new, cached_roots);
6572 registry.remove_subtree(&old);
6673 change_list.replace_with();
@@ -72,6 +79,8 @@ pub(crate) fn diff(
7279 cached_set,
7380 change_list,
7481 registry,
82+ new_flags,
83+ old_flags,
7584 old_children,
7685 new_children,
7786 cached_roots,
@@ -113,14 +122,19 @@ pub(crate) fn diff(
113122 }
114123}
115124
125+// Diff event listeners between `old` and `new`.
126+//
127+// The listeners' node must be on top of the stack:
128+//
129+// [... node]
130+//
131+// The stack is left unchanged.
116132fn diff_listeners(
117133 change_list: &mut ChangeListBuilder,
118134 registry: &mut EventsRegistry,
119135 old: &[Listener],
120136 new: &[Listener],
121137) {
122− debug!(" updating event listeners");
123−
124138 'outer1: for new_l in new {
125139 unsafe {
126140 // Safety relies on removing `new_l` from the registry manually at
@@ -151,9 +165,14 @@ fn diff_listeners(
151165 }
152166}
153167
168+// Diff a node's attributes.
169+//
170+// The attributes' node must be on top of the stack:
171+//
172+// [... node]
173+//
174+// The stack is left unchanged.
154175fn diff_attributes(change_list: &mut ChangeListBuilder, old: &[Attribute], new: &[Attribute]) {
155− debug!(" updating attributes");
156−
157176 // Do O(n^2) passes to add/update and remove attributes, since
158177 // there are almost always very few attributes.
159178 'outer: for new_attr in new {
@@ -182,104 +201,629 @@ fn diff_attributes(change_list: &mut ChangeListBuilder, old: &[Attribute], new:
182201 }
183202}
184203
204+// Diff the given set of old and new children.
205+//
206+// The parent must be on top of the stack when this function is entered:
207+//
208+// [... parent]
209+//
210+// The stack is in the same state when this function returns.
185211fn diff_children(
186212 cached_set: &CachedSet,
187213 change_list: &mut ChangeListBuilder,
188214 registry: &mut EventsRegistry,
215+ new_flags: ElementNodeFlags,
216+ old_flags: ElementNodeFlags,
189217 old: &[Node],
190218 new: &[Node],
191219 cached_roots: &mut FxHashSet<CacheId>,
192220) {
193221 if new.is_empty() {
194222 if !old.is_empty() {
195− remove_children(change_list, registry, old);
223+ remove_all_children(change_list, registry, old);
196224 }
197225 return;
198226 }
199227
200228 if old.is_empty() {
201− create_children(cached_set, change_list, registry, new, cached_roots);
229+ create_and_append_children(cached_set, change_list, registry, new, cached_roots);
202230 return;
203231 }
204232
205− debug!(" updating children shared by old and new");
233+ if new_flags.has_keyed_children() && old_flags.has_keyed_children() {
234+ let t = change_list.next_temporary();
235+ diff_keyed_children(cached_set, change_list, registry, old, new, cached_roots);
236+ change_list.set_next_temporary(t);
237+ } else {
238+ diff_non_keyed_children(cached_set, change_list, registry, old, new, cached_roots);
239+ }
240+}
241+
242+// Diffing "keyed" children.
243+//
244+// With keyed children, we care about whether we delete, move, or create nodes
245+// versus mutate existing nodes in place. Presumably there is some sort of CSS
246+// transition animation that makes the virtual DOM diffing algorithm
247+// observable. By specifying keys for nodes, we know which virtual DOM nodes
248+// must reuse (or not reuse) the same physical DOM nodes.
249+//
250+// This is loosely based on Inferno's keyed patching implementation. However, we
251+// have to modify the algorithm since we are compiling the diff down into change
252+// list instructions that will be executed later, rather than applying the
253+// changes to the DOM directly as we compare virtual DOMs.
254+//
255+// https://github.com/infernojs/inferno/blob/36fd96/packages/inferno/src/DOM/patching.ts#L530-L739
256+//
257+// When entering this function, the parent must be on top of the stack:
258+//
259+// [... parent]
260+//
261+// Upon exiting, the stack is in the same state.
262+fn diff_keyed_children(
263+ cached_set: &CachedSet,
264+ change_list: &mut ChangeListBuilder,
265+ registry: &mut EventsRegistry,
266+ old: &[Node],
267+ new: &[Node],
268+ cached_roots: &mut FxHashSet<CacheId>,
269+) {
270+ // First up, we diff all the nodes with the same key at the beginning of the
271+ // children.
272+ //
273+ // `shared_prefix_count` is the count of how many nodes at the start of
274+ // `new` and `old` share the same keys.
275+ let shared_prefix_count =
276+ match diff_keyed_prefix(cached_set, change_list, registry, old, new, cached_roots) {
277+ KeyedPrefixResult::Finished => return,
278+ KeyedPrefixResult::MoreWorkToDo(count) => count,
279+ };
280+
281+ // Next, we find out how many of the nodes at the end of the children have
282+ // the same key. We do _not_ diff them yet, since we want to emit the change
283+ // list instructions such that they can be applied in a single pass over the
284+ // DOM. Instead, we just save this information for later.
285+ //
286+ // `shared_suffix_count` is the count of how many nodes at the end of `new`
287+ // and `old` share the same keys.
288+ let shared_suffix_count = old[shared_prefix_count..]
289+ .iter()
290+ .rev()
291+ .zip(new[shared_prefix_count..].iter().rev())
292+ .take_while(|&(old, new)| old.key() == new.key())
293+ .count();
294+
295+ let old_shared_suffix_start = old.len() - shared_suffix_count;
296+ let new_shared_suffix_start = new.len() - shared_suffix_count;
297+
298+ // Ok, we now hopefully have a smaller range of children in the middle
299+ // within which to re-order nodes with the same keys, remove old nodes with
300+ // now-unused keys, and create new nodes with fresh keys.
301+ diff_keyed_middle(
302+ cached_set,
303+ change_list,
304+ registry,
305+ &old[shared_prefix_count..old_shared_suffix_start],
306+ &new[shared_prefix_count..new_shared_suffix_start],
307+ cached_roots,
308+ shared_prefix_count,
309+ shared_suffix_count,
310+ old_shared_suffix_start,
311+ );
312+
313+ // Finally, diff the nodes at the end of `old` and `new` that share keys.
314+ let old_suffix = &old[old_shared_suffix_start..];
315+ let new_suffix = &new[new_shared_suffix_start..];
316+ debug_assert_eq!(old_suffix.len(), new_suffix.len());
317+ if !old_suffix.is_empty() {
318+ diff_keyed_suffix(
319+ cached_set,
320+ change_list,
321+ registry,
322+ old_suffix,
323+ new_suffix,
324+ cached_roots,
325+ new_shared_suffix_start,
326+ );
327+ }
328+}
329+
330+enum KeyedPrefixResult {
331+ // Fast path: we finished diffing all the children just by looking at the
332+ // prefix of shared keys!
333+ Finished,
334+ // There is more diffing work to do. Here is a count of how many children at
335+ // the beginning of `new` and `old` we already processed.
336+ MoreWorkToDo(usize),
337+}
206338
207− let num_children_to_diff = cmp::min(new.len(), old.len());
208− let mut new_children = new.iter();
209− let mut old_children = old.iter();
339+// Diff the prefix of children in `new` and `old` that share the same keys in
340+// the same order.
341+//
342+// Upon entry of this function, the stack must be:
343+//
344+// [... parent]
345+//
346+// Upon exit, the stack is the same.
347+fn diff_keyed_prefix(
348+ cached_set: &CachedSet,
349+ change_list: &mut ChangeListBuilder,
350+ registry: &mut EventsRegistry,
351+ old: &[Node],
352+ new: &[Node],
353+ cached_roots: &mut FxHashSet<CacheId>,
354+) -> KeyedPrefixResult {
210355 let mut pushed = false;
356+ let mut shared_prefix_count = 0;
211357
212− for (i, (new_child, old_child)) in new_children
213− .by_ref()
214− .zip(old_children.by_ref())
215− .take(num_children_to_diff)
216− .enumerate()
217− {
218− if i == 0 {
358+ for (old, new) in old.iter().zip(new.iter()) {
359+ if old.key() != new.key() {
360+ break;
361+ }
362+
363+ if pushed {
364+ debug_assert!(shared_prefix_count > 0);
365+ change_list.pop_push_next_sibling();
366+ } else {
367+ debug_assert_eq!(shared_prefix_count, 0);
219368 change_list.push_first_child();
220369 pushed = true;
221− } else {
222− debug_assert!(pushed);
223− change_list.pop_push_next_sibling();
224370 }
225371
226− diff(
372+ diff(cached_set, change_list, registry, old, new, cached_roots);
373+ shared_prefix_count += 1;
374+
375+ // At the end of the loop, the stack looks like
376+ //
377+ // [... parent child_we_just_diffed]
378+ debug_assert!(pushed);
379+ }
380+
381+ // If that was all of the old children, then create and append the remaining
382+ // new children and we're finished.
383+ if shared_prefix_count == old.len() {
384+ debug_assert!(
385+ pushed,
386+ "we handle the case of empty children before calling this method, so
387+ `shared_prefix_count` must be greater than zero, and therefore we
388+ must have pushed in the above loop"
389+ );
390+ change_list.pop();
391+ create_and_append_children(
227392 cached_set,
228393 change_list,
229394 registry,
230− old_child,
231− new_child,
395+ &new[shared_prefix_count..],
232396 cached_roots,
233397 );
398+ return KeyedPrefixResult::Finished;
234399 }
235400
236− if old_children.next().is_some() {
237− debug!(" removing extra old children");
238− debug_assert!(new_children.next().is_none());
239− if pushed {
401+ // And if that was all of the new children, then remove all of the remaining
402+ // old children and we're finished.
403+ if shared_prefix_count == new.len() {
404+ // Same as above.
405+ debug_assert!(pushed);
406+ change_list.pop_push_next_sibling();
407+ change_list.remove_self_and_next_siblings();
408+ return KeyedPrefixResult::Finished;
409+ }
410+
411+ if pushed {
412+ debug_assert!(shared_prefix_count > 0);
413+ change_list.pop();
414+ }
415+ KeyedPrefixResult::MoreWorkToDo(shared_prefix_count)
416+}
417+
418+// The most-general, expensive code path for keyed children diffing.
419+//
420+// We find the longest subsequence within `old` of children that are relatively
421+// ordered the same way in `new` (via finding a longest-increasing-subsequence
422+// of the old child's index within `new`). The children that are elements of
423+// this subsequence will remain in place, minimizing the number of DOM moves we
424+// will have to do.
425+//
426+// Upon entry to this function, the stack must be:
427+//
428+// [... parent]
429+//
430+// Upon exit from this function, it will be restored to that same state.
431+fn diff_keyed_middle(
432+ cached_set: &CachedSet,
433+ change_list: &mut ChangeListBuilder,
434+ registry: &mut EventsRegistry,
435+ old: &[Node],
436+ new: &[Node],
437+ cached_roots: &mut FxHashSet<CacheId>,
438+ shared_prefix_count: usize,
439+ shared_suffix_count: usize,
440+ old_shared_suffix_start: usize,
441+) {
442+ // Should have already diffed the shared-key prefixes and suffixes.
443+ debug_assert_ne!(new.first().map(|n| n.key()), old.first().map(|o| o.key()));
444+ debug_assert_ne!(new.last().map(|n| n.key()), old.last().map(|o| o.key()));
445+
446+ // The algorithm below relies upon using `u32::MAX` as a sentinel
447+ // value, so if we have that many new nodes, it won't work. This
448+ // check is a bit academic (hence only enabled in debug), since
449+ // wasm32 doesn't have enough address space to hold that many nodes
450+ // in memory.
451+ debug_assert!(new.len() < u32::MAX as usize);
452+
453+ // Map from each `old` node's key to its index within `old`.
454+ let mut old_key_to_old_index = FxHashMap::default();
455+ old_key_to_old_index.reserve(old.len());
456+ old_key_to_old_index.extend(old.iter().enumerate().map(|(i, o)| (o.key(), i)));
457+
458+ // The set of shared keys between `new` and `old`.
459+ let mut shared_keys = FxHashSet::default();
460+ // Map from each index in `new` to the index of the node in `old` that
461+ // has the same key.
462+ let mut new_index_to_old_index = Vec::with_capacity(new.len());
463+ new_index_to_old_index.extend(new.iter().map(|n| {
464+ let key = n.key();
465+ if let Some(&i) = old_key_to_old_index.get(&key) {
466+ shared_keys.insert(key);
467+ i
468+ } else {
469+ u32::MAX as usize
470+ }
471+ }));
472+
473+ // If none of the old keys are reused by the new children, then we
474+ // remove all the remaining old children and create the new children
475+ // afresh.
476+ if shared_suffix_count == 0 && shared_keys.is_empty() {
477+ if shared_prefix_count == 0 {
478+ remove_all_children(change_list, registry, old);
479+ } else {
240480 change_list.pop_push_next_sibling();
481+ remove_self_and_next_siblings(change_list, registry, &old[shared_prefix_count..]);
482+ }
483+ create_and_append_children(cached_set, change_list, registry, new, cached_roots);
484+ return;
485+ }
486+
487+ // The longest increasing subsequence within `new_index_to_old_index` in
488+ // reverse order (since `lis_with` adds the indices in reverse
489+ // order). We will leave these nodes in place in the DOM, and only move
490+ // nodes that are not part of the LIS. This results in the minimum
491+ // number of DOM nodes moved.
492+ let mut reverse_lis = Vec::with_capacity(new_index_to_old_index.len());
493+ let mut predecessors = vec![0; new_index_to_old_index.len()];
494+ let mut starts = vec![0; new_index_to_old_index.len()];
495+ longest_increasing_subsequence::lis_with(
496+ &new_index_to_old_index,
497+ &mut reverse_lis,
498+ |a, b| a < b,
499+ &mut predecessors,
500+ &mut starts,
501+ );
502+
503+ // Save each of the old children whose keys are reused in the new
504+ // children.
505+ let mut old_index_to_temp = vec![u32::MAX; old.len()];
506+ let mut start = 0;
507+ loop {
508+ let end = (start..old.len())
509+ .find(|&i| {
510+ let key = old[i].key();
511+ !shared_keys.contains(&key)
512+ })
513+ .unwrap_or(old.len());
514+
515+ if end - start > 0 {
516+ let mut t = change_list.save_children_to_temporaries(
517+ shared_prefix_count + start,
518+ shared_prefix_count + end,
519+ );
520+ for i in start..end {
521+ old_index_to_temp[i] = t;
522+ t += 1;
523+ }
524+ }
525+
526+ debug_assert!(end <= old.len());
527+ if end == old.len() {
528+ break;
241529 } else {
242− change_list.push_first_child();
530+ start = end + 1;
243531 }
244− change_list.remove_self_and_next_siblings();
245− pushed = false;
246− } else {
247− debug!(" creating new children");
532+ }
533+
534+ // Remove any old children whose keys were not reused in the new
535+ // children. Remove from the end first so that we don't mess up indices.
536+ let mut removed_count = 0;
537+ for (i, old_child) in old.iter().enumerate().rev() {
538+ if !shared_keys.contains(&old_child.key()) {
539+ change_list.remove_child(i + shared_prefix_count);
540+ removed_count += 1;
541+ }
542+ }
543+
544+ // Whether we have pushed a child onto the stack or not.
545+ let mut pushed = false;
546+
547+ // Now iterate from the end of the new children back to the beginning,
548+ // moving old children to their new destination, diffing them, and
549+ // creating new children as necessary. Note that iterating in reverse
550+ // order lets us use `Node.prototype.insertBefore` to move/insert
551+ // children.
552+ if shared_suffix_count > 0 {
553+ change_list.push_child(old_shared_suffix_start - removed_count);
554+ pushed = true;
555+ }
556+ let mut segment_end = new.len();
557+ for lis_index in reverse_lis {
558+ // Because we use `u32::MAX` as a sentinel value representing "a child
559+ // with this key is not a member of `new`", we filter that out here.
560+ let old_index = new_index_to_old_index[lis_index];
561+ if old_index == u32::MAX as usize {
562+ continue;
563+ }
564+
565+ // A segment begins with a member of the LIS, which will remain in
566+ // place in the DOM, followed by zero or more new children that are
567+ // not members of the LIS. If one of these new children shares a key
568+ // with one of the old children, then we will move that old child in
569+ // the DOM. Otherwise, we create the new child afresh.
570+ debug_assert!(segment_end - lis_index > 0);
571+
572+ // Go through each of the non-LIS child and move-and-diff or create
573+ // it.
574+ diff_and_move_or_create_segment(
575+ cached_set,
576+ change_list,
577+ registry,
578+ old,
579+ new,
580+ cached_roots,
581+ lis_index + 1..segment_end,
582+ &new_index_to_old_index,
583+ &old_index_to_temp,
584+ &mut pushed,
585+ );
586+
587+ // Now we push the member of the LIS and diff it with its
588+ // correspondingly-keyed new child.
589+ let new_child = &new[lis_index];
590+ let temp = old_index_to_temp[old_index];
591+ debug_assert_ne!(temp, u32::MAX);
248592 if pushed {
249593 change_list.pop();
250− pushed = false;
251594 }
252− create_children(
595+ change_list.push_temporary(temp);
596+ pushed = true;
597+ diff(
253598 cached_set,
254599 change_list,
255600 registry,
256− new_children,
601+ &old[old_index],
602+ new_child,
257603 cached_roots,
258604 );
605+
606+ segment_end = lis_index;
259607 }
260608
261− debug!(" done updating children");
609+ // And now diff-and-move or create each of the non-LIS children that
610+ // appear before the first LIS-member.
611+ diff_and_move_or_create_segment(
612+ cached_set,
613+ change_list,
614+ registry,
615+ old,
616+ new,
617+ cached_roots,
618+ 0..segment_end,
619+ &new_index_to_old_index,
620+ &old_index_to_temp,
621+ &mut pushed,
622+ );
623+
262624 if pushed {
263625 change_list.pop();
264626 }
265627}
266628
267−fn create_children<'a, I>(
629+// Diff-and-then-move or create each new node in the given segment. The
630+// segment's nodes must _not_ be members of the LIS (those nodes we will diff in
631+// place elsewhere, and we should not move them nor create them afresh).
632+//
633+// On entering this function, the stack has the parent and optionally the next
634+// sibling after this segment of children:
635+//
636+// [... parent next_sibling] if *pushed == true
637+// [... parent] otherwise
638+//
639+// After exiting, if any children were moved or created, then `pushed` is set to
640+// true and the stack has the first child in this segment on top. Otherwise the
641+// stack is left as it was on entering.
642+//
643+// [... parent child] if *pushed == true
644+// [... parent] otherwise
645+fn diff_and_move_or_create_segment(
646+ cached_set: &CachedSet,
647+ change_list: &mut ChangeListBuilder,
648+ registry: &mut EventsRegistry,
649+ old: &[Node],
650+ new: &[Node],
651+ cached_roots: &mut FxHashSet<CacheId>,
652+ segment: Range<usize>,
653+ new_index_to_old_index: &[usize],
654+ old_index_to_temp: &[u32],
655+ pushed: &mut bool,
656+) {
657+ for new_index in segment.rev() {
658+ let new_child = &new[new_index];
659+ let old_index = new_index_to_old_index[new_index];
660+ if old_index == u32::MAX as usize {
661+ // The key is not reused. Create this new child afresh.
662+ create(cached_set, change_list, registry, new_child, cached_roots);
663+ } else {
664+ // The key is reused. Diff it with the old node and then
665+ // move the old node into its final destination.
666+ let temp = old_index_to_temp[old_index];
667+ debug_assert_ne!(temp, u32::MAX);
668+ change_list.push_temporary(temp);
669+ diff(
670+ cached_set,
671+ change_list,
672+ registry,
673+ new_child,
674+ &old[old_index],
675+ cached_roots,
676+ );
677+ }
678+
679+ // At this point the stack can have one of two shapes.
680+ if *pushed {
681+ // [... parent next_child new_child]
682+ change_list.insert_before();
683+ // [... parent new_child]
684+ } else {
685+ // [... parent new_child]
686+ change_list.append_child();
687+ // [... parent]
688+ change_list.push_last_child();
689+ // [... parent new_child]
690+ *pushed = true;
691+ }
692+
693+ // At the end of each loop iteration, the stack looks like:
694+ //
695+ // [... parent new_child]
696+ debug_assert!(*pushed);
697+ }
698+}
699+
700+// Diff the suffix of keyed children that share the same keys in the same order.
701+//
702+// The parent must be on the stack when we enter this function:
703+//
704+// [... parent]
705+//
706+// When this function exits, the stack remains the same.
707+fn diff_keyed_suffix(
708+ cached_set: &CachedSet,
709+ change_list: &mut ChangeListBuilder,
710+ registry: &mut EventsRegistry,
711+ old: &[Node],
712+ new: &[Node],
713+ cached_roots: &mut FxHashSet<CacheId>,
714+ new_shared_suffix_start: usize,
715+) {
716+ debug_assert_eq!(old.len(), new.len());
717+ debug_assert!(!old.is_empty());
718+
719+ // [... parent]
720+ change_list.push_child(new_shared_suffix_start);
721+ // [... parent new_child]
722+
723+ for (old_child, new_child) in old.iter().zip(new.iter()) {
724+ diff(
725+ cached_set,
726+ change_list,
727+ registry,
728+ old_child,
729+ new_child,
730+ cached_roots,
731+ );
732+
733+ // [... parent this_new_child]
734+ change_list.pop_push_next_sibling();
735+ // [... parent next_new_child]
736+ }
737+
738+ // [... parent]
739+ change_list.pop();
740+}
741+
742+// Diff children that are not keyed.
743+//
744+// The parent must be on the top of the stack when entering this function:
745+//
746+// [... parent]
747+//
748+// The stack is in the same state when this function returns.
749+fn diff_non_keyed_children(
750+ cached_set: &CachedSet,
751+ change_list: &mut ChangeListBuilder,
752+ registry: &mut EventsRegistry,
753+ old: &[Node],
754+ new: &[Node],
755+ cached_roots: &mut FxHashSet<CacheId>,
756+) {
757+ // Handled these cases in `diff_children` before calling this function.
758+ debug_assert!(!new.is_empty());
759+ debug_assert!(!old.is_empty());
760+
761+ for (i, (new_child, old_child)) in new.iter().zip(old.iter()).enumerate() {
762+ if i == 0 {
763+ change_list.push_first_child();
764+ } else {
765+ change_list.pop_push_next_sibling();
766+ }
767+
768+ diff(
769+ cached_set,
770+ change_list,
771+ registry,
772+ old_child,
773+ new_child,
774+ cached_roots,
775+ );
776+ }
777+
778+ match old.len().cmp(&new.len()) {
779+ Ordering::Greater => {
780+ change_list.pop_push_next_sibling();
781+ remove_self_and_next_siblings(change_list, registry, &old[new.len()..]);
782+ }
783+ Ordering::Less => {
784+ change_list.pop();
785+ create_and_append_children(
786+ cached_set,
787+ change_list,
788+ registry,
789+ &new[old.len()..],
790+ cached_roots,
791+ );
792+ }
793+ Ordering::Equal => {
794+ change_list.pop();
795+ }
796+ }
797+}
798+
799+// Create the given children and append them to the parent node.
800+//
801+// The parent node must currently be on top of the stack:
802+//
803+// [... parent]
804+//
805+// When this function returns, the stack is in the same state.
806+fn create_and_append_children(
268807 cached_set: &CachedSet,
269808 change_list: &mut ChangeListBuilder,
270809 registry: &mut EventsRegistry,
271− new: I,
810+ new: &[Node],
272811 cached_roots: &mut FxHashSet<CacheId>,
273−) where
274− I: IntoIterator<Item = &'a Node<'a>>,
275−{
812+) {
276813 for child in new {
277814 create(cached_set, change_list, registry, child, cached_roots);
278815 change_list.append_child();
279816 }
280817}
281818
282−fn remove_children(
819+// Remove all of a node's children.
820+//
821+// The stack must have this shape upon entry to this function:
822+//
823+// [... parent]
824+//
825+// When this function returns, the stack is in the same state.
826+fn remove_all_children(
283827 change_list: &mut ChangeListBuilder,
284828 registry: &mut EventsRegistry,
285829 old: &[Node],
@@ -292,6 +836,35 @@ fn remove_children(
292836 change_list.set_text("");
293837}
294838
839+// Remove the current child and all of its following siblings.
840+//
841+// The stack must have this shape upon entry to this function:
842+//
843+// [... parent child]
844+//
845+// After the function returns, the child is no longer on the stack:
846+//
847+// [... parent]
848+fn remove_self_and_next_siblings(
849+ change_list: &mut ChangeListBuilder,
850+ registry: &mut EventsRegistry,
851+ old: &[Node],
852+) {
853+ for child in old {
854+ registry.remove_subtree(child);
855+ }
856+ change_list.remove_self_and_next_siblings();
857+}
858+
859+// Emit instructions to create the given virtual node.
860+//
861+// The stack may have any shape upon entering this function:
862+//
863+// [...]
864+//
865+// When this function returns, the new node is on top of the stack:
866+//
867+// [... node]
295868fn create(
296869 cached_set: &CachedSet,
297870 change_list: &mut ChangeListBuilder,
@@ -304,6 +877,7 @@ fn create(
304877 change_list.create_text_node(text);
305878 }
306879 NodeKind::Element(ElementNode {
880+ flags: _,
307881 tag_name,
308882 listeners,
309883 attributes,