Clean up scope handling

This commit refactors the internal scope handling of templates so that
the concept of a scope, including block parameters, is rigorous. It also
stops leaking the caller's scope into a helper call.

This commit has two primary changes:

* The internal "scope" is now broken up into `self` and `locals`. Block
  helpers now receive `options.template.yield`, which is used like
  `options.template.yield([ optional, block, params ])`. If block
  parameters are supplied, HTMLBars will ask the host to create a new
  scope frame, and the `locals` hash will be populated with the yielded
  parameters. It is still possible to shift the `self` by using
  `options.template.render(newSelf, [ optional, block, params ])`,
  which will always create a new scope frame. Since self-shifting
  helpers are intended to be rare, `yield` is the new path, and
  encapsulates all of the scoping details.
* Helpers and block helpers no longer receive the `self` as `this`,
  because they are intended to be analogous to functions. Functions
  do not have access to the scope of the caller O_o. Note that hooks,
  which are used by the host to implement the scoping semantics,
  of course still have access to the scope.

Author: wycats

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

@@ -29,7 +29,7 @@ prototype.compile = function(opcodes, options) {
   this.hooks = {};
   this.statements = [];
   this.expressionStack = [];
-  this.augmentContext = [];
+  this.locals = [];
   this.hasOpenBoundary = false;
   this.hasCloseBoundary = false;
 
@@ -46,7 +46,7 @@ prototype.compile = function(opcodes, options) {
     hydrateMorphsProgram: '',
     fragmentProcessingProgram: '',
     statements: this.statements,
-    augmentContext: this.augmentContext,
+    locals: this.locals,
     hasMorphs: false
   };
 
@@ -148,7 +148,7 @@ prototype.pushConcatHook = function() {
 };
 
 prototype.printSetHook = function(name) {
-  this.augmentContext.push(name);
+  this.locals.push(name);
 };
 
 prototype.printBlockHook = function(templateId, inverseId) {

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

@@ -122,7 +122,7 @@ TemplateCompiler.prototype.endProgram = function(program, programDepth) {
     return indent+'      '+JSON.stringify(s);
   }).join(",\n");
 
-  var augmentContext = JSON.stringify(hydrationPrograms.augmentContext);
+  var locals = JSON.stringify(hydrationPrograms.locals);
 
   var templates = this.childTemplates.map(function(_, index) {
     return 'child' + index;
@@ -140,7 +140,7 @@ TemplateCompiler.prototype.endProgram = function(program, programDepth) {
     indent+'    buildRenderNodes: ' + hydrationPrograms.createMorphsProgram + ',\n' +
     indent+'    statements: [\n' + statements + '\n' +
     indent+'    ],\n' +
-    indent+'    augmentContext: ' + augmentContext + ',\n' +
+    indent+'    locals: ' + locals + ',\n' +
     indent+'    templates: [' + templates + ']\n' +
     indent+'  };\n' +
     indent+'}())';

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

@@ -49,9 +49,9 @@ test("a simple implementation of a dirtying rerender", function() {
       state.condition = normalized;
 
       if (normalized) {
-        return options.template.render(this);
+        return options.template.yield();
       } else {
-        return options.inverse.render(this);
+        return options.inverse.yield();
       }
     }
   });
@@ -86,7 +86,7 @@ test("a simple implementation of a dirtying rerender", function() {
 
 test("block helpers whose template has a morph at the edge", function() {
   registerHelper('id', function(params, hash, options) {
-    return options.template.render(this);
+    return options.template.yield();
   });
 
   var template = compile("{{#id}}{{value}}{{/id}}");
@@ -137,7 +137,7 @@ test("clean content doesn't get blown away", function() {
   };
 
   object.value = "hello";
-  textRenderNode.isDirty = true;
+  result.dirty();
   result.revalidate();
 });
 
@@ -160,7 +160,7 @@ test("helper calls follow the normal dirtying rules", function() {
 
   var textRenderNode = result.root.childNodes[0];
 
-  textRenderNode.isDirty = true;
+  result.dirty();
   result.revalidate();
 
   equalTokens(result.fragment, '<div>GOODBYE</div>');
@@ -171,7 +171,7 @@ test("helper calls follow the normal dirtying rules", function() {
 
   // Checks normalized value, not raw value
   object.value = "GoOdByE";
-  textRenderNode.isDirty = true;
+  result.dirty();
   result.revalidate();
 });
 
@@ -189,7 +189,7 @@ test("attribute nodes follow the normal dirtying rules", function() {
 
   var attrRenderNode = result.root.childNodes[0];
 
-  attrRenderNode.isDirty = true;
+  result.dirty();
   result.revalidate();
 
   equalTokens(result.fragment, "<div class='universe'>hello</div>");
@@ -199,7 +199,7 @@ test("attribute nodes follow the normal dirtying rules", function() {
   };
 
   object.value = "universe";
-  attrRenderNode.isDirty = true;
+  result.dirty();
   result.revalidate();
 });
 
@@ -217,7 +217,7 @@ test("attribute nodes w/ concat follow the normal dirtying rules", function() {
 
   var attrRenderNode = result.root.childNodes[0];
 
-  attrRenderNode.isDirty = true;
+  result.dirty();
   result.revalidate();
 
   equalTokens(result.fragment, "<div class='hello universe'>hello</div>");
@@ -227,6 +227,6 @@ test("attribute nodes w/ concat follow the normal dirtying rules", function() {
   };
 
   object.value = "universe";
-  attrRenderNode.isDirty = true;
+  result.dirty();
   result.revalidate();
 });