Add ability for templates to reuse morphs

Previously, if you wanted to re-render an HTMLBars template, the
template would create a brand new clone of the cached fragment and
create a new set of morphs.

This resulted in unnecessary work, since the static portions of the
rendered DOM already exist, and do not need to be re-cloned and
re-inserted into DOM.

This change begins the process of allowing an HTMLBars template to
update the output of a previous render, rather than starting from
scratch.

It introduces the concept of a (very WIP atm) “result” of a previous
render, which is passed back in to subsequent renders. At the moment,
the “result” is the fragment and morphs of the previous render. Soon,
it will become a more opaque data structure that includes the results
of sub-programs.

Author: Tom Dale and Yehuda Katz

packages/htmlbars-compiler/lib/hydration-javascript-compiler.js

@@ -30,16 +30,28 @@ prototype.compile = function(opcodes, options) {
 
   processOpcodes(this, opcodes);
 
-  var i, l;
+  var i, l, morphs;
+
+  var indent = this.indent + '  ';
+
   if (this.morphs.length) {
-    var morphs = "";
-    for (i = 0, l = this.morphs.length; i < l; ++i) {
-      var morph = this.morphs[i];
-      morphs += this.indent+'  var '+morph[0]+' = '+morph[1]+';\n';
-    }
-    this.source.unshift(morphs);
+    morphs =
+      indent+'var morphs = env.morphs;\n' +
+      indent+'if (!morphs) {\n' +
+      indent+'  morphs = new Array(' + this.morphs.length + ');\n';
+
+      for (i = 0, l = this.morphs.length; i < l; ++i) {
+        var morph = this.morphs[i];
+        morphs += indent+'  morphs['+i+'] = '+morph+';\n';
+      }
+
+      morphs += indent+'}\n';
+  } else {
+    morphs = indent+'var morphs;\n';
   }
 
+  this.source.unshift(morphs);
+
   if (this.fragmentProcessing.length) {
     var processing = "";
     for (i = 0, l = this.fragmentProcessing.length; i < l; ++i) {
@@ -130,7 +142,7 @@ prototype.printSetHook = function(name, index) {
 prototype.printBlockHook = function(morphNum, templateId, inverseId) {
   this.printHook('block', [
     'env',
-    'morph' + morphNum,
+    'morphs[' + morphNum + ']',
     'context',
     this.stack.pop(), // path
     this.stack.pop(), // params
@@ -143,7 +155,7 @@ prototype.printBlockHook = function(morphNum, templateId, inverseId) {
 prototype.printInlineHook = function(morphNum) {
   this.printHook('inline', [
     'env',
-    'morph' + morphNum,
+    'morphs[' + morphNum + ']',
     'context',
     this.stack.pop(), // path
     this.stack.pop(), // params
@@ -154,7 +166,7 @@ prototype.printInlineHook = function(morphNum) {
 prototype.printContentHook = function(morphNum) {
   this.printHook('content', [
     'env',
-    'morph' + morphNum,
+    'morphs[' + morphNum + ']',
     'context',
     this.stack.pop() // path
   ]);
@@ -163,7 +175,7 @@ prototype.printContentHook = function(morphNum) {
 prototype.printComponentHook = function(morphNum, templateId) {
   this.printHook('component', [
     'env',
-    'morph' + morphNum,
+    'morphs[' + morphNum + ']',
     'context',
     this.stack.pop(), // path
     this.stack.pop(), // attrs
@@ -174,7 +186,7 @@ prototype.printComponentHook = function(morphNum, templateId) {
 prototype.printAttributeHook = function(attrMorphNum, elementNum) {
   this.printHook('attribute', [
     'env',
-    'attrMorph' + attrMorphNum,
+    'morphs[' + attrMorphNum + ']',
     'element' + elementNum,
     this.stack.pop(), // name
     this.stack.pop() // value
@@ -202,13 +214,13 @@ prototype.createMorph = function(morphNum, parentPath, startIndex, endIndex, esc
     ","+(endIndex === null ? "-1" : endIndex)+
     (isRoot ? ",contextualElement)" : ")");
 
-  this.morphs.push(['morph' + morphNum, morph]);
+  this.morphs[morphNum] = morph;
 };
 
 prototype.createAttrMorph = function(attrMorphNum, elementNum, name, escaped, namespace) {
   var morphMethod = escaped ? 'createAttrMorph' : 'createUnsafeAttrMorph';
   var morph = "dom."+morphMethod+"(element"+elementNum+", '"+name+(namespace ? "', '"+namespace : '')+"')";
-  this.morphs.push(['attrMorph' + attrMorphNum, morph]);
+  this.morphs[attrMorphNum] = morph;
 };
 
 prototype.repairClonedNode = function(blankChildTextNodes, isElementChecked) {

packages/htmlbars-compiler/lib/hydration-opcode-compiler.js

@@ -28,7 +28,6 @@ function HydrationOpcodeCompiler() {
   this.currentDOMChildIndex = 0;
   this.morphs = [];
   this.morphNum = 0;
-  this.attrMorphNum = 0;
   this.element = null;
   this.elementNum = -1;
 }
@@ -60,7 +59,6 @@ HydrationOpcodeCompiler.prototype.startProgram = function(program, c, blankChild
   this.templateId = 0;
   this.currentDOMChildIndex = -1;
   this.morphNum = 0;
-  this.attrMorphNum = 0;
 
   var blockParams = program.blockParams || [];
 
@@ -193,7 +191,7 @@ HydrationOpcodeCompiler.prototype.attribute = function(attr) {
     this.element = null;
   }
 
-  var attrMorphNum = this.attrMorphNum++;
+  var attrMorphNum = this.morphNum++;
   this.opcode('createAttrMorph', attrMorphNum, this.elementNum, attr.name, escaped, namespace);
   this.opcode('printAttributeHook', attrMorphNum, this.elementNum);
 };

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

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