feat(ngRepeat): full hg-repeat port from angula.js

Author: mhevery

lib/compiler.dart

@@ -79,7 +79,7 @@ class Compiler {
         templateCursor.descend();
 
         childDirectivePositions = compileChildren
-            ? _compileBlock(domCursor, templateCursor, blockCaches, useExistingDirectiveRefs)
+            ? _compileBlock(domCursor, templateCursor, blockCaches, null)
             : null;
 
         domCursor.ascend();

lib/directives/ng_repeat.dart

@@ -1,51 +1,146 @@
 part of angular;
 
+class Row {
+  var id;
+  Scope scope;
+  Block block;
+  dom.Node startNode;
+  dom.Node endNode;
+  List<dom.Node> elements;
+
+  Row(this.id);
+}
+
 class NgRepeatAttrDirective  {
-  static var $transclude = "element";
+  static var $transclude = ".";
 
-  String itemExpr, listExpr;
+  static RegExp SYNTAX = new RegExp(r'^\s*(.+)\s+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$');
+  static RegExp LHS_SYNTAX = new RegExp(r'^(?:([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\w]+)\))$');
+
+  String expression;
+  String valueIdentifier;
+  String keyIdentifier;
+  String listExpr;
   ElementWrapper anchor;
   ElementWrapper cursor;
   BlockList blockList;
+  Function trackByIdFn = (key, value, index) {
+    return value;
+  };
+  Map<Object, Row> lastRows = new Map<dynamic, Row>();
 
   NgRepeatAttrDirective(BlockListFactory blockListFactory,
                         BlockList this.blockList,
                         dom.Node node,
                         DirectiveValue value) {
-    ASSERT(node != null);
-    var splits = value.value.split(' in ');
-    assert(splits.length == 2); // or not?
-    itemExpr = splits[0];
-    listExpr = splits[1];
-
-    // TODO(deboer): There *must* be a better way...
-    anchor = cursor = blockListFactory([node], {});
+    expression = value.value;
+    Match match = SYNTAX.firstMatch(expression);
+    if (match == null) {
+      throw "[NgErr7] ngRepeat error! Expected expression in form of '_item_ in _collection_[ track by _id_]' but got '$expression'.";
+    }
+    listExpr = match.group(2);
+    var assignExpr = match.group(1);
+    match = LHS_SYNTAX.firstMatch(assignExpr);
+    if (match == null) {
+      throw "[NgErr8] ngRepeat error! '_item_' in '_item_ in _collection_' should be an identifier or '(_key_, _value_)' expression, but got '$assignExpr'.";
+    }
+    valueIdentifier = match.group(3);
+    if (valueIdentifier == null) valueIdentifier = match.group(1);
+    keyIdentifier = match.group(2);
   }
 
   attach(Scope scope) {
-    // TODO(deboer): huge hack. I can't update nicely the list yet.
-    var lastListLen = 0;
-    // should be watchprops
-    scope.$watch(listExpr, (List value, _, __) {
-      if (value.length == lastListLen) { return; }
-      lastListLen = value.length;
-
-      // List changed! Erase everything.
-      while (anchor != cursor) {
-        var blockToDelete = cursor;
-        cursor = cursor.previous;
-        blockToDelete.remove();
+    scope.$watchCollection(listExpr, (collection) {
+      var previousNode = blockList.elements[0],     // current position of the node
+          nextNode,
+          arrayLength,
+          childScope,
+          trackById,
+          newRowOrder = [],
+          cursor = blockList;
+      // Same as lastBlockMap but it has the current state. It will become the
+      // lastBlockMap on the next iteration.
+      Map<dynamic, Row> newRows = new Map<dynamic, Row>();
+      arrayLength = collection.length;
+      // locate existing items
+      var length = newRowOrder.length = collection.length;
+      for(var index = 0; index < length; index++) {
+        var value = collection[index];
+        trackById = trackByIdFn(index, value, index);
+        if(lastRows.containsKey(trackById)) {
+          var row = lastRows[trackById];
+          lastRows.remove(trackById);
+          newRows[trackById] = row;
+          newRowOrder[index] = row;
+        } else if (newRows.containsKey(trackById)) {
+          // restore lastBlockMap
+          newRowOrder.forEach((row) {
+            if (row != null && row.startNode != null) {
+              lastRows[row.id] = row;
+            }
+          });
+          // This is a duplicate and we need to throw an error
+          throw "[NgErr50] ngRepeat error! Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $expression, Duplicate key: $trackById";
+        } else {
+          // new never before seen row
+          newRowOrder[index] = new Row(trackById);
+          newRows[trackById] = null;
+        }
       }
 
-      // for each value, create a child scope and call the compiler's linker
-      // function.
-      value.forEach((oneValue) {
-        var child = scope.$new();
-        child[itemExpr] = oneValue;
-        var newBlock = blockList.newBlock()..attach(child)..insertAfter(cursor);
-        cursor = newBlock;
+      // remove existing items
+      lastRows.forEach((key, row){
+        row.block.remove();
+        row.scope.$destroy();
       });
 
+      for (var index = 0, length = collection.length; index < length; index++) {
+        var key = index;
+        var value = collection[index];
+        Row row = newRowOrder[index];
+
+        if (row.startNode != null) {
+          // if we have already seen this object, then we need to reuse the
+          // associated scope/element
+          childScope = row.scope;
+
+          nextNode = previousNode;
+          do {
+            nextNode = nextNode.nextNode;
+          } while(nextNode != null);
+
+          if (row.startNode == nextNode) {
+            // do nothing
+          } else {
+            // existing item which got moved
+            row.block.moveAfter(cursor);
+          }
+          previousNode = row.endNode;
+        } else {
+          // new item which we don't know about
+          childScope = scope.$new();
+        }
+
+        childScope[valueIdentifier] = value;
+        childScope.$index = index;
+        childScope.$first = (index == 0);
+        childScope.$last = (index == (arrayLength - 1));
+        childScope.$middle = !(childScope.$first || childScope.$last);
+
+        if (row.startNode == null) {
+          newRows[row.id] = row;
+          var block = blockList.newBlock();
+          row.block = block;
+          row.scope = childScope;
+          row.elements = block.elements;
+          row.startNode = row.elements[0];
+          row.endNode = row.elements[row.elements.length - 1];
+          block.insertAfter(cursor);
+          block.attach(childScope);
+        }
+        cursor = row.block;
+      }
+      lastRows = newRows;
     });
   }
 }

lib/scope.dart

@@ -177,78 +177,78 @@ class Scope implements Map {
     Scope next, current, target = this;
 
     _beginPhase('\$digest');
+    try {
+      do { // "while dirty" loop
+        dirty = false;
+        current = target;
+        //asyncQueue = current._asyncQueue;
+        //dump('aQ: ${asyncQueue.length}');
 
-    do { // "while dirty" loop
-      dirty = false;
-      current = target;
-      //asyncQueue = current._asyncQueue;
-      //dump('aQ: ${asyncQueue.length}');
-
-      while(asyncQueue.length > 0) {
-        try {
-          current.$eval(asyncQueue.removeAt(0));
-        } catch (e, s) {
-          _exceptionHandler(e, s);
+        while(asyncQueue.length > 0) {
+          try {
+            current.$eval(asyncQueue.removeAt(0));
+          } catch (e, s) {
+            _exceptionHandler(e, s);
+          }
         }
-      }
 
-      do { // "traverse the scopes" loop
-        if ((watchers = current._watchers) != null) {
-          // process our watches
-          length = watchers.length;
-          while (length-- > 0) {
-            try {
-              watch = watchers[length];
-              if ((value = watch.get(current)) != (last = watch.last) &&
-                  !(value is num && last is num && value.isNaN && last.isNaN)) {
-                dirty = true;
-                watch.last = value;
-                watch.fn(value, ((last == initWatchVal) ? value : last), current);
-                if (_ttlLeft < 5) {
-                  logIdx = 4 - _ttlLeft;
-                  while (watchLog.length <= logIdx) {
-                    watchLog.add([]);
+        do { // "traverse the scopes" loop
+          if ((watchers = current._watchers) != null) {
+            // process our watches
+            length = watchers.length;
+            while (length-- > 0) {
+              try {
+                watch = watchers[length];
+                if ((value = watch.get(current)) != (last = watch.last) &&
+                    !(value is num && last is num && value.isNaN && last.isNaN)) {
+                  dirty = true;
+                  watch.last = value;
+                  watch.fn(value, ((last == initWatchVal) ? value : last), current);
+                  if (_ttlLeft < 5) {
+                    logIdx = 4 - _ttlLeft;
+                    while (watchLog.length <= logIdx) {
+                      watchLog.add([]);
+                    }
+                    logMsg = (watch.exp is Function)
+                        ? 'fn: ' + (watch.exp.name || watch.exp.toString())
+                        : watch.exp;
+                    logMsg += '; newVal: ' + toJson(value) + '; oldVal: ' + toJson(last);
+                    watchLog[logIdx].add(logMsg);
                   }
-                  logMsg = (watch.exp is Function)
-                      ? 'fn: ' + (watch.exp.name || watch.exp.toString())
-                      : watch.exp;
-                  logMsg += '; newVal: ' + toJson(value) + '; oldVal: ' + toJson(last);
-                  watchLog[logIdx].add(logMsg);
                 }
+              } catch (e, s) {
+                _exceptionHandler(e, s);
               }
-            } catch (e, s) {
-              _exceptionHandler(e, s);
             }
           }
-        }
 
-        // Insanity Warning: scope depth-first traversal
-        // yes, this code is a bit crazy, but it works and we have tests to prove it!
-        // this piece should be kept in sync with the traversal in $broadcast
-        if (current._childHead == null) {
-          if (current == target) {
-            next = null;
-          } else {
-            next = current._nextSibling;
-            if (next == null) {
-              while(current != target && (next = current._nextSibling) == null) {
-                current = current.$parent;
+          // Insanity Warning: scope depth-first traversal
+          // yes, this code is a bit crazy, but it works and we have tests to prove it!
+          // this piece should be kept in sync with the traversal in $broadcast
+          if (current._childHead == null) {
+            if (current == target) {
+              next = null;
+            } else {
+              next = current._nextSibling;
+              if (next == null) {
+                while(current != target && (next = current._nextSibling) == null) {
+                  current = current.$parent;
+                }
               }
             }
+          } else {
+            next = current._childHead;
           }
-        } else {
-          next = current._childHead;
-        }
-      } while ((current = next) != null);
-
-      if(dirty && (_ttlLeft--) == 0) {
-        _clearPhase();
-        throw '$_ttl \$digest() iterations reached. Aborting!\n' +
-            'Watchers fired in the last 5 iterations: ${toJson(watchLog)}';
-      }
-    } while (dirty || asyncQueue.length > 0);
+        } while ((current = next) != null);
 
-    _clearPhase();
+        if(dirty && (_ttlLeft--) == 0) {
+          throw '$_ttl \$digest() iterations reached. Aborting!\n' +
+              'Watchers fired in the last 5 iterations: ${toJson(watchLog)}';
+        }
+      } while (dirty || asyncQueue.length > 0);
+    } finally {
+      _clearPhase();
+    }
   }
 
 

test/_specs.dart

@@ -135,6 +135,7 @@ class JQuery implements List<Node> {
   remove() => forEach((n) => n.remove());
   attr([String name]) => accessor((n) => n.attributes[name], (n, v) => n.attributes[name] = v);
   textWithShadow() => fold('', (t, n) => '${t}${renderedText(n)}');
+  find(selector) => fold(new JQuery(), (jq, n) => jq..addAll(n.queryAll(selector)));
 }
 
 class Logger implements List {