Element creation steps refined for performance: bindings are now applied before shadowRoot is created.

Author: sorvell

src/instance/base.js

@@ -31,22 +31,31 @@
       }
       this.created();
       this.prepareElement();
+      if (!this.ownerDocument.isStagingDocument) {
+        this.makeElementReady();
+      }
     },
     // system entry point, do not override
     prepareElement: function() {
+      if (this._elementPrepared) {
+        console.warn('Element already prepared', this.localName);
+        return;
+      }
       this._elementPrepared = true;
-      // install shadowRoots storage
+      // storage for shadowRoots info
       this.shadowRoots = {};
-      // storage for closeable observers.
-      this._observers = [];
       // install property observers
-      this.observeProperties();
+      this.createPropertyObserver();
       // install boilerplate attributes
       this.copyInstanceAttributes();
       // process input attributes
       this.takeAttributes();
       // add event listeners
       this.addHostListeners();
+    },
+    makeElementReady: function() {
+      // TODO(sorvell): We could create an entry point here
+      // for the user to compute property values.
       // process declarative resources
       this.parseDeclarations(this.__proto__);
       // TODO(sorvell): CE polyfill uses unresolved attribute to simulate
@@ -55,6 +64,8 @@
       this.removeAttribute('unresolved');
       // user entry point
       this.ready();
+      // turn on property observation and take any initial changes
+      this.openPropertyObserver();
     },
     attachedCallback: function() {
       this.cancelUnbindAll();

src/instance/mdv.js

@@ -39,6 +39,9 @@
         return observer;
       }
     },
+    bindFinished: function() {
+      this.makeElementReady();
+    },
     // TODO(sorvell): unbind/unbindAll has been removed, as public api, from
     // TemplateBinding. We still need to close/dispose of observers but perhaps
     // we should choose a more explicit name.

src/instance/properties.js

@@ -18,11 +18,11 @@
   var empty = [];
 
   var properties = {
-    observeProperties: function() {
+    createPropertyObserver: function() {
       var n$ = this._observeNames, pn$ = this._publishNames;
       if ((n$ && n$.length) || (pn$ && pn$.length)) {
         var self = this;
-        var o = this._propertyObserver = new CompoundObserver();
+        var o = this._propertyObserver = new CompoundObserver(true);
         // keep track of property observer so we can shut it down
         this.registerObservers([o]);
         for (var i=0, l=n$.length, n; (i<l) && (n=n$[i]); i++) {
@@ -38,7 +38,11 @@
             o.addPath(this, n);
           }
         }
-        o.open(this.notifyPropertyChanges, this);
+      }
+    },
+    openPropertyObserver: function() {
+      if (this._propertyObserver) {
+        this._propertyObserver.open(this.notifyPropertyChanges, this);
       }
     },
     notifyPropertyChanges: function(newValues, oldValues, paths) {
@@ -90,6 +94,7 @@
       }
     },
     registerObservers: function(observers) {
+      this._observers = this._observers || [];
       this._observers.push(observers);
     },
     // observer array items are arrays of observers.