[mdv] implement full DOM stability

pkg/mdv/lib/src/bindings.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 part of mdv;
 
 // This code is a port of Model-Driven-Views:
 // https://github.com/polymer-project/mdv
 // The code mostly comes from src/template_element.js
 
@@ skipping 259 matching lines @@
 
     var instanceRecord = new TemplateInstance(
         fragment.$dom_firstChild, fragment.$dom_lastChild, model);
 
     var node = instanceRecord.firstNode;
     while (node != null) {
       _mdv(node)._templateInstance = instanceRecord;
       node = node.nextNode;
     }
   }
-
-  static void _removeAllBindingsRecursively(Node node) {
-    _nodeOrCustom(node).unbindAll();
-    for (var c = node.$dom_firstChild; c != null; c = c.nextNode) {
-      _removeAllBindingsRecursively(c);
-    }
-  }
-
-  static void _removeChild(Node parent, Node child) {
-    _mdv(child)._templateInstance = null;
-    if (child is Element && (child as Element).isTemplate) {
-      Element childElement = child;
-      // Make sure we stop observing when we remove an element.
-      var templateIterator = _mdv(childElement)._templateIterator;
-      if (templateIterator != null) {
-        templateIterator.abandon();
-        _mdv(childElement)._templateIterator = null;
-      }
-    }
-    child.remove();
-    _removeAllBindingsRecursively(child);
-  }
 }
 
 class _BindingToken {
   final String value;
   final bool isBinding;
 
   _BindingToken(this.value, {this.isBinding: false});
 
   bool get isText => !isBinding;
 }
 
 class _TemplateIterator {
   final Element _templateElement;
   final List<Node> terminators = [];
   final CompoundBinding inputs;
   List iteratedValue;
+  Object _lastValue;
 
   StreamSubscription _sub;
   StreamSubscription _valueBinding;
 
   _TemplateIterator(this._templateElement)
     : inputs = new CompoundBinding(resolveInputs) {
 
     _valueBinding = new PathObserver(inputs, 'value').bindSync(valueChanged);
   }
 
   static Object resolveInputs(Map values) {
     if (values.containsKey('if') && !_Bindings._toBoolean(values['if'])) {
       return null;
     }
 
     if (values.containsKey('repeat')) {
       return values['repeat'];
     }
 
     if (values.containsKey('bind')) {
       return [values['bind']];
     }
 
     return null;
   }
 
   void valueChanged(value) {
-    clear();
-    if (value is! List) return;
+    // TODO(jmesserly): should PathObserver do this for us?
+    var oldValue = _lastValue;
+    _lastValue = value;
 
+    if (value is! List) {

[justinfagnani, 2013/06/26 20:01:13]

List -> Iterable?

[Jennifer Messerly, 2013/06/26 20:47:50]

good question. We do use indexing, but maybe if it's an Iterable we should call
.toList on it. 
I filed https://code.google.com/p/dart/issues/detail?id=11535

+      value = [];
+    }
+
+    unobserve();
     iteratedValue = value;
 
     if (value is Observable) {
       _sub = value.changes.listen(_handleChanges);
     }
 
-    int len = iteratedValue.length;
-    if (len > 0) {
-      _handleChanges([new ListChangeRecord(0, addedCount: len)]);
-    }
+    int addedCount = iteratedValue.length;
+    var removedCount = oldValue is List ? (oldValue as List).length : 0;
+    if (addedCount == 0 && removedCount == 0) return; // nothing to do.
+
+    _handleChanges([new ListChangeRecord(0, addedCount: addedCount,
+        removedCount: removedCount)]);
   }
 
   Node getTerminatorAt(int index) {
     if (index == -1) return _templateElement;
     var terminator = terminators[index];
     if (terminator is Element && (terminator as Element).isTemplate) {
       var subIterator = _mdv(terminator)._templateIterator;
       if (subIterator != null) {
         return subIterator.getTerminatorAt(subIterator.terminators.length - 1);
       }
     }
 
     return terminator;
   }
 
-  void insertInstanceAt(int index, Node fragment) {
+  void insertInstanceAt(int index, List<Node> instanceNodes) {
     var previousTerminator = getTerminatorAt(index - 1);
-    var terminator = fragment.$dom_lastChild;
-    if (terminator == null) terminator = previousTerminator;
+    var terminator = instanceNodes.length > 0 ? instanceNodes.last
+        : previousTerminator;
 
     terminators.insert(index, terminator);
+
     var parent = _templateElement.parentNode;
-    parent.insertBefore(fragment, previousTerminator.nextNode);
+    var insertBeforeNode = previousTerminator.nextNode;
+    for (var node in instanceNodes) {
+      parent.insertBefore(node, insertBeforeNode);
+    }
   }
 
-  void removeInstanceAt(int index) {
+  List<Node> extractInstanceAt(int index) {
+    var instanceNodes = <Node>[];
     var previousTerminator = getTerminatorAt(index - 1);
     var terminator = getTerminatorAt(index);
     terminators.removeAt(index);
 
     var parent = _templateElement.parentNode;
     while (terminator != previousTerminator) {
       var node = terminator;
       terminator = node.previousNode;
-      _Bindings._removeChild(parent, node);
+      node.remove();
+      instanceNodes.add(node);
     }
-  }
-
-  void removeAllInstances() {
-    if (terminators.length == 0) return;
-
-    var previousTerminator = _templateElement;
-    var terminator = getTerminatorAt(terminators.length - 1);
-    terminators.length = 0;
-
-    var parent = _templateElement.parentNode;
-    while (terminator != previousTerminator) {
-      var node = terminator;
-      terminator = node.previousNode;
-      _Bindings._removeChild(parent, node);
-    }
-  }
-
-  void clear() {
-    unobserve();
-    removeAllInstances();
-    iteratedValue = null;
+    return instanceNodes;
   }
 
   getInstanceModel(model, syntax) {
     if (syntax != null) {
       return syntax.getInstanceModel(_templateElement, model);
     }
     return model;
   }
 
-  getInstanceFragment(syntax) {
+  Node getInstanceFragment(syntax) {
     if (syntax != null) {
       return syntax.getInstanceFragment(_templateElement);
     }
     return _templateElement.createInstance();
   }
 
-  void _handleChanges(List<ChangeRecord> splices) {
+  List<Node> getInstanceNodes(model, syntax) {
+    // TODO(jmesserly): this line of code is jumping ahead of what MDV supports.
+    // It doesn't let the custom syntax override createInstance().
+    var fragment = getInstanceFragment(syntax);
+
+    _Bindings._addBindings(fragment, model, syntax);
+    _Bindings._addTemplateInstanceRecord(fragment, model);
+
+    var instanceNodes = fragment.nodes.toList();
+    fragment.nodes.clear();
+    return instanceNodes;
+  }
+
+  void _handleChanges(Iterable<ChangeRecord> splices) {
+    splices = splices.where((s) => s is ListChangeRecord);
+
     var template = _templateElement;
     var syntax = TemplateElement.syntax[template.attributes['syntax']];
 
     if (template.parentNode == null || template.document.window == null) {
-      // TODO(jmesserly): this is a little different than the MDV code, which
-      // removes _templateIterator from all instances (via the weak table).
-      // I think it has a similar effect. It might be a no-op.
-      removeAllInstances();
       abandon();
+      // TODO(jmesserly): MDV calls templateIteratorTable.delete(this) here,
+      // but I think that's a no-op because only nodes are used as keys.
+      // See https://github.com/Polymer/mdv/pull/114.
       return;
     }
 
+    // TODO(jmesserly): IdentityMap matches JS semantics, but it's O(N) right
+    // now. See http://dartbug.com/4161.
+    var instanceCache = new IdentityMap();
+    var removeDelta = 0;
     for (var splice in splices) {
-      if (splice is! ListChangeRecord) continue;
-
       for (int i = 0; i < splice.removedCount; i++) {
-        removeInstanceAt(splice.index);
+        var instanceNodes = extractInstanceAt(splice.index + removeDelta);
+        var model = _mdv(instanceNodes.first)._templateInstance.model;
+        instanceCache[model] = instanceNodes;
       }
 
+      removeDelta -= splice.addedCount;
+    }
+
+    for (var splice in splices) {
       for (var addIndex = splice.index;
           addIndex < splice.index + splice.addedCount;
           addIndex++) {
 
         var model = getInstanceModel(iteratedValue[addIndex], syntax);
 
-        var fragment = getInstanceFragment(syntax);
+        var instanceNodes = instanceCache.remove(model);
+        if (instanceNodes == null) {
+          instanceNodes = getInstanceNodes(model, syntax);
+        }
+        insertInstanceAt(addIndex, instanceNodes);
+      }
+    }
 
-        _Bindings._addBindings(fragment, model, syntax);
-        _Bindings._addTemplateInstanceRecord(fragment, model);
-
-        insertInstanceAt(addIndex, fragment);
-      }
+    for (var instanceNodes in instanceCache.values) {
+      instanceNodes.forEach(_unbindAllRecursively);
     }
   }
 
   void unobserve() {
     if (_sub == null) return;
     _sub.cancel();
     _sub = null;
   }
 
   void abandon() {
     unobserve();
     _valueBinding.cancel();
     terminators.clear();
     inputs.dispose();
   }
+
+  static void _unbindAllRecursively(Node node) {
+    var nodeExt = _mdv(node);
+    nodeExt._templateInstance = null;
+    if (node is Element && (node as Element).isTemplate) {

[justinfagnani, 2013/06/26 20:01:13]

this cast is unfortunate

+      // Make sure we stop observing when we remove an element.
+      var templateIterator = nodeExt._templateIterator;
+      if (templateIterator != null) {
+        templateIterator.abandon();
+        nodeExt._templateIterator = null;
+      }
+    }
+
+    _Bindings._nodeOrCustom(node).unbindAll();
+    for (var c = node.$dom_firstChild; c != null; c = c.nextNode) {
+      _unbindAllRecursively(c);
+    }
+  }
 }