From be4413fd76cf853830f9c64e425bcc02e30b5aff Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Fri, 13 Feb 2015 18:11:13 -0800
Subject: [PATCH 01/14] possible fix for [0.8-preview] #1192

---
 src/lib/template/templatizer.html | 70 +++++++++++++++++++++----------
 src/lib/template/x-repeat.html    | 35 +++++++++-------
 2 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 5f1feec182..bec168f427 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -15,50 +15,55 @@
   Templatizer = {
 
     templatize: function(template) {
-      if (template._content && template._content._ctor) {
+      // TODO(sjmiles): supply _alternate_ content reference missing from root
+      // templates (not nested). `_content` exists to provide content sharing
+      // for nested templates.
+      if (!template._content) {
+        template._content = template.content;
+      }
+      // fast path if template's anonymous class has been memoized
+      if (template._content._ctor) {
         this.ctor = template._content._ctor;
         //console.log('Templatizer.templatize: using memoized archetype');
         return;
       }
-      //
-      var host = this.host;
+      // `archetype` is the prototype of the anonymous
+      // class created by the templatizer 
       var archetype = Object.create(Base);
-      //
-      archetype._template = template;
+      // normally Annotations.parseAnnotations(template) but
+      // archetypes do special caching
       this.customPrepAnnotations(archetype, template);
+      // setup accessors
       archetype._prepEffects();
+      // late-binds archetype.listen to host.listen; h.l doesn't exist yet
+      archetype.listen = function() { 
+        this.listen.apply(this, arguments);
+      }.bind(this.host);
+      /*
+      var host = this.host;
       archetype.listen = function() {
         host.listen.apply(host, arguments);
       };
-      //
+      */
+      // boilerplate code
+      archetype._notifyPath = this._notifyPathImpl;
+      // boilerplate code
+      var _constructor = this._constructorImpl;
       var ctor = function() {
-        this._setupConfigure();
-        this.root = this.instanceTemplate(this._template);
-        this._marshalTemplateContent();
-        this._marshalAnnotatedNodes();
-        this._marshalInstanceEffects();
-        this._marshalAnnotatedListeners();
-        this._ready();
-        this._notifyPath = function() {
-          var pd = this.pathDelegate;
-          if (pd) {
-            var args = Array.prototype.slice.call(arguments);
-            args.unshift(this);
-            pd._notifyDelegatePath.apply(pd, args);
-          }
-        };
+        _constructor.call(this);
       };
-      //
+      // standard references
       ctor.prototype = archetype;
       archetype.constructor = ctor;
+      // TODO(sjmiles): constructor cache?
       template._content._ctor = ctor;
-      //
       // TODO(sjmiles): choose less general name
       this.ctor = ctor;
     },
 
     customPrepAnnotations: function(archetype, template) {
       if (template) {
+        archetype._template = template;
         var c = template._content;
         if (c) {
           archetype._annotes = c._annotes ||
@@ -74,6 +79,25 @@
       }
     },
 
+    _notifyPathImpl: function() {
+      var pd = this.pathDelegate;
+      if (pd) {
+        var args = Array.prototype.slice.call(arguments);
+        args.unshift(this);
+        pd._notifyDelegatePath.apply(pd, args);
+      }
+    },
+
+    _constructorImpl: function() {
+      this._setupConfigure();
+      this.root = this.instanceTemplate(this._template);
+      this._marshalTemplateContent();
+      this._marshalAnnotatedNodes();
+      this._marshalInstanceEffects();
+      this._marshalAnnotatedListeners();
+      this._ready();
+    },
+
     stamp: function(model) {
       var instance = new this.ctor();
       if (model) {
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index dcfa48f562..60de27f0de 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -41,6 +41,10 @@
         'items.*': 'itemsChanged'
       },
 
+      created: function() {
+        this.boundArrayObserver = this.arrayObserver.bind(this);
+      },
+
       attached: function() {
         if (!this.ctor) {
           this.templatize(this);
@@ -55,22 +59,25 @@
 
       itemsChanged: function(items, old, path) {
         if (this.isAttached) {
-          if (path) {
-            this.notifyElement(path, items);
-          } else {
-            if (old) {
-              this.unobserveArray(old);
-            }
-            if (items) {
-              this.observeArray(items);
-            }
-            this.render();
+          this._itemsChanged(items, old, path);
+        }
+      },
+
+      _itemsChanged: function(items, old, path) {
+        if (path) {
+          this.notifyElement(path, items);
+        } else {
+          if (old) {
+            this.unobserveArray(old);
+          }
+          if (items) {
+            this.observeArray(items);
           }
+          this.render();
         }
       },
 
       observeArray: function(items) {
-        this.boundArrayObserver = this.boundArrayObserver || this.arrayObserver.bind(this);
         ArrayObserve.observe(items, this.boundArrayObserver);
       },
 
@@ -136,11 +143,11 @@
 
       createRows: function(items, parent) {
         var rows = [];
-        for (var i=0, row, item; item=items[i]; i++) {
-          row = this.generateRow(i, item);
+        for (var i=0, l=items.length, row; i<l; i++) {
+          row = this.generateRow(i, items[i]);
+          rows.push(row);
           // TODO(sorvell): replace with localDom API
           parent.insertBefore(row.root, this);
-          rows.push(row);
         }
         return rows;
       },

From 1b54e9f4ec1c2c128f97d6e941945a554bda1d19 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Sat, 14 Feb 2015 00:18:07 -0800
Subject: [PATCH 02/14] Add collection-based x-repeat.

---
 src/lib/collection.html        | 155 +++++++++++++++++++++++++
 src/lib/template/x-repeat.html | 201 +++++++++++++++++++++------------
 2 files changed, 282 insertions(+), 74 deletions(-)
 create mode 100644 src/lib/collection.html

diff --git a/src/lib/collection.html b/src/lib/collection.html
new file mode 100644
index 0000000000..7cd5bfdec9
--- /dev/null
+++ b/src/lib/collection.html
@@ -0,0 +1,155 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="array-observe.html">
+<link rel="import" href="debounce.html">
+
+<script>
+
+modulate('Collection', ['Base', 'ArrayObserve', 'Debounce'], function(Base, ArrayObserve, Debounce) {
+
+  var collections = new WeakMap();
+
+  function Collection(userArray, noObserve) {
+    collections.set(userArray, this);
+    this.userArray = userArray;
+    this.store = userArray.slice();
+    this.callbacks = [];
+    this.debounce = null;
+    this.map = null;
+
+    if (!noObserve) {
+      ArrayObserve.observe(userArray, this.applySplices.bind(this));
+      this.initMap();
+      this.splices = null;
+    }
+  }
+
+  Collection.prototype = Object.create(null);
+  Collection.prototype.constructor = Collection;
+
+  Base.extend(Collection.prototype, {
+
+    initMap: function() {
+      var map = this.map = new WeakMap();
+      var s = this.store;
+      for (var i=0; i<s.length; i++) {
+        var v = s[i];
+        if (typeof v == 'string') {
+          v = s[i] = new String(v);
+        }
+        map.set(v, i);
+      }
+    },
+
+    add: function(item, batch) {
+      var key = this.store.push(item) - 1;
+      if (this.map) {
+        this.map.set(item, key);
+      }
+      if (!batch) {
+        this.debounce = Debounce(this.debounce, this.notify.bind(this));
+      }
+      return key;
+    },
+
+    remove: function(item, batch) {
+      var key = this.getKey(item);
+      delete this.store[key];
+      if (this.map) {
+        this.map.delete(item);
+      }
+      if (!batch) {
+        this.debounce = Debounce(this.debounce, this.notify.bind(this));
+      }
+      return key;
+    },
+
+    notify: function() {
+      this.callbacks.forEach(function(cb) { 
+        cb(this.splices);
+      }, this);
+    },
+
+    observe: function(callback) {
+      this.callbacks.push(callback);
+    },
+
+    unobserve: function(callback) {
+      this.callbacks.splice(this.callbacks.indexOf(callback), 1);
+    },
+
+    getKey: function(item) {
+      return this.map ? this.map.get(item) : this.store.indexOf(item);
+    },
+
+    getKeys: function() {
+      return Object.keys(this.store);
+    },
+
+    setItem: function(key, value) {
+      this.store[key] = value;
+    },
+
+    getItem:  function(key) {
+      return this.store[key];
+    },
+
+    getItems: function() {
+      var items = [], store = this.store;
+      for (var key in store) {
+        items.push(store[key]);
+      }
+      return items;
+    },
+
+    applySplices: function(splices) {
+      var map = this.map;
+      var keySplices = [];
+      for (var i=0; i<splices.length; i++) {
+        var j, o, key, s = splices[i];
+        // Removed keys
+        var removed = [];
+        for (j=0; j<s.removed.length; j++) {
+          o = s.removed[j];
+          key = this.remove(o, true);
+          removed.push(key);
+        }
+        // Added keys
+        var added = [];
+        for (j=0; j<s.addedCount; j++) {
+          o = this.userArray[s.index + j];
+          key = this.add(o, true);
+          added.push(key);
+        }
+        // Record splice
+        keySplices.push({
+          index: s.index,
+          removed: removed,
+          added: added
+        });
+      }
+      this.splices = keySplices;
+      this.notify();
+    }
+
+  });
+
+  function getCollection(userArray, noObserve) {
+    return collections.get(userArray) || new Collection(userArray, noObserve);
+  }
+
+  return {
+    get: getCollection
+  };
+  
+});
+
+</script>
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 60de27f0de..d133feae40 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -10,10 +10,11 @@
 
 <link rel="import" href="templatizer.html">
 <link rel="import" href="../array-observe.html">
+<link rel="import" href="../collection.html">
 
 <script>
 
-  using(['ArrayObserve'], function(ArrayObserve) {
+  using(['ArrayObserve', 'Collection'], function(ArrayObserve, Collection) {
     /**
      * Creates a pseudo-custom-element that maps property values to bindings
      * in DOM.
@@ -30,7 +31,11 @@
       extends: 'template',
 
       published: {
-        items: Object
+        items: Array,
+        sort: Function,
+        filter: Function,
+        observe: String,
+        delay: Number
       },
 
       mixins: [
@@ -38,23 +43,37 @@
       ],
 
       bind: {
-        'items.*': 'itemsChanged'
+        'sort': '_sortChanged',
+        'filter': '_filterChanged',
+        'observe': '_observeChanged',
+        'items.*': '_itemsChanged'
       },
 
       created: function() {
-        this.boundArrayObserver = this.arrayObserver.bind(this);
+        this.boundCollectionObserver = this.render.bind(this);
       },
 
       attached: function() {
         if (!this.ctor) {
           this.templatize(this);
         }
-        this.itemsChanged(this.items);
       },
 
-      detached: function() {
-        this.unobserveArray(this.items);
-        this.derender();
+      _sortChanged: function() {
+        this._sortFn = this.sort && (typeof this.sort == 'function' ? 
+          this.sort : this.host[this.sort].bind(this.host));
+        this.debounce('render', this.render);
+      },
+
+      _filterChanged: function() {
+        this._filterFn = this.filter && (typeof this.filter == 'function' ? 
+          this.filter : this.host[this.filter].bind(this.host));
+        this.debounce('render', this.render);
+      },
+
+      _observeChanged: function() {
+        this._observePaths = this.observe && 
+          this.observe.replace('.*', '.').split(' ');
       },
 
       itemsChanged: function(items, old, path) {
@@ -65,96 +84,114 @@
 
       _itemsChanged: function(items, old, path) {
         if (path) {
-          this.notifyElement(path, items);
+          this._notifyElement(path, items);
+          this._checkObservedPaths(path);
         } else {
           if (old) {
-            this.unobserveArray(old);
+            this._unobserveCollection(old);
           }
           if (items) {
-            this.observeArray(items);
+            this._observeCollection(items);
+            this.debounce('render', this.render);
+          }
+        }
+      },
+
+      _checkObservedPaths: function(path) {
+        if (this._observePaths && path.indexOf('items.') === 0) {
+          path = path.substring(path.indexOf('.', 6) + 1);
+          var paths = this._observePaths;
+          for (var i=0; i<paths.length; i++) {
+            if (path.indexOf(paths[i]) === 0) {
+              this.debounce('render', this.render, this.delay);
+              return;
+            }
           }
           this.render();
         }
       },
 
-      observeArray: function(items) {
-        ArrayObserve.observe(items, this.boundArrayObserver);
+      _observeCollection: function(items) {
+        this.collection = Collection.get(items);
+        this.collection.observe(this.boundCollectionObserver);
       },
 
-      unobserveArray: function(items) {
-        ArrayObserve.unobserve(items, this.boundArrayObserver);
+      _unobserveCollection: function(items) {
+        var collection = Collection.get(items);
+        collection.unobserve(this.boundCollectionObserver);
       },
 
-      arrayObserver: function(splices) {
-        this.renderSplices(splices);
+      render: function(splices) {
+        // TODO(kschaaf): polyfill timing; config'ed prop change handlers
+        // run before attached
+        if (!this.isAttached) {
+          this.async(this.render, 1);
+          return;
+        }
+        var c = this.collection;
+        var rowForKey = this._rowForKey = {};
+        var keys;
+        if (!this._sortFn && splices) {
+          keys = this._orderedKeys;
+          this._applySplices(splices);
+        } else {
+          keys = this._orderedKeys = c.getKeys();
+        }
+        // Filter
+        if (this._filterFn) {
+          keys = keys.filter(function(a, b) {
+            return this._filterFn(c.getItem(a), c.getItem(b));
+          }, this);
+        }
+        // Sort
+        if (this._sortFn) {
+          keys.sort(function(a, b) {
+            return this._sortFn(c.getItem(a), c.getItem(b));
+          }.bind(this));
+        }
+        // Assign
+        this.rows = this.rows || [];
+        for (var i=0; i<keys.length; i++) {
+          var row = this.rows[i];
+          if (!row) {
+            this.rows.push(row = this._insertRow(i));
+          }
+          var key = keys[i];
+          row.item = c.getItem(key);
+          row.key = key;
+          rowForKey[key] = i;
+        }
+        // Remove extra
+        for (; i<this.rows.length; i++) {
+          this._detachRow(this.rows[i]);
+        }
+        this.rows.splice(keys.length, this.rows.length-keys.length);
       },
 
-      renderSplices: function(splices) {
-        var pool = [];
+      _applySplices: function(splices) {
+        var keys = this._orderedKeys;
         for (var i=0; i<splices.length; i++) {
           var s = splices[i];
-          var removed = this.rows.splice(s.index, s.removed.length);
-          while (removed.length) {
-            this.poolRow(removed.pop(), pool);          
-          }
-          for (var idx=s.index; idx < s.index + s.addedCount; idx++) {
-            this.rows.splice(idx, 0, this.insertRow(idx, pool));
-          }
+          var args = [s.index, s.removed.length].concat(s.added);
+          keys.splice.apply(keys, args);
         }
       },
 
-      poolRow: function(row, pool) {
-        for (var i=0; i<row.children.length; i++) {
-          row.root.appendChild(row.children[i]);
+      _detachRow: function(row) {
+        for (var i=0; i<row._children.length; i++) {
+          row.root.appendChild(row._children[i]);
         }
-        pool.push(row);
       },
 
-      insertRow: function(idx, pool) {
-        var row;
-        var item = this.items[idx];
-        if (pool.length) {
-          row = pool.pop();
-          row.item = item;
-        } else {
-          row = this.generateRow(idx, item);
-        }
+      _insertRow: function(idx) {
+        var row = this._generateRow(idx);
         var parent = this.rows[idx];
         this.parentNode.insertBefore(row.root, parent ? parent.children[0] : this);
         return row;
       },
 
-      render: function() {
-        this.derender();
-        if (this.items) {
-          this.rows = this.createRows(this.items, this.parentNode);
-        }
-      },
-
-      derender: function() {
-        if (this.rows) {
-          this.rows.forEach(function(row) {
-            row.children.forEach(function(n) {
-              n.remove();
-            });
-          });
-        }
-      },
-
-      createRows: function(items, parent) {
-        var rows = [];
-        for (var i=0, l=items.length, row; i<l; i++) {
-          row = this.generateRow(i, items[i]);
-          rows.push(row);
-          // TODO(sorvell): replace with localDom API
-          parent.insertBefore(row.root, this);
-        }
-        return rows;
-      },
-
-      generateRow: function(idx, item) {
+      _generateRow: function(idx) {
         var row = this.stamp({
-          item: item,
           pathDelegate: this
         });
         // each row is a document fragment which is lost when we appendChild,
@@ -164,19 +201,21 @@
           children.push(n);
           n._templateProxy = row;
         }
-        row.children = children;
+        // Since archetype overrides Base/HTMLElement, Safari complains
+        // when accessing `children`
+        row._children = children;
         return row;
       },
 
       _notifyDelegatePath: function(row, path, value) {
-        var idx = this.items.indexOf(row.item);
-        this.notifyPath(path.replace('item', 'items.' + idx), value);
+        this.notifyPath(path.replace('item', 'items.' + row.key), value);
       },
 
-      notifyElement: function(path, value) {
+      _notifyElement: function(path, value) {
         // 'items.'.length == 6
         var dot = path.indexOf('.', 6);
-        var idx = path.substring(6, dot < 0 ? path.length : dot);
+        var key = path.substring(6, dot < 0 ? path.length : dot);
+        var idx = this._rowForKey[key];
         if (dot >= 0) {
           path = 'item.' + path.substring(dot+1);
           this.rows[idx].notifyPath(path, value, true);
@@ -185,6 +224,20 @@
         }
       },
 
+      itemForElement: function(el) {
+        while (el && !el._templateProxy) {
+          el = el.parentNode;
+        }
+        return el._templateProxy.item;
+      },
+
+      keyForElement: function(el) {
+        while (el && !el._templateProxy) {
+          el = el.parentNode;
+        }
+        return el._templateProxy.key;
+      },
+
       indexForElement: function(el) {
         while (el && !el._templateProxy) {
           el = el.parentNode;

From f3352c87b0e7026273ece20602a1c8e1dfa7f3e3 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Sat, 14 Feb 2015 00:52:14 -0800
Subject: [PATCH 03/14] Splices need not be instance var.

---
 src/lib/collection.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/lib/collection.html b/src/lib/collection.html
index 7cd5bfdec9..2e7768b4e5 100644
--- a/src/lib/collection.html
+++ b/src/lib/collection.html
@@ -28,7 +28,6 @@
     if (!noObserve) {
       ArrayObserve.observe(userArray, this.applySplices.bind(this));
       this.initMap();
-      this.splices = null;
     }
   }
 
@@ -72,9 +71,9 @@
       return key;
     },
 
-    notify: function() {
+    notify: function(splices) {
       this.callbacks.forEach(function(cb) { 
-        cb(this.splices);
+        cb(splices);
       }, this);
     },
 
@@ -136,8 +135,7 @@
           added: added
         });
       }
-      this.splices = keySplices;
-      this.notify();
+      this.notify(keySplices);
     }
 
   });

From 9b9ed9fcad510bd965845e31a750c36444dfa5e8 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Wed, 18 Feb 2015 22:15:37 -0800
Subject: [PATCH 04/14] Guard against bogus row index.

---
 src/lib/template/x-repeat.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index d133feae40..5c48e47afe 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -216,11 +216,14 @@
         var dot = path.indexOf('.', 6);
         var key = path.substring(6, dot < 0 ? path.length : dot);
         var idx = this._rowForKey[key];
-        if (dot >= 0) {
-          path = 'item.' + path.substring(dot+1);
-          this.rows[idx].notifyPath(path, value, true);
-        } else {
-          this.rows[idx].item = value;
+        var row = this.rows[idx];
+        if (row) {
+          if (dot >= 0) {
+            path = 'item.' + path.substring(dot+1);
+            row.notifyPath(path, value, true);
+          } else {
+            row.item = value;
+          }
         }
       },
 

From a7552fc804cf3c9f07e5fa1cfc503636c5a51b5c Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 20 Feb 2015 16:03:20 -0800
Subject: [PATCH 05/14] Fix async reentrency.

---
 src/lib/async.html    | 16 ++++++++++++----
 src/lib/debounce.html |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/lib/async.html b/src/lib/async.html
index 9381f284bd..a7dbc9e4ae 100644
--- a/src/lib/async.html
+++ b/src/lib/async.html
@@ -30,18 +30,26 @@
     if (handle < 0) {
       clearTimeout(~handle);
     } else {
-      callbacks[handle - lastVal] = null;
+      var idx = handle - lastVal;
+      if (idx >= 0) {
+        if (!callbacks[idx]) {
+          throw 'invalid async handle: ' + handle;
+        }
+        callbacks[idx] = null;
+      }
     }
   }
 
   function atEndOfMicrotask() {
-    while (callbacks.length) {
-      var cb = callbacks.shift();
+    var len = callbacks.length;
+    for (var i=0; i<len; i++) {
+      var cb = callbacks[i];
       if (cb) {
         cb();
       }
-      lastVal++;
     }
+    callbacks.splice(0, len);
+    lastVal += len;
   }
 
   new (window.MutationObserver || JsMutationObserver)(atEndOfMicrotask)
diff --git a/src/lib/debounce.html b/src/lib/debounce.html
index badf042c72..fa41fae13d 100644
--- a/src/lib/debounce.html
+++ b/src/lib/debounce.html
@@ -22,7 +22,7 @@
 
   var Debouncer = function(context) {
     this.context = context;
-    this.boundComplete = this.complete.bind(this)
+    this.boundComplete = this.complete.bind(this);
   };
   
   Debouncer.prototype = {

From d31279c5eb1ba543eb60c823ba23b0433ee6400c Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 20 Feb 2015 16:03:48 -0800
Subject: [PATCH 06/14] Initialize template model config when stamping.

---
 src/features/standard/configure.html |  4 ++--
 src/lib/template/templatizer.html    | 16 +++++-----------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/features/standard/configure.html b/src/features/standard/configure.html
index 66e7a8f041..5135c03537 100644
--- a/src/features/standard/configure.html
+++ b/src/features/standard/configure.html
@@ -46,8 +46,8 @@
     Base.addFeature({
 
       // storage for configuration
-      _setupConfigure: function() {
-        this._config = {};
+      _setupConfigure: function(initialConfig) {
+        this._config = initialConfig || {};
         this._handlers = [];
       },
 
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index bec168f427..d7dd5ec8e8 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -49,8 +49,8 @@
       archetype._notifyPath = this._notifyPathImpl;
       // boilerplate code
       var _constructor = this._constructorImpl;
-      var ctor = function() {
-        _constructor.call(this);
+      var ctor = function TemplateInstance(model) {
+        _constructor.call(this, model);
       };
       // standard references
       ctor.prototype = archetype;
@@ -88,8 +88,8 @@
       }
     },
 
-    _constructorImpl: function() {
-      this._setupConfigure();
+    _constructorImpl: function(model) {
+      this._setupConfigure(model);
       this.root = this.instanceTemplate(this._template);
       this._marshalTemplateContent();
       this._marshalAnnotatedNodes();
@@ -99,13 +99,7 @@
     },
 
     stamp: function(model) {
-      var instance = new this.ctor();
-      if (model) {
-        for (var n in model) {
-          instance[n] = model[n];
-        }
-      }
-      return instance;
+      return new this.ctor(model);
     }
 
   };

From 49a7bcada519eaf61418ec92c89a876c5879004b Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 20 Feb 2015 16:04:20 -0800
Subject: [PATCH 07/14] Use localDom API with batching.

---
 src/features/mini/content.html | 12 +++---
 src/lib/template/x-repeat.html | 74 ++++++++++++++++++++++++----------
 2 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/features/mini/content.html b/src/features/mini/content.html
index e724e95c57..a0f3b3844f 100644
--- a/src/features/mini/content.html
+++ b/src/features/mini/content.html
@@ -380,15 +380,17 @@
         return node.lightParent || node.parentNode;
       },
 
-      batch: function(batch_fn) {
-        this._batching = true;
+      batch: function(batch_fn, context) {
+        this._batching = (this._batching || 0) + 1;
         if (batch_fn) {
-          batch_fn.call(this.host);
-          this.distribute();
+          batch_fn.call(context || this.host);
+          this._batching--;
+          this._maybeDistribute();
         }
       },
 
       distribute: function() {
+        // TODO(kschaaf): use counter
         this._batching = false;
         this.host._distributeContent();
       },
@@ -426,8 +428,8 @@
         container = container || this.node;
         if (ref_node) {
           if (this.host._useContent) {
-            var children = this.children(container);
             saveLightChildrenIfNeeded(container);
+            var children = this.children(container);
             var index = children.indexOf(ref_node);
             if (index < 0) {
               throw Error('The ref_node to be inserted before is not a child ' +
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 5c48e47afe..03de5ea8b0 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -14,7 +14,7 @@
 
 <script>
 
-  using(['ArrayObserve', 'Collection'], function(ArrayObserve, Collection) {
+  using(['ArrayObserve', 'Collection', 'Debounce'], function(ArrayObserve, Collection, Debounce) {
     /**
      * Creates a pseudo-custom-element that maps property values to bindings
      * in DOM.
@@ -25,6 +25,8 @@
      *  
      */
 
+    var debounceDistribute;
+
     Polymer({
 
       is: 'x-repeat',
@@ -54,9 +56,16 @@
       },
 
       attached: function() {
+        // Templatizing (generating the instance constructor) needs to wait
+        // until attached, since it may not have its template content handed
+        // back to it until then, following its host template stamping
         if (!this.ctor) {
           this.templatize(this);
         }
+        if (this._renderPendingAttach) {
+          this._renderPendingAttach = false; 
+          this.render();
+        }
       },
 
       _sortChanged: function() {
@@ -76,12 +85,6 @@
           this.observe.replace('.*', '.').split(' ');
       },
 
-      itemsChanged: function(items, old, path) {
-        if (this.isAttached) {
-          this._itemsChanged(items, old, path);
-        }
-      },
-
       _itemsChanged: function(items, old, path) {
         if (path) {
           this._notifyElement(path, items);
@@ -94,7 +97,7 @@
             this._observeCollection(items);
             this.debounce('render', this.render);
           }
-        }
+        }          
       },
 
       _checkObservedPaths: function(path) {
@@ -107,7 +110,6 @@
               return;
             }
           }
-          this.render();
         }
       },
 
@@ -122,12 +124,28 @@
       },
 
       render: function(splices) {
-        // TODO(kschaaf): polyfill timing; config'ed prop change handlers
-        // run before attached
+        // TODO(kschaaf): should actually queue splices also
         if (!this.isAttached) {
-          this.async(this.render, 1);
+          // Render must follow attachment
+          this._renderPendingAttach = true;
           return;
         }
+        if (this.host) {
+          // this.host.localDom.batch(function() {
+          //   this._render(splices);
+          // }, this);
+          this.host.localDom.batch();
+          this._render(splices);
+          debounceDistribute = Debounce.call(this, debounceDistribute, function() {
+            console.log('distribute');
+            this.host.localDom.distribute();
+          }.bind(this));
+        } else {
+          this._render(splices);
+        }
+      },
+
+      _render: function(splices) {
         var c = this.collection;
         var rowForKey = this._rowForKey = {};
         var keys;
@@ -151,6 +169,7 @@
         }
         // Assign
         this.rows = this.rows || [];
+
         for (var i=0; i<keys.length; i++) {
           var row = this.rows[i];
           if (!row) {
@@ -179,14 +198,25 @@
 
       _detachRow: function(row) {
         for (var i=0; i<row._children.length; i++) {
-          row.root.appendChild(row._children[i]);
+          var el = row._children[i];
+          if (this.host) {
+            var parentNode = this.lightDom.elementParent();
+            this.host.localDom.removeChild(el, parentNode);
+          }
+          row.root.appendChild(el);
         }
       },
 
       _insertRow: function(idx) {
         var row = this._generateRow(idx);
-        var parent = this.rows[idx];
-        this.parentNode.insertBefore(row.root, parent ? parent.children[0] : this);
+        var beforeRow = this.rows[idx];
+        var beforeNode = beforeRow ? beforeRow._children[0] : this;
+        var parentNode = this.lightDom.elementParent();
+        if (this.host) {
+          this.host.localDom.insertBefore(row.root, beforeNode, parentNode);
+        } else {
+          parentNode.insertBefore(row.root, beforeNode);
+        }
         return row;
       },
 
@@ -199,7 +229,7 @@
         var children = [];
         for (var n = row.root.firstChild; n; n=n.nextSibling) {
           children.push(n);
-          n._templateProxy = row;
+          n._templateInstance = row;
         }
         // Since archetype overrides Base/HTMLElement, Safari complains
         // when accessing `children`
@@ -228,24 +258,24 @@
       },
 
       itemForElement: function(el) {
-        while (el && !el._templateProxy) {
+        while (el && !el._templateInstance) {
           el = el.parentNode;
         }
-        return el._templateProxy.item;
+        return el._templateInstance.item;
       },
 
       keyForElement: function(el) {
-        while (el && !el._templateProxy) {
+        while (el && !el._templateInstance) {
           el = el.parentNode;
         }
-        return el._templateProxy.key;
+        return el._templateInstance.key;
       },
 
       indexForElement: function(el) {
-        while (el && !el._templateProxy) {
+        while (el && !el._templateInstance) {
           el = el.parentNode;
         }
-        return this.rows.indexOf(el._templateProxy);
+        return this.rows.indexOf(el._templateInstance);
       }
 
     });

From 4c08a3ba76e67eebc73ac7f7b00fed034b8053bc Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Fri, 20 Feb 2015 19:03:51 -0800
Subject: [PATCH 08/14] use levinstein for shady composition (optimization in
 progress)

---
 src/features/mini/content.html     |  96 +++++++----
 src/features/mini/ready.html       |   6 +-
 src/lib/array-splice.html          | 262 +++++++++++++++++++++++++++++
 src/lib/template/x-repeat.html     |  10 +-
 test/unit/content.html             |  10 ++
 test/unit/projection-elements.html |   6 +-
 test/unit/projection.js            |  15 ++
 7 files changed, 362 insertions(+), 43 deletions(-)
 create mode 100644 src/lib/array-splice.html

diff --git a/src/features/mini/content.html b/src/features/mini/content.html
index a0f3b3844f..3a5f0eaf33 100644
--- a/src/features/mini/content.html
+++ b/src/features/mini/content.html
@@ -7,9 +7,10 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
+<link rel="import" href="../../lib/array-splice.html">
 <script>
 
-  using('Base', function(Base) {
+  using(['Base', 'ArraySplice'], function(Base, ArraySplice) {
 
     /**
 
@@ -59,7 +60,6 @@
         for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
           c._distributeContent();
         }
-        this._composeContent();
       },
 
       _prepareContent: function() {
@@ -81,6 +81,7 @@
           this.appendChild(this.root);
           this.root = this;
         }
+        this.__shadyDomIsClean = true;
       },
 
       // This is a polyfill for Element.prototype.matches, which is sometimes
@@ -129,12 +130,13 @@
       // instead elements are distributed into a `content._distributedNodes`
       // array where applicable.
       _distributePool: function(node, pool) {
+        var children;
         if (isInsertionPoint(node)) {
           // distribute nodes from the pool that this selector matches
           var content = node;
           var anyDistributed = false;
           for (var i = 0; i < pool.length; i++) {
-            var node = pool[i];
+            node = pool[i];
             // skip nodes that were already used
             if (!node) {
               continue;
@@ -150,18 +152,22 @@
           }
           // Fallback content if nothing was distributed here
           if (!anyDistributed) {
-            var children = getLightChildren(content);
+            children = getLightChildren(content);
             for (var i = 0; i < children.length; i++) {
               distributeNodeInto(children[i], content);
             }
           }
-          return;
+          return true;
         }
         // recursively distribute.
-        var children = getLightChildren(node);
+        children = getLightChildren(node);
+        var hasInsertionPoint;
         for (var i = 0; i < children.length; i++) {
-          this._distributePool(children[i], pool);
+          hasInsertionPoint = this._distributePool(children[i], pool) ||
+            hasInsertionPoint;
         }
+        node.__skipDistribute = !hasInsertionPoint;
+        return hasInsertionPoint;
       },
 
       // TODO(sorvell): building this list is a perf issue; 
@@ -214,28 +220,25 @@
 
       // Ensures that the rendered node list inside `node` is `children`.
       _updateChildNodes: function(node, children) {
-        // Add the children that need to be added. 
-        // NOTE: we do this left-to-right in order to maintain the same
-        // attach order as the platform does.
-        for (var i=0, l=children.length, c, b; (i<l) && (c=children[i]); i++) {
-          b = children[i-1] || null;
-          if (c.parentNode != node || c.previousSibling != b) {
-            insertBefore(node, c, b && b.nextSibling)
+        var splices = ArraySplice.calculateSplices(children, node.childNodes);
+        for (var i=0; i<splices.length; i++) {
+          var s = splices[i];
+          // remove
+          for (var j=0, c; j < s.removed.length; j++) {
+            c = s.removed[j];
+            if (c.previousSibling == children[s.index-1]) {
+              remove(c);
+            }
+          }
+          // insert
+          for (var idx=s.index, c, o; idx < s.index + s.addedCount; idx++) {
+            c = children[idx];
+            o = node.childNodes[idx];
+            while (o && o === c) {
+              o = o.nexSibling;
+            }
+            insertBefore(node, c, o);
           }
-        }
-        // We just added nodes in order, starting from an unknown point;
-        // therefore delete everything before and after the expected children.
-        var last = children[children.length-1];
-        var lastChild = node.lastChild;
-        while (lastChild && lastChild != last) {
-          node.removeChild(lastChild);
-          lastChild = node.lastChild;
-        }
-        var first = children[0];
-        var firstChild = node.firstChild;
-        while (firstChild && firstChild != first) {
-          node.removeChild(firstChild);
-          firstChild = node.firstChild;
         }
       },
 
@@ -277,6 +280,14 @@
         node = node || this;
         var list = node.querySelectorAll(selector);
         return list;
+      },
+
+      // extension point for system overriding
+      _elementAdd: function(node) {
+      },
+
+      // extension point for system overriding
+      _elementRemove: function(node) {
       }
 
     });
@@ -392,12 +403,14 @@
       distribute: function() {
         // TODO(kschaaf): use counter
         this._batching = false;
-        this.host._distributeContent();
+        if (!this.host.__shadyDomIsClean) {
+          this.host._distributeContent();
+        }
       },
 
       _maybeDistribute: function() {
         if (!this._batching) {
-          this.host._distributeContent();
+          this.distribute();
         }
       },
 
@@ -422,8 +435,10 @@
         } else {
           container.appendChild(node);
         }
+        return node;
       },
 
+      // TODO(sorvell): implement skipDistribute for other methods!!
       insertBefore: function(node, ref_node, container) {
         container = container || this.node;
         if (ref_node) {
@@ -435,25 +450,38 @@
               throw Error('The ref_node to be inserted before is not a child ' +
                 'of this node');
             }
+            // TODO(sorvell): need to distirbute if inserting a <content> as node 
+            // or in doc fragment!
             // handle document fragments
             if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-              var n = node.lastChild;
+              var n = node.firstChild;
               while (n) {
-                children.splice(index, 0, n);
+                children.splice(index++, 0, n);
                 n.lightParent = container;
-                n = n.previousSibling;
+                var next = n.nextSibling;
+                if (container.__skipDistribute) {
+                  container.insertBefore(n, ref_node);
+                }
+                n = next;
               }
             } else {
               children.splice(index, 0, node);
               node.lightParent = container;
+              if (container.__skipDistribute) {
+                container.insertBefore(node, ref_node);
+              }
+            }
+            if (!container.__skipDistribute) {
+              this.host.__shadyDomIsClean = false;
+              this._maybeDistribute();
             }
-            this._maybeDistribute();
           } else {
             container.insertBefore(node, ref_node);
           }
         } else {
           this.appendChild(node, container);
         }
+        return node;
       },
 
       /**
diff --git a/src/features/mini/ready.html b/src/features/mini/ready.html
index 95e28bcaa9..6c0a260d81 100644
--- a/src/features/mini/ready.html
+++ b/src/features/mini/ready.html
@@ -32,7 +32,7 @@
 
   using('Base', function(Base) {
 
-    var hostStack = [];
+    hostStack = [];
 
     Base.addFeature({
 
@@ -60,6 +60,10 @@
         if (!this._clients) {
           this._clients = [];
         }
+        this._beginHost();
+      },
+
+      _beginHost: function() {
         hostStack.push(this);
       },
 
diff --git a/src/lib/array-splice.html b/src/lib/array-splice.html
new file mode 100644
index 0000000000..e88ac06cb3
--- /dev/null
+++ b/src/lib/array-splice.html
@@ -0,0 +1,262 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script>
+modulate('ArraySplice', function() {
+  
+  function newSplice(index, removed, addedCount) {
+    return {
+      index: index,
+      removed: removed,
+      addedCount: addedCount
+    };
+  }
+
+  var EDIT_LEAVE = 0;
+  var EDIT_UPDATE = 1;
+  var EDIT_ADD = 2;
+  var EDIT_DELETE = 3;
+
+  function ArraySplice() {}
+
+  ArraySplice.prototype = {
+
+    // Note: This function is *based* on the computation of the Levenshtein
+    // "edit" distance. The one change is that "updates" are treated as two
+    // edits - not one. With Array splices, an update is really a delete
+    // followed by an add. By retaining this, we optimize for "keeping" the
+    // maximum array items in the original array. For example:
+    //
+    //   'xxxx123' -> '123yyyy'
+    //
+    // With 1-edit updates, the shortest path would be just to update all seven
+    // characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+    // leaves the substring '123' intact.
+    calcEditDistances: function(current, currentStart, currentEnd,
+                                old, oldStart, oldEnd) {
+      // "Deletion" columns
+      var rowCount = oldEnd - oldStart + 1;
+      var columnCount = currentEnd - currentStart + 1;
+      var distances = new Array(rowCount);
+
+      // "Addition" rows. Initialize null column.
+      for (var i = 0; i < rowCount; i++) {
+        distances[i] = new Array(columnCount);
+        distances[i][0] = i;
+      }
+
+      // Initialize null row
+      for (var j = 0; j < columnCount; j++)
+        distances[0][j] = j;
+
+      for (var i = 1; i < rowCount; i++) {
+        for (var j = 1; j < columnCount; j++) {
+          if (this.equals(current[currentStart + j - 1], old[oldStart + i - 1]))
+            distances[i][j] = distances[i - 1][j - 1];
+          else {
+            var north = distances[i - 1][j] + 1;
+            var west = distances[i][j - 1] + 1;
+            distances[i][j] = north < west ? north : west;
+          }
+        }
+      }
+
+      return distances;
+    },
+
+    // This starts at the final weight, and walks "backward" by finding
+    // the minimum previous weight recursively until the origin of the weight
+    // matrix.
+    spliceOperationsFromEditDistances: function(distances) {
+      var i = distances.length - 1;
+      var j = distances[0].length - 1;
+      var current = distances[i][j];
+      var edits = [];
+      while (i > 0 || j > 0) {
+        if (i == 0) {
+          edits.push(EDIT_ADD);
+          j--;
+          continue;
+        }
+        if (j == 0) {
+          edits.push(EDIT_DELETE);
+          i--;
+          continue;
+        }
+        var northWest = distances[i - 1][j - 1];
+        var west = distances[i - 1][j];
+        var north = distances[i][j - 1];
+
+        var min;
+        if (west < north)
+          min = west < northWest ? west : northWest;
+        else
+          min = north < northWest ? north : northWest;
+
+        if (min == northWest) {
+          if (northWest == current) {
+            edits.push(EDIT_LEAVE);
+          } else {
+            edits.push(EDIT_UPDATE);
+            current = northWest;
+          }
+          i--;
+          j--;
+        } else if (min == west) {
+          edits.push(EDIT_DELETE);
+          i--;
+          current = west;
+        } else {
+          edits.push(EDIT_ADD);
+          j--;
+          current = north;
+        }
+      }
+
+      edits.reverse();
+      return edits;
+    },
+
+    /**
+     * Splice Projection functions:
+     *
+     * A splice map is a representation of how a previous array of items
+     * was transformed into a new array of items. Conceptually it is a list of
+     * tuples of
+     *
+     *   <index, removed, addedCount>
+     *
+     * which are kept in ascending index order of. The tuple represents that at
+     * the |index|, |removed| sequence of items were removed, and counting forward
+     * from |index|, |addedCount| items were added.
+     */
+
+    /**
+     * Lacking individual splice mutation information, the minimal set of
+     * splices can be synthesized given the previous state and final state of an
+     * array. The basic approach is to calculate the edit distance matrix and
+     * choose the shortest path through it.
+     *
+     * Complexity: O(l * p)
+     *   l: The length of the current array
+     *   p: The length of the old array
+     */
+    calcSplices: function(current, currentStart, currentEnd,
+                          old, oldStart, oldEnd) {
+      var prefixCount = 0;
+      var suffixCount = 0;
+
+      var minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+      if (currentStart == 0 && oldStart == 0)
+        prefixCount = this.sharedPrefix(current, old, minLength);
+
+      if (currentEnd == current.length && oldEnd == old.length)
+        suffixCount = this.sharedSuffix(current, old, minLength - prefixCount);
+
+      currentStart += prefixCount;
+      oldStart += prefixCount;
+      currentEnd -= suffixCount;
+      oldEnd -= suffixCount;
+
+      if (currentEnd - currentStart == 0 && oldEnd - oldStart == 0)
+        return [];
+
+      if (currentStart == currentEnd) {
+        var splice = newSplice(currentStart, [], 0);
+        while (oldStart < oldEnd)
+          splice.removed.push(old[oldStart++]);
+
+        return [ splice ];
+      } else if (oldStart == oldEnd)
+        return [ newSplice(currentStart, [], currentEnd - currentStart) ];
+
+      var ops = this.spliceOperationsFromEditDistances(
+          this.calcEditDistances(current, currentStart, currentEnd,
+                                 old, oldStart, oldEnd));
+
+      var splice = undefined;
+      var splices = [];
+      var index = currentStart;
+      var oldIndex = oldStart;
+      for (var i = 0; i < ops.length; i++) {
+        switch(ops[i]) {
+          case EDIT_LEAVE:
+            if (splice) {
+              splices.push(splice);
+              splice = undefined;
+            }
+
+            index++;
+            oldIndex++;
+            break;
+          case EDIT_UPDATE:
+            if (!splice)
+              splice = newSplice(index, [], 0);
+
+            splice.addedCount++;
+            index++;
+
+            splice.removed.push(old[oldIndex]);
+            oldIndex++;
+            break;
+          case EDIT_ADD:
+            if (!splice)
+              splice = newSplice(index, [], 0);
+
+            splice.addedCount++;
+            index++;
+            break;
+          case EDIT_DELETE:
+            if (!splice)
+              splice = newSplice(index, [], 0);
+
+            splice.removed.push(old[oldIndex]);
+            oldIndex++;
+            break;
+        }
+      }
+
+      if (splice) {
+        splices.push(splice);
+      }
+      return splices;
+    },
+
+    sharedPrefix: function(current, old, searchLength) {
+      for (var i = 0; i < searchLength; i++)
+        if (!this.equals(current[i], old[i]))
+          return i;
+      return searchLength;
+    },
+
+    sharedSuffix: function(current, old, searchLength) {
+      var index1 = current.length;
+      var index2 = old.length;
+      var count = 0;
+      while (count < searchLength && this.equals(current[--index1], old[--index2]))
+        count++;
+
+      return count;
+    },
+
+    calculateSplices: function(current, previous) {
+      return this.calcSplices(current, 0, current.length, previous, 0,
+                              previous.length);
+    },
+
+    equals: function(currentValue, previousValue) {
+      return currentValue === previousValue;
+    }
+  };
+
+  // exports
+  return new ArraySplice();
+
+});
+</script>
\ No newline at end of file
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 03de5ea8b0..00553f8c20 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -131,15 +131,11 @@
           return;
         }
         if (this.host) {
-          // this.host.localDom.batch(function() {
-          //   this._render(splices);
-          // }, this);
           this.host.localDom.batch();
           this._render(splices);
-          debounceDistribute = Debounce.call(this, debounceDistribute, function() {
-            console.log('distribute');
-            this.host.localDom.distribute();
-          }.bind(this));
+          this.host.debounce('distribute', function() {
+            this.localDom.distribute();
+          });
         } else {
           this._render(splices);
         }
diff --git a/test/unit/content.html b/test/unit/content.html
index b283e7edfc..cef2e55ca1 100644
--- a/test/unit/content.html
+++ b/test/unit/content.html
@@ -92,6 +92,16 @@
              '<a class="a">a</a> <a class="b">b</a>',
              '<content select=".b"></content><content select=".a"></content>',
              '<a class="b">b</a><a class="a">a</a>');
+
+  testRender('select .b .a 2',
+             '<a class="a">a</a> <a class="b">b</a> <a class="b">c</a>',
+             '<content select=".b"></content><content select=".a"></content>',
+             '<a class="b">b</a><a class="b">c</a><a class="a">a</a>');
+
+  testRender('select [c] *',
+             '<span>a</span><span>b</span><span c>c</span><span>d</span>',
+             '<content select="[c]"></content><content></content>',
+             '<span c="">c</span><span>a</span><span>b</span><span>d</span>');
 });
 
 
diff --git a/test/unit/projection-elements.html b/test/unit/projection-elements.html
index 90e88d6016..75de597fae 100644
--- a/test/unit/projection-elements.html
+++ b/test/unit/projection-elements.html
@@ -21,7 +21,11 @@
 </template>
 <script>
   Polymer({
-    is: 'x-rereproject'
+    is: 'x-rereproject',
+    attachedCount: 0,
+    attached: function() {
+      this.attachedCount++;
+    }
   });
 </script>
 
diff --git a/test/unit/projection.js b/test/unit/projection.js
index 138600a69f..5bae5235db 100644
--- a/test/unit/projection.js
+++ b/test/unit/projection.js
@@ -167,6 +167,21 @@ suite('projection', function() {
     assert.equal(rere.localDom.querySelectorAll('#local').length, 0);
   });
 
+  test('localDom.insertBefore first element results in minimal change', function() {
+    var test = document.querySelector('x-test');
+    var children = test.localDom.children();
+    var rere = test.localDom.querySelector('x-rereproject');
+    assert.equal(rere.attachedCount, 1);
+    var s = document.createElement('span');
+    s.id = 'local-first';
+    s.textContent = 'Local First';
+    test.localDom.insertBefore(s, children[0]);
+    assert.equal(test.localDom.querySelector('#local-first'), s);
+    assert.equal(rere.attachedCount, 1);
+    test.localDom.removeChild(s);
+    assert.equal(rere.attachedCount, 1);
+  });
+
   test('localDom.appendChild (fragment)', function() {
     var test = document.querySelector('x-test');
     var rere = test.localDom.querySelector('x-rereproject');

From 66d84056453d1c7cdafedfdcd46df39c500408c5 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Sat, 21 Feb 2015 03:40:37 -0800
Subject: [PATCH 09/14] Improve add/remove render efficiency for array and view
 sort cases.

---
 src/lib/collection.html        |  33 +++++--
 src/lib/template/x-repeat.html | 172 +++++++++++++++++++++++++++------
 2 files changed, 169 insertions(+), 36 deletions(-)

diff --git a/src/lib/collection.html b/src/lib/collection.html
index 2e7768b4e5..5b77e39ef8 100644
--- a/src/lib/collection.html
+++ b/src/lib/collection.html
@@ -24,6 +24,8 @@
     this.callbacks = [];
     this.debounce = null;
     this.map = null;
+    this.added = [];
+    this.removed = [];
 
     if (!noObserve) {
       ArrayObserve.observe(userArray, this.applySplices.bind(this));
@@ -48,30 +50,49 @@
       }
     },
 
-    add: function(item, batch) {
+    add: function(item, squelch) {
       var key = this.store.push(item) - 1;
       if (this.map) {
         this.map.set(item, key);
       }
-      if (!batch) {
+      if (!squelch) {
+        this.added.push(key);
         this.debounce = Debounce(this.debounce, this.notify.bind(this));
       }
       return key;
     },
 
-    remove: function(item, batch) {
-      var key = this.getKey(item);
+    removeKey: function(key) {
+      if (this.map) {
+        this.map.delete(this.store[key]);
+      }
       delete this.store[key];
+      this.removed.push(key);
+      this.debounce = Debounce(this.debounce, this.notify.bind(this));
+    },
+
+    remove: function(item, squelch) {
+      var key = this.getKey(item);
       if (this.map) {
         this.map.delete(item);
       }
-      if (!batch) {
+      delete this.store[key];
+      if (!squelch) {
+        this.removed.push(key);
         this.debounce = Debounce(this.debounce, this.notify.bind(this));
       }
       return key;
     },
 
     notify: function(splices) {
+      if (!splices) {
+        splices = [{
+          added: this.added,
+          removed: this.removed
+        }];
+        this.added = [];
+        this.removed = [];
+      }
       this.callbacks.forEach(function(cb) { 
         cb(splices);
       }, this);
@@ -97,7 +118,7 @@
       this.store[key] = value;
     },
 
-    getItem:  function(key) {
+    getItem: function(key) {
       return this.store[key];
     },
 
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 00553f8c20..dabfffa762 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -143,56 +143,167 @@
 
       _render: function(splices) {
         var c = this.collection;
-        var rowForKey = this._rowForKey = {};
-        var keys;
-        if (!this._sortFn && splices) {
-          keys = this._orderedKeys;
-          this._applySplices(splices);
+        if (splices) {
+          if (this._sortFn) {
+            this._applySplicesViewSort(splices);
+          } else {
+            this._applySplicesArraySort(splices);
+          }
         } else {
-          keys = this._orderedKeys = c.getKeys();
-        }
-        // Filter
-        if (this._filterFn) {
-          keys = keys.filter(function(a, b) {
-            return this._filterFn(c.getItem(a), c.getItem(b));
-          }, this);
+          this._sortAndFilter();
         }
-        // Sort
-        if (this._sortFn) {
-          keys.sort(function(a, b) {
-            return this._sortFn(c.getItem(a), c.getItem(b));
-          }.bind(this));
-        }
-        // Assign
+        var rowForKey = this._rowForKey = {};
+        var keys = this._orderedKeys;
+        // Assign items and keys
         this.rows = this.rows || [];
-
         for (var i=0; i<keys.length; i++) {
+          var key = keys[i];
           var row = this.rows[i];
           if (!row) {
             this.rows.push(row = this._insertRow(i));
           }
-          var key = keys[i];
           row.item = c.getItem(key);
           row.key = key;
           rowForKey[key] = i;
         }
         // Remove extra
         for (; i<this.rows.length; i++) {
-          this._detachRow(this.rows[i]);
+          this._detachRow(i);
         }
         this.rows.splice(keys.length, this.rows.length-keys.length);
       },
 
-      _applySplices: function(splices) {
+      _sortAndFilter: function() {
+        var c = this.collection;
+        this._orderedKeys = c.getKeys();
+        // Filter
+        if (this._filterFn) {
+          this._orderedKeys = this._orderedKeys.filter(function(a) {
+            return this._filterFn(c.getItem(a));
+          }, this);
+        }
+        // Sort
+        if (this._sortFn) {
+          this._orderedKeys.sort(function(a, b) {
+            return this._sortFn(c.getItem(a), c.getItem(b));
+          }.bind(this));
+        }
+      },
+
+      _applySplicesViewSort: function(splices) {
+        var c = this.collection;
         var keys = this._orderedKeys;
-        for (var i=0; i<splices.length; i++) {
-          var s = splices[i];
-          var args = [s.index, s.removed.length].concat(s.added);
-          keys.splice.apply(keys, args);
+        var rows = this.rows;
+        var removedRows = [];
+        var addedKeys = [];
+        var pool = [];
+        splices.forEach(function(s) {
+          // Collect all removed row idx's
+          for (var i=0; i<s.removed.length; i++) {
+            var idx = this._rowForKey[s.removed[i]];
+            if (idx != null) {
+              removedRows.push(idx);
+            }
+          }
+          // Collect all added keys
+          for (i=0; i<s.added.length; i++) {
+            addedKeys.push(s.added[i]);
+          }
+        }, this);
+        if (removedRows.length) {
+          // Sort removed rows idx's
+          removedRows.sort();
+          // Remove keys and pool rows (backwards, so we don't invalidate rowForKey)
+          for (i=removedRows.length-1; i>=0 ; i--) {
+            var idx = removedRows[i];
+            pool.push(this._detachRow(idx));
+            rows.splice(idx, 1);
+            keys.splice(idx, 1);
+          }
+        }
+        if (addedKeys.length) {
+          // Filter added keys
+          if (this._filterFn) {
+            addedKeys = addedKeys.filter(function(a) {
+              return this._filterFn(c.getItem(a));
+            }, this);
+          }
+          // Sort added keys
+          addedKeys.sort(function(a, b) {
+            return this._sortFn(c.getItem(a), c.getItem(b));
+          }, this);
+          // Insert new rows using sort (from pool or newly created)
+          var start = 0;
+          for (i=0; i<addedKeys.length; i++) {
+            start = this._insertRowIntoViewSort(start, addedKeys[i], pool);
+          }          
         }
       },
 
-      _detachRow: function(row) {
+      _insertRowIntoViewSort: function(start, key, pool) {
+        var c = this.collection;
+        var item = c.getItem(key);
+        var end = this.rows.length - 1;
+        var idx = -1;
+        // Binary search for insertion point
+        while (start <= end) {
+          var mid = (start + end) >> 1;
+          var midKey = this._orderedKeys[mid];
+          var cmp = this._sortFn(c.getItem(midKey), item);
+          if (cmp < 0) {
+            start = mid + 1;
+          } else if (cmp > 0) {
+            end = mid - 1;
+          } else {
+            idx = mid;
+            break;
+          }
+        }
+        if (idx < 0) {
+          idx = end + 1;
+        }
+        // Insert key & row at insertion point
+        this._orderedKeys.splice(idx, 0, key);
+        this.rows.splice(idx, 0, this._insertRow(idx, pool));
+        return idx;
+      },
+
+      _applySplicesArraySort: function(splices) {
+        var keys = this._orderedKeys;
+        var pool = [];
+        splices.forEach(function(s) {
+          // Remove & pool rows first, to ensure we can fully reuse removed rows
+          for (var i=0; i<s.removed.length; i++) {
+            pool.push(this._detachRow(s.index + i));
+          }
+          this.rows.splice(s.index, s.removed.length);
+        }, this);
+        var filterDelta = 0;
+        splices.forEach(function(s) {
+          // Filter added keys
+          var addedKeys = s.added;
+          if (this._filterFn) {
+            addedKeys = addedKeys.filter(function(a) {
+              return this._filterFn(c.getItem(a));
+            }, this);
+            filterDelta += (s.added.length - added.length);            
+          }
+          var idx = s.index - filterDelta;
+          // Apply splices to keys
+          var args = [idx, s.removed.length].concat(addedKeys);
+          keys.splice.apply(keys, args);
+          // Insert new rows (from pool or newly created)
+          var addedRows = [];
+          for (i=0; i<s.added.length; i++) {
+            addedRows.push(this._insertRow(idx + i, pool));
+          }
+          args = [s.index, 0].concat(addedRows);
+          this.rows.splice.apply(this.rows, args);
+        }, this);
+      },
+
+      _detachRow: function(idx) {
+        var row = this.rows[idx];
         for (var i=0; i<row._children.length; i++) {
           var el = row._children[i];
           if (this.host) {
@@ -201,10 +312,11 @@
           }
           row.root.appendChild(el);
         }
+        return row;
       },
 
-      _insertRow: function(idx) {
-        var row = this._generateRow(idx);
+      _insertRow: function(idx, pool) {
+        var row = (pool && pool.pop()) || this._generateRow(idx);
         var beforeRow = this.rows[idx];
         var beforeNode = beforeRow ? beforeRow._children[0] : this;
         var parentNode = this.lightDom.elementParent();

From c6b9fa7cdbb46a1616b757a9a31811c83a939028 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 23 Feb 2015 07:41:11 -0800
Subject: [PATCH 10/14] content optimizations

---
 src/features/mini/content.html | 48 +++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/features/mini/content.html b/src/features/mini/content.html
index 3a5f0eaf33..10a57dbadd 100644
--- a/src/features/mini/content.html
+++ b/src/features/mini/content.html
@@ -54,12 +54,15 @@
 
       _distributeContent: function() {
         // logically distribute self
+        this._distributionClean = false;
         this._prepareContent();
         // now fully distribute/compose "clients"
         var c$ = this._getDistributionClients();
         for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
           c._distributeContent();
         }
+        this._composeContent();
+        this._distributionClean = true;
       },
 
       _prepareContent: function() {
@@ -81,7 +84,6 @@
           this.appendChild(this.root);
           this.root = this;
         }
-        this.__shadyDomIsClean = true;
       },
 
       // This is a polyfill for Element.prototype.matches, which is sometimes
@@ -166,6 +168,7 @@
           hasInsertionPoint = this._distributePool(children[i], pool) ||
             hasInsertionPoint;
         }
+        //TODO(sorvell): need to unset this if the insertion point is removed
         node.__skipDistribute = !hasInsertionPoint;
         return hasInsertionPoint;
       },
@@ -403,7 +406,7 @@
       distribute: function() {
         // TODO(kschaaf): use counter
         this._batching = false;
-        if (!this.host.__shadyDomIsClean) {
+        if (!this.host._distributionClean) {
           this.host._distributeContent();
         }
       },
@@ -414,6 +417,10 @@
         }
       },
 
+      _dirtyHost: function() {
+        this.host._distributionClean = false;
+      },
+
       appendChild: function(node, container) {
         container = container || this.node;
         if (this.host._useContent) {
@@ -431,6 +438,15 @@
             children.push(node);
             node.lightParent = container;
           }
+          if (container.__skipDistribute) {
+            if (container === this.node) {
+              this.host.appendChild(node);
+            } else {
+              container.appendChild(node);
+            }
+          } else {
+            this._dirtyHost();
+          }
           this._maybeDistribute();
         } else {
           container.appendChild(node);
@@ -458,23 +474,22 @@
               while (n) {
                 children.splice(index++, 0, n);
                 n.lightParent = container;
-                var next = n.nextSibling;
-                if (container.__skipDistribute) {
-                  container.insertBefore(n, ref_node);
-                }
-                n = next;
+                n = n.nextSibling;
               }
             } else {
               children.splice(index, 0, node);
               node.lightParent = container;
-              if (container.__skipDistribute) {
+            }
+            if (container.__skipDistribute) {
+              if (container === this.node) {
+                this.host.insertBefore(node, ref_node);
+              } else {
                 container.insertBefore(node, ref_node);
               }
+            } else {
+              this._dirtyHost();
             }
-            if (!container.__skipDistribute) {
-              this.host.__shadyDomIsClean = false;
-              this._maybeDistribute();
-            }
+            this._maybeDistribute();
           } else {
             container.insertBefore(node, ref_node);
           }
@@ -498,6 +513,15 @@
           }
           children.splice(index, 1);
           node.lightParent = null;
+          if (container.__skipDistribute) {
+            if (container === this.node) {
+              this.host.removeChild(node);
+            } else {
+              container.removeChild(node);
+            }
+          } else {
+            this._dirtyHost();
+          }
           this._maybeDistribute();
         } else {
           this.node.removeChild(node);

From e158dd0bb5ea215bf729a20fe1219a55a79262ec Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 23 Feb 2015 07:58:53 -0800
Subject: [PATCH 11/14] content: slight factoring

---
 src/features/mini/content.html | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/features/mini/content.html b/src/features/mini/content.html
index 10a57dbadd..8cf035a0bc 100644
--- a/src/features/mini/content.html
+++ b/src/features/mini/content.html
@@ -440,10 +440,9 @@
           }
           if (container.__skipDistribute) {
             if (container === this.node) {
-              this.host.appendChild(node);
-            } else {
-              container.appendChild(node);
+              container === this.host;
             }
+            container.appendChild(node);
           } else {
             this._dirtyHost();
           }
@@ -482,10 +481,9 @@
             }
             if (container.__skipDistribute) {
               if (container === this.node) {
-                this.host.insertBefore(node, ref_node);
-              } else {
-                container.insertBefore(node, ref_node);
+                container = this.host;
               }
+              container.insertBefore(node, ref_node);
             } else {
               this._dirtyHost();
             }
@@ -515,10 +513,9 @@
           node.lightParent = null;
           if (container.__skipDistribute) {
             if (container === this.node) {
-              this.host.removeChild(node);
-            } else {
-              container.removeChild(node);
+              container = this.host;
             }
+            container.removeChild(node);
           } else {
             this._dirtyHost();
           }

From 7dfbe5d961e3c6c5b71e424ca30ea8b0dda198ea Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 23 Feb 2015 11:02:56 -0800
Subject: [PATCH 12/14] content: refine when distribution can be avoided.

---
 src/features/mini/content.html | 41 +++++++++++++++++++++++++++++-----
 src/features/mini/ready.html   |  1 +
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/features/mini/content.html b/src/features/mini/content.html
index 8cf035a0bc..a54699b6ca 100644
--- a/src/features/mini/content.html
+++ b/src/features/mini/content.html
@@ -54,7 +54,6 @@
 
       _distributeContent: function() {
         // logically distribute self
-        this._distributionClean = false;
         this._prepareContent();
         // now fully distribute/compose "clients"
         var c$ = this._getDistributionClients();
@@ -62,11 +61,12 @@
           c._distributeContent();
         }
         this._composeContent();
-        this._distributionClean = true;
       },
 
       _prepareContent: function() {
         if (this._useContent) {
+          //console.log(this.is, 'dirty!');
+          this._distributionClean = false;
           // reset distributions
           this._resetDistribution(this.shadyRoot);
           // compute which nodes should be distributed where
@@ -80,6 +80,8 @@
         // compose self
         if (this._useContent) {
           this._composeTree(this);
+          this._distributionClean = true;
+          //console.log(this.is, 'clean!');
         } else if (this.root !== this) {
           this.appendChild(this.root);
           this.root = this;
@@ -421,8 +423,33 @@
         this.host._distributionClean = false;
       },
 
+      // Distribution can be avoided when:
+      // 1. a container is not a custom element or is a custom element without
+      // a shadyRoot.
+      // 2. a container has been run through distribution and marked as not 
+      // needing distribution (not a parent of an insertion point).
+      // 3. a container expicitly has the `skipDistribute` attribute. NOTE:
+      // this is experimental and exists so that appending a doc fragment with
+      // no insertion points can be fast pathed. If this is a good idea, then
+      // it's definitely something the annotator should help with.
+      _skipDistribution: function(container) {
+        // custom elements must distribute unless they don't have shady
+        // (marked via _useContent)
+        if (container._distributeContent) {
+          return !container._useContent;
+        } else {
+          // marked via distribution system
+          return (container.__skipDistribute || 
+            // marked explicitly
+            // TODO(sorvell): temporary, the annotator should help with this
+            (container.hasAttribute && 
+            container.hasAttribute('skipDistribute')));
+        }
+      },
+
       appendChild: function(node, container) {
         container = container || this.node;
+        this.host._elementAdd(node);
         if (this.host._useContent) {
           saveLightChildrenIfNeeded(container);
           var children = this.children(container);
@@ -438,9 +465,9 @@
             children.push(node);
             node.lightParent = container;
           }
-          if (container.__skipDistribute) {
+          if (this._skipDistribution(container)) {
             if (container === this.node) {
-              container === this.host;
+              container = this.host;
             }
             container.appendChild(node);
           } else {
@@ -456,6 +483,7 @@
       // TODO(sorvell): implement skipDistribute for other methods!!
       insertBefore: function(node, ref_node, container) {
         container = container || this.node;
+        this.host._elementAdd(node);
         if (ref_node) {
           if (this.host._useContent) {
             saveLightChildrenIfNeeded(container);
@@ -479,7 +507,7 @@
               children.splice(index, 0, node);
               node.lightParent = container;
             }
-            if (container.__skipDistribute) {
+            if (this._skipDistribution(container)) {
               if (container === this.node) {
                 container = this.host;
               }
@@ -503,6 +531,7 @@
       */
       removeChild: function(node, container) {
         container = container || this.node;
+        this.host._elementRemove(node);
         if (this.host._useContent) {
           var children = this.children(container);
           var index = children.indexOf(node);
@@ -511,7 +540,7 @@
           }
           children.splice(index, 1);
           node.lightParent = null;
-          if (container.__skipDistribute) {
+          if (this._skipDistribution(container)) {
             if (container === this.node) {
               container = this.host;
             }
diff --git a/src/features/mini/ready.html b/src/features/mini/ready.html
index 6c0a260d81..94e3ec2a32 100644
--- a/src/features/mini/ready.html
+++ b/src/features/mini/ready.html
@@ -82,6 +82,7 @@
         return !this._readied && (!this.host || this.host._readied);
       },
 
+      // TODO(sorvell): can this be collapsed with _distributeContent?
       _initializeContent: function() {
         // prepare root
         this._setupRoot();

From 440120e78bb5fae68ebe8cd276b0ed7cbf358547 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 23 Feb 2015 11:03:35 -0800
Subject: [PATCH 13/14] Allow elements created via template repeat to have the
 proper host.

---
 src/lib/template/templatizer.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index d7dd5ec8e8..cafa7dca8b 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -49,8 +49,8 @@
       archetype._notifyPath = this._notifyPathImpl;
       // boilerplate code
       var _constructor = this._constructorImpl;
-      var ctor = function TemplateInstance(model) {
-        _constructor.call(this, model);
+      var ctor = function TemplateInstance(model, host) {
+        _constructor.call(this, model, host);
       };
       // standard references
       ctor.prototype = archetype;
@@ -88,9 +88,16 @@
       }
     },
 
-    _constructorImpl: function(model) {
+    _constructorImpl: function(model, host) {
       this._setupConfigure(model);
+      this.host = host;
+      if (this.host) {
+        this.host._beginHost();
+      }
       this.root = this.instanceTemplate(this._template);
+      if (this.host) {
+        this.host._popHost();
+      }
       this._marshalTemplateContent();
       this._marshalAnnotatedNodes();
       this._marshalInstanceEffects();
@@ -99,7 +106,7 @@
     },
 
     stamp: function(model) {
-      return new this.ctor(model);
+      return new this.ctor(model, this.host);
     }
 
   };

From d951894682f5774706eabdef3ccb5b95178d58b1 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Mon, 23 Feb 2015 14:50:36 -0800
Subject: [PATCH 14/14] Allow items to be Collection. Fix typo bug.

---
 src/lib/template/x-repeat.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index dabfffa762..66bcd20e7f 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -114,7 +114,7 @@
       },
 
       _observeCollection: function(items) {
-        this.collection = Collection.get(items);
+        this.collection = Array.isArray(items) ? Collection.get(items) : items;
         this.collection.observe(this.boundCollectionObserver);
       },
 
@@ -286,7 +286,7 @@
             addedKeys = addedKeys.filter(function(a) {
               return this._filterFn(c.getItem(a));
             }, this);
-            filterDelta += (s.added.length - added.length);            
+            filterDelta += (s.added.length - addedKeys.length);            
           }
           var idx = s.index - filterDelta;
           // Apply splices to keys