Merge pull request #278 from oneeman/detect-clone-feature

Only use `cloneNode` when appropriate

Author: mixonic

packages/dom-helper/lib/main.js

@@ -37,6 +37,14 @@ var canRemoveSvgViewBoxAttribute = doc && (doc.createElementNS ? (function(docum
   return !element.getAttribute('viewBox');
 })(doc) : true);
 
+var canClone = doc && (function(document){
+  var element = document.createElement('div');
+  element.appendChild( document.createTextNode(' '));
+  element.appendChild( document.createTextNode(' '));
+  var clonedElement = element.cloneNode(true);
+  return clonedElement.childNodes[0].nodeValue === ' ';
+})(doc);
+
 // This is not the namespace of the element, but of
 // the elements inside that elements.
 function interiorNamespace(element){
@@ -119,6 +127,7 @@ function DOMHelper(_document){
   if (!this.document) {
     throw new Error("A document object must be passed to the DOMHelper, or available on the global scope");
   }
+  this.canClone = canClone;
   this.namespace = null;
 }
 

packages/htmlbars-compiler/lib/template-compiler.js

@@ -102,16 +102,20 @@ TemplateCompiler.prototype.endProgram = function(program, programDepth) {
     this.getHydrationHooks(indent + '      ', this.hydrationCompiler.hooks) +
     indent+'      dom.detectNamespace(contextualElement);\n' +
     indent+'      var fragment;\n' +
-    indent+'      if (this.cachedFragment === null) {\n' +
-    indent+'        fragment = this.build(dom);\n' +
-    indent+'        if (this.hasRendered) {\n' +
-    indent+'          this.cachedFragment = fragment;\n' +
-    indent+'        } else {\n' +
-    indent+'          this.hasRendered = true;\n' +
+    indent+'      if (env.useFragmentCache && dom.canClone) {\n' +
+    indent+'        if (this.cachedFragment === null) {\n' +
+    indent+'          fragment = this.build(dom);\n' +
+    indent+'          if (this.hasRendered) {\n' +
+    indent+'            this.cachedFragment = fragment;\n' +
+    indent+'          } else {\n' +
+    indent+'            this.hasRendered = true;\n' +
+    indent+'          }\n' +
     indent+'        }\n' +
-    indent+'      }\n' +
-    indent+'      if (this.cachedFragment) {\n' +
-    indent+'        fragment = dom.cloneNode(this.cachedFragment, true);\n' +
+    indent+'        if (this.cachedFragment) {\n' +
+    indent+'          fragment = dom.cloneNode(this.cachedFragment, true);\n' +
+    indent+'        }\n' +
+    indent+'      } else {\n' +
+    indent+'        fragment = this.build(dom);\n' +
     indent+'      }\n' +
     hydrationProgram +
     indent+'      return fragment;\n' +

packages/htmlbars-compiler/tests/html-compiler-test.js

@@ -98,7 +98,8 @@ function commonSetup() {
     dom: new DOMHelper(),
     hooks: hooks,
     helpers: helpers,
-    partials: partials
+    partials: partials,
+    useFragmentCache: true
   };
 }
 
@@ -437,6 +438,15 @@ test("Simple data binding on fragments", function() {
   equalTokens(fragment, '<div><p>brown cow</p> to the world</div>');
 });
 
+test("second render respects whitespace", function () {
+  var template = compile('Hello {{ foo }} ');
+  template.render({}, env, document.createElement('div'));
+  var fragment = template.render({}, env, document.createElement('div'));
+  equal(fragment.childNodes.length, 3, 'fragment contains 3 text nodes');
+  equal(getTextContent(fragment.childNodes[0]), 'Hello ', 'first text node ends with one space character');
+  equal(getTextContent(fragment.childNodes[2]), ' ', 'last text node contains one space character');
+});
+
 test("morph receives escaping information", function() {
   expect(3);