perf(render): only create LightDom instances if the element has children

modules/angular2/src/render/dom/dom_renderer.ts

@@ -276,11 +276,15 @@ export class DomRenderer extends Renderer {
     for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
       var binder = binders[binderIdx];
       var element = boundElements[binderIdx];
+      var domEl = element.element;
 
       // lightDoms
       var lightDom = null;
-      if (isPresent(binder.componentId)) {
-        lightDom = this._shadowDomStrategy.constructLightDom(view, element.element);
+      // Note: for the root element we can't use the binder.elementIsEmpty
+      // information as we don't use the element from the ProtoView
+      // but an element from the document.
+      if (isPresent(binder.componentId) && (!binder.elementIsEmpty || isPresent(inplaceElement))) {
+        lightDom = this._shadowDomStrategy.constructLightDom(view, domEl);
       }
       element.lightDom = lightDom;
 
@@ -294,7 +298,7 @@ export class DomRenderer extends Renderer {
       // events
       if (isPresent(binder.eventLocals) && isPresent(binder.localEvents)) {
         for (var i = 0; i < binder.localEvents.length; i++) {
-          this._createEventListener(view, element.element, binderIdx, binder.localEvents[i].name,
+          this._createEventListener(view, domEl, binderIdx, binder.localEvents[i].name,
                                     binder.eventLocals);
         }
       }

modules/angular2/src/render/dom/view/element_binder.ts

@@ -15,10 +15,11 @@ export class ElementBinder {
   distanceToParent: number;
   propertySetters: Map<string, SetterFn>;
   hostActions: Map<string, AST>;
+  elementIsEmpty: boolean;
 
   constructor({textNodeIndices, contentTagSelector, nestedProtoView, componentId, eventLocals,
                localEvents, globalEvents, hostActions, parentIndex, distanceToParent,
-               propertySetters}: {
+               propertySetters, elementIsEmpty}: {
     contentTagSelector?: string,
     textNodeIndices?: List<number>,
     nestedProtoView?: protoViewModule.DomProtoView,
@@ -29,7 +30,8 @@ export class ElementBinder {
     parentIndex?: number,
     distanceToParent?: number,
     propertySetters?: Map<string, SetterFn>,
-    hostActions?: Map<string, AST>
+    hostActions?: Map<string, AST>,
+    elementIsEmpty?: boolean
   } = {}) {
     this.textNodeIndices = textNodeIndices;
     this.contentTagSelector = contentTagSelector;
@@ -42,6 +44,7 @@ export class ElementBinder {
     this.parentIndex = parentIndex;
     this.distanceToParent = distanceToParent;
     this.propertySetters = propertySetters;
+    this.elementIsEmpty = elementIsEmpty;
   }
 }
 

modules/angular2/src/render/dom/view/proto_view_builder.ts

@@ -57,7 +57,8 @@ export class ProtoViewBuilder {
 
         MapWrapper.forEach(dbb.hostPropertyBindings, (_, hostPropertyName) => {
           MapWrapper.set(propertySetters, hostPropertyName,
-                         setterFactory.createSetter(ebb.element, isPresent(ebb.componentId), hostPropertyName));
+                         setterFactory.createSetter(ebb.element, isPresent(ebb.componentId),
+                                                    hostPropertyName));
         });
 
         ListWrapper.forEach(dbb.hostActions, (hostAction) => {
@@ -73,7 +74,9 @@ export class ProtoViewBuilder {
       });
 
       MapWrapper.forEach(ebb.propertyBindings, (_, propertyName) => {
-        MapWrapper.set(propertySetters, propertyName, setterFactory.createSetter(ebb.element, isPresent(ebb.componentId), propertyName));
+        MapWrapper.set(
+            propertySetters, propertyName,
+            setterFactory.createSetter(ebb.element, isPresent(ebb.componentId), propertyName));
       });
 
       var nestedProtoView =
@@ -99,6 +102,7 @@ export class ProtoViewBuilder {
         textBindings: ebb.textBindings,
         readAttributes: ebb.readAttributes
       }));
+      var elementIsEmpty = this._isEmptyElement(ebb.element);
       ListWrapper.push(renderElementBinders, new ElementBinder({
                          textNodeIndices: ebb.textBindingIndices,
                          contentTagSelector: ebb.contentTagSelector,
@@ -112,7 +116,8 @@ export class ProtoViewBuilder {
                          localEvents: ebb.eventBuilder.buildLocalEvents(),
                          globalEvents: ebb.eventBuilder.buildGlobalEvents(),
                          hostActions: hostActions,
-                         propertySetters: propertySetters
+                         propertySetters: propertySetters,
+                         elementIsEmpty: elementIsEmpty
                        }));
     });
     return new api.ProtoViewDto({
@@ -126,6 +131,18 @@ export class ProtoViewBuilder {
       variableBindings: this.variableBindings
     });
   }
+
+  _isEmptyElement(el) {
+    var childNodes = DOM.childNodes(el);
+    for (var i = 0; i < childNodes.length; i++) {
+      var node = childNodes[i];
+      if ((DOM.isTextNode(node) && DOM.getText(node).trim().length > 0) ||
+          (DOM.isElementNode(node))) {
+        return false;
+      }
+    }
+    return true;
+  }
 }
 
 export class ElementBinderBuilder {