Defer more of rendering to the runtime

This commit makes all tests pass with the new visitor structure,
significantly shrinking the size of compiled templates and making it
possible to do re-renders without having to execute a render function.

This also means that, in theory, hooks like `inline` can know the
structure of what they're invoking before actually invoking it, allowing
implementation to do smarter caching at the "statement" level.

This change is honestly mostly a wonky improvement, but it does help us
avoid making as many decisions in the compiled template, deferring them
to the runtime.

There is still a decent amount of cruft left as of this commit, which we
will remove momentarily.

Author: wycats

demos/compile-and-run.html

@@ -33,10 +33,12 @@
       var compiler    = requireModule('htmlbars-compiler'),
           DOMHelper   = requireModule('dom-helper').default,
           hooks       = requireModule('htmlbars-runtime').hooks,
-          helpers     = requireModule('htmlbars-runtime').helpers;
+          helpers     = requireModule('htmlbars-runtime').helpers,
+          render      = requireModule('htmlbars-runtime').render;
 
       var templateSource = localStorage.getItem('templateSource');
       var data = localStorage.getItem('templateData');
+      var shouldRender = localStorage.getItem('shouldRender');
 
       if (templateSource) {
         textarea.value = templateSource;
@@ -46,13 +48,19 @@
         dataarea.value = data;
       }
 
