[WIP] Reactive rerendering

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, output);
+            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/dom-helper/lib/main.js

@@ -1,4 +1,4 @@
-import Morph from "./morph-range";
+import Morph from "../morph-range";
 import AttrMorph from "./morph-attr";
 import {
   buildHTMLDOM,
@@ -105,6 +105,15 @@ function buildSVGDOM(html, dom){
   return div.firstChild.childNodes;
 }
 
+function ElementMorph(element, dom, namespace) {
+  this.element = element;
+  this.dom = dom;
+  this.namespace = namespace;
+
+  this.state = {};
+  this.isDirty = true;
+}
+
 /*
  * A class wrapping DOM functions to address environment compatibility,
  * namespaces, contextual elements for morph un-escaped content
@@ -346,6 +355,10 @@ prototype.createAttrMorph = function(element, attrName, namespace){
   return new AttrMorph(element, attrName, this, namespace);
 };
 
+prototype.createElementMorph = function(element, namespace){
+  return new ElementMorph(element, this, namespace);
+};
+
 prototype.createUnsafeAttrMorph = function(element, attrName, namespace){
   var morph = this.createAttrMorph(element, attrName, namespace);
   morph.escaped = false;
@@ -357,7 +370,7 @@ prototype.createMorph = function(parent, start, end, contextualElement){
     throw new Error("Cannot pass a fragment as the contextual element to createMorph");
   }
 
-  if (!contextualElement && parent.nodeType === 1) {
+  if (!contextualElement && parent && parent.nodeType === 1) {
     contextualElement = parent;
   }
   var morph = new Morph(this, contextualElement);

packages/htmlbars-compiler/lib/compiler.js

@@ -1,6 +1,8 @@
 /*jshint evil:true*/
 import { preprocess } from "../htmlbars-syntax/parser";
 import TemplateCompiler from "./template-compiler";
+import { wrap } from "../htmlbars-runtime/hooks";
+import render from "../htmlbars-runtime/render";
 
 /*
  * Compile a string into a template spec string. The template spec is a string
@@ -65,31 +67,5 @@ export function template(templateSpec) {
  * @return {Template} A function for rendering the template
  */
 export function compile(string, options) {
-  return template(compileSpec(string, options));
-}
-
-/*
- * Compile a string into a template spec string. The template spec is a string
- * representation of a template. Usually, you would use compileSpec for
- * pre-compilation of a template on the server.
- *
- * Example usage:
- *
- *     var templateSpec = compileSpec("Howdy {{name}}");
- *     // This next step is basically what plain compile does
- *     var template = new Function("return " + templateSpec)();
- *
- * @method compileSpec
- * @param {String} string An htmlbars template string
- * @return {Function} A template spec string
- */
-export function compileSpec(string, options) {
-  var ast = preprocess(string, options);
-  var compiler = new TemplateCompiler(options);
-  var program = compiler.compile(ast);
-  return program;
-}
-
-export function template(program) {
-  return new Function("return " + program)();
+  return wrap(template(compileSpec(string, options)), render);
 }

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+'}');