Implement raw HTML values in Stencil langauge.

Closes #142.
bigeasy · Jul 21, 2013 · 2a8ce22 · 2a8ce22
1 parent 902b4ea
commit 2a8ce22
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 19 deletions.
diff --git a/stencil.js b/stencil.js
@@ -42,7 +42,7 @@ function createXMLTemplate (document, object) {
     //console.log(object) 
     document.appendChild(element)
     descend(element, object);
-    console.log(document.documentElement.toString())
+    //console.log(document.documentElement.toString())
 }
 
 var htmlparser = require('htmlparser2');
@@ -64,7 +64,7 @@ exports.createParser = function (base) {
             parser._tokenizer = tokenizer
             parser.parseComplete(body)
             // great. now it's time for a serializer.
-            //console.log(domutils.getOuterHTML(handler.dom[0]))
+            //console.log('here', domutils.getOuterHTML(handler.dom[0]))
             //console.log(require('util').inspect(handler.dom, false, null))
             var actual = new (xmldom.DOMParser)().parseFromString('<html/>')
             actual.documentElement.parentNode.removeChild(actual.documentElement)

diff --git a/t/directives/fixtures/html.stencil b/t/directives/fixtures/html.stencil
@@ -0,0 +1,5 @@
+<html>
+<body>
+<p><%- greeting %></p>
+</body>
+</html>
diff --git a/t/directives/html.t.js b/t/directives/html.t.js
@@ -1,31 +1,50 @@
 #!/usr/bin/env node
 
-require('./proof')(2, function (step, stencil, xstencil, fixture, ok, compare) {
+require('./proof')(4, function (step, stencil, xstencil, fixture, ok, compare) {
   var fs = require('fs');
 
   step(function () {
 
     xstencil.generate('fixtures/html.xml', {
       greeting: "Hello, <br/><a href='index.html'><em>World</em></a>!"
     }, step());
+    stencil.generate('fixtures/html.stencil', {
+      greeting: "Hello, <br/><a href='index.html'><em>World</em></a>!"
+    }, step());
     fixture('fixtures/html-generate.xml', step());
     fixture('fixtures/html-update.xml', step());
 
-  }, function (actual, generate, regenerate) {
+  }, function (xhtml, html, generate, regenerate) {
+
+    ok(compare(xhtml.document, generate), 'generate');
+
+    step(function () {
+
+      xstencil.reconstitute(xhtml.document, step());
+
+    }, function (xhtml) {
+
+      xstencil.regenerate(xhtml, { greeting: "Hello, Nurse!" }, step());
+
+    }, function (xhtml) {
+
+      ok(compare(xhtml.document, regenerate), 'regenerate');
+
+    });
 
-    ok(compare(actual.document, generate), 'generate');
+    ok(compare(html.document, generate), 'generate');
 
     step(function () {
 
-      xstencil.reconstitute(actual.document, step());
+      stencil.reconstitute(html.document, step());
 
-    }, function (actual) {
+    }, function (html) {
 
-      xstencil.regenerate(actual, { greeting: "Hello, Nurse!" }, step());
+      stencil.regenerate(html, { greeting: "Hello, Nurse!" }, step());
 
-    }, function (actual) {
+    }, function (html) {
 
-      ok(compare(actual.document, regenerate), 'regenerate');
+      ok(compare(html.document, regenerate), 'regenerate');
 
     });
   });

diff --git a/tokenizer.js b/tokenizer.js
@@ -248,15 +248,21 @@ Tokenizer.prototype.write = function(chunk){
 		*   directives
 		*/
 		else if(this._state === BEFORE_DIRECTIVE) {
-			if(c === "=") {
+			if(c === "=" || c === "-") {
+			// todo: abend if we never see a closing `%`.
 				this._state = BEFORE_TEXT_DIRECTIVE;
 				this._cbs.onopentagname("div");
+				this._attributes = {
+					"data-stencil": "true",
+					"data-stencil-directive": "value",
+					"data-stencil-attribute-type": c === "=" ? "text" : "html",
+				};
 			}
 		}
 		else if (this._state === BEFORE_TEXT_DIRECTIVE) {
 			if (!whitespace(c)) {
-				this._state = IN_TEXT_DIRECTIVE
-				this._sectionStart = this._index
+				this._state = IN_TEXT_DIRECTIVE;
+				this._sectionStart = this._index;
 			}
 		}
 		else if (this._state === IN_TEXT_DIRECTIVE) {
@@ -279,12 +285,9 @@ Tokenizer.prototype.write = function(chunk){
 		}
 		else if (this._state === AFTER_TEXT_DIRECTIVE) {
 			if(c === ">") {
-				this._emitAttributes({
-					"data-stencil": "true",
-					"data-stencil-directive": "value",
-					"data-stencil-attribute-type": "text",
-					"data-stencil-select": this._buffer.substring(this._sectionStart, this._sectionEnd)
-				})
+				this._attributes["data-stencil-select"] =
+					this._buffer.substring(this._sectionStart, this._sectionEnd)
+				this._emitAttributes(this._attributes);
 				this._cbs.onopentagend();
 				this._cbs.onclosetag("div")
 				this._state = TEXT;
@@ -577,6 +580,13 @@ Tokenizer.prototype.resume = function(){
 Tokenizer.prototype.end = function(chunk){
 	if(chunk) this.write(chunk);
 
+	switch (this._state) {
+	case IN_TEXT_DIRECTIVE:
+	case IN_TEXT_DIRECTIVE_WHITESPACE:
+	case AFTER_TEXT_DIRECTIVE:
+		throw new Error("unclosed text directive")
+	}
+
 	//if there is remaining data, emit it in a reasonable way
 	if(this._sectionStart > this._index){
 		var data = this._buffer.substr(this._sectionStart);