+      if (shouldRender === "false") {
+        skipRender.checked = true;
+      }
+
       button.addEventListener('click', function() {
         var source = textarea.value,
             data = dataarea.value,
+            shouldRender = !skipRender.checked,
             compileOptions;
 
         localStorage.setItem('templateSource', source);
         localStorage.setItem('templateData', data);
+        localStorage.setItem('shouldRender', shouldRender);
 
         try {
           data = JSON.parse(data);
@@ -70,10 +78,10 @@
           var templateSpec = compiler.compileSpec(source, compileOptions);
           output.innerHTML = '<pre><code>' + templateSpec + '</code></pre>';
 
-          if (!skipRender.checked) {
+          if (shouldRender) {
             var env = { dom: new DOMHelper(), hooks: hooks, helpers: helpers };
-            var template = compiler.compile(source, compileOptions);
-            var dom = template.render(data, env, { contextualElement: output }).fragment;
+            var template = compiler.template(templateSpec);
+            var dom = render(template, data, env, { contextualElement: output }).fragment;
 
             output.innerHTML += '<hr><pre><code>' + JSON.stringify(data) + '</code></pre><hr>';
             output.appendChild(dom);

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

@@ -20,7 +20,7 @@ FragmentJavaScriptCompiler.prototype.compile = function(opcodes, options) {
   this.namespaceFrameStack = [{namespace: null, depth: null}];
   this.domNamespace = null;
 
-  this.source.push('function build(dom) {\n');
+  this.source.push('function buildFragment(dom) {\n');
   processOpcodes(this, opcodes);
   this.source.push(this.indent+'}');
 

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

@@ -27,6 +27,9 @@ prototype.compile = function(opcodes, options) {
   this.parentCount = 0;
   this.indent = (options && options.indent) || "";
   this.hooks = {};
+  this.statements = [];
+  this.expressionStack = [];
+  this.augmentContext = [];
 
   processOpcodes(this, opcodes);
 
@@ -40,6 +43,8 @@ prototype.compile = function(opcodes, options) {
     createMorphsProgram: '',
     hydrateMorphsProgram: '',
     fragmentProcessingProgram: '',
+    statements: this.statements,
+    augmentContext: this.augmentContext,
     hasMorphs: false
   };
 
@@ -48,11 +53,11 @@ prototype.compile = function(opcodes, options) {
   if (this.morphs.length) {
     result.hasMorphs = true;
     morphs =
-      indent+'var morphs = new Array(' + this.morphs.length + ');\n';
+      indent+'  var 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+'  morphs['+i+'] = '+morph+';\n';
       }
   }
 
@@ -65,46 +70,54 @@ prototype.compile = function(opcodes, options) {
   }
 
   if (result.hasMorphs) {
-    indent = indent.substr(2);
     result.createMorphsProgram =
-      indent + 'function buildRenderNodes(dom, fragment, contextualElement) {\n' +
+      'function buildRenderNodes(dom, fragment, contextualElement) {\n' +
       result.fragmentProcessingProgram +
       morphs +
       indent + '  return morphs;\n' +
-      indent+'}\n';
+      indent+'}';
   } else {
     result.createMorphsProgram =
-      '  function buildRenderNodes() { return []; }\n';
+      'function buildRenderNodes() { return []; }';
   }
 
   return result;
 };
 
 prototype.prepareArray = function(length) {
   var values = [];
+  var expressionValues = [];
 
   for (var i = 0; i < length; i++) {
     values.push(this.stack.pop());
+    expressionValues.push(this.expressionStack.pop());
   }
 
+  this.expressionStack.push(expressionValues);
   this.stack.push('[' + values.join(', ') + ']');
 };
 
 prototype.prepareObject = function(size) {
   var pairs = [];
+  var expressionPairs = [];
 
   for (var i = 0; i < size; i++) {
     pairs.push(this.stack.pop() + ': ' + this.stack.pop());
+    expressionPairs.push(this.expressionStack.pop(), this.expressionStack.pop());
   }
 
+  this.expressionStack.push(expressionPairs);
   this.stack.push('{' + pairs.join(', ') + '}');
 };
 
 prototype.pushRaw = function(value) {
+  this.expressionStack.push(value);
   this.stack.push(value);
 };
 
 prototype.pushLiteral = function(value) {
+  this.expressionStack.push(value);
+
   if (typeof value === 'string') {
     this.stack.push(string(value));
   } else {
@@ -118,6 +131,8 @@ prototype.pushHook = function(name, args) {
 };
 
 prototype.pushGetHook = function(path, morphNum) {
+  this.expressionStack.push([ 'get', path ]);
+
   this.pushHook('get', [
     'env',
     'morphs[' + morphNum + ']',
@@ -127,6 +142,13 @@ prototype.pushGetHook = function(path, morphNum) {
 };
 
 prototype.pushSexprHook = function(morphNum) {
+  this.expressionStack.push([
+    'subexpr',
+    this.expressionStack.pop(),
+    this.expressionStack.pop(),
+    this.expressionStack.pop()
+  ]);
+
   this.pushHook('subexpr', [
     'env',
     'morphs[' + morphNum + ']',
@@ -138,6 +160,8 @@ prototype.pushSexprHook = function(morphNum) {
 };
 
 prototype.pushConcatHook = function(morphNum) {
+  this.expressionStack.push([ 'concat', this.expressionStack.pop() ]);
+
   this.pushHook('concat', [
     'env',
     'morphs[' + morphNum + ']',
@@ -151,6 +175,8 @@ prototype.printHook = function(name, args) {
 };
 
 prototype.printSetHook = function(name, index) {
+  this.augmentContext.push(name);
+
   this.printHook('set', [
     'env',
     'context',
@@ -160,6 +186,15 @@ prototype.printSetHook = function(name, index) {
 };
 
 prototype.printBlockHook = function(morphNum, templateId, inverseId) {
+  this.statements.push([
+    'block',
+    this.expressionStack.pop(), // path
+    this.expressionStack.pop(), // params
+    this.expressionStack.pop(), // hash
+    templateId,
+    inverseId
+  ]);
+
   this.printHook('block', [
     'env',
     'morphs[' + morphNum + ']',
@@ -173,17 +208,29 @@ prototype.printBlockHook = function(morphNum, templateId, inverseId) {
 };
 
 prototype.printInlineHook = function(morphNum) {
+  var path = this.stack.pop();
+  var params = this.stack.pop();
+  var hash = this.stack.pop();
+
+  var exprPath = this.expressionStack.pop();
+  var exprParams = this.expressionStack.pop();
+  var exprHash = this.expressionStack.pop();
+
+  this.statements.push([ 'inline', exprPath, exprParams, exprHash ]);
+
   this.printHook('inline', [
     'env',
     'morphs[' + morphNum + ']',
     'context',
-    this.stack.pop(), // path
-    this.stack.pop(), // params
-    this.stack.pop() // hash
+    path,
+    params,
+    hash
   ]);
 };
 
 prototype.printContentHook = function(morphNum) {
+  this.statements.push([ 'content', this.expressionStack.pop() ]);
+
   this.printHook('content', [
     'env',
     'morphs[' + morphNum + ']',
@@ -193,6 +240,13 @@ prototype.printContentHook = function(morphNum) {
 };
 
 prototype.printComponentHook = function(morphNum, templateId) {
+  this.statements.push([
+    'component',
+    this.expressionStack.pop(), // path
+    this.expressionStack.pop(), // attrs
+    templateId
+  ]);
+
   this.printHook('component', [
     'env',
     'morphs[' + morphNum + ']',
@@ -204,6 +258,12 @@ prototype.printComponentHook = function(morphNum, templateId) {
 };
 
 prototype.printAttributeHook = function(attrMorphNum) {
+  this.statements.push([
+    'attribute',
+    this.expressionStack.pop(), // name
+    this.expressionStack.pop()  // value;
+  ]);
+
   this.printHook('attribute', [
     'env',
     'morphs[' + attrMorphNum + ']',
@@ -213,6 +273,13 @@ prototype.printAttributeHook = function(attrMorphNum) {
 };
 
 prototype.printElementHook = function(morphNum) {
+  this.statements.push([
+    'element',
+    this.expressionStack.pop(), // path
+    this.expressionStack.pop(), // params
+    this.expressionStack.pop()  // hash
+  ]);
+
   this.printHook('element', [
     'env',
     'morphs[' + morphNum + ']',

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

@@ -88,6 +88,16 @@ TemplateCompiler.prototype.endProgram = function(program, programDepth) {
     templateSignature += ', blockArguments';
   }
 
+  var statements = hydrationPrograms.statements.map(function(s) {
+    return indent+'      '+JSON.stringify(s);
+  }).join(",\n");
+
+  var augmentContext = JSON.stringify(hydrationPrograms.augmentContext);
+
+  var templates = this.childTemplates.map(function(_, index) {
+    return 'child' + index;
+  }).join(', ');
+
   var template =
     '(function() {\n' +
     this.getChildTemplateVars(indent + '  ') +
@@ -96,18 +106,13 @@ TemplateCompiler.prototype.endProgram = function(program, programDepth) {
     indent+'    blockParams: ' + blockParams.length + ',\n' +
     indent+'    cachedFragment: null,\n' +
     indent+'    hasRendered: false,\n' +
-    indent+'    build: ' + fragmentProgram + ',\n' +
-    indent+'    buildRenderNodes: buildRenderNodes,\n' +
-    indent+'    render: function render(' + templateSignature + ') {\n' +
-    indent+'      var dom = env.dom;\n' +
-    this.getHydrationHooks(indent + '      ', this.hydrationCompiler.hooks) +
-    indent+'      var contextualElement = options && options.contextualElement;\n' +
-    indent+'      dom.detectNamespace(contextualElement);\n' +
-    indent+'      var morphs = rootNode.childNodes;\n' +
-    hydrationPrograms.hydrateMorphsProgram +
-    indent+'    }\n' +
+    indent+'    buildFragment: ' + fragmentProgram + ',\n' +
+    indent+'    buildRenderNodes: ' + hydrationPrograms.createMorphsProgram + ',\n' +
+    indent+'    statements: [\n' + statements + '\n' +
+    indent+'    ],\n' +
+    indent+'    augmentContext: ' + augmentContext + ',\n' +
+    indent+'    templates: [' + templates + ']\n' +
     indent+'  };\n' +
-    hydrationPrograms.createMorphsProgram +
     indent+'}())';
 
   this.templates.push(template);