add support for parsing special tag element for dynamic tag names

ilkkah · May 2, 2014 · ae3cb42 · ae3cb42
1 parent bbb7176
commit ae3cb42
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -68,21 +68,28 @@ function createStringTemplate(source, view) {
 }
 
 function parseHtmlStart(tag, tagName, attributes, selfClosing) {
+  var lowerTagName = tagName.toLowerCase();
   var hooks;
-  if (tagName !== 'view' && !viewForTagName(tagName)) {
+  if (lowerTagName !== 'view' && !viewForTagName(lowerTagName)) {
     hooks = hooksFromAttributes(attributes, 'Element');
   }
   var attributesMap = parseAttributes(attributes);
-  var namespaceUri = (tagName.toLowerCase() === 'svg') ?
+  var namespaceUri = (lowerTagName === 'svg') ?
     templates.NAMESPACE_URIS.svg : parseNode.namespaceUri;
-  if (selfClosing || templates.VOID_ELEMENTS[tagName]) {
-    var element = new templates.Element(tagName, attributesMap, null, hooks, selfClosing, null, namespaceUri);
+  var Constructor = templates.Element;
+  if (lowerTagName === 'tag') {
+    Constructor = templates.DynamicElement;
+    tagName = attributesMap.is;
+    delete attributesMap.is;
+  }
+  if (selfClosing || templates.VOID_ELEMENTS[lowerTagName]) {
+    var element = new Constructor(tagName, attributesMap, null, hooks, selfClosing, null, namespaceUri);
     parseNode.content.push(element);
-    parseElementClose(tagName);
+    parseElementClose(lowerTagName);
   } else {
     parseNode = parseNode.child();
     parseNode.namespaceUri = namespaceUri;
-    var element = new templates.Element(tagName, attributesMap, parseNode.content, hooks, selfClosing, null, namespaceUri);
+    var element = new Constructor(tagName, attributesMap, parseNode.content, hooks, selfClosing, null, namespaceUri);
     parseNode.parent.content.push(element);
   }
 }
@@ -129,7 +136,10 @@ function parseAttributes(attributes) {
 function parseHtmlEnd(tag, tagName) {
   parseNode = parseNode.parent;
   var last = parseNode.last();
-  if (!(last instanceof templates.Element && last.tagName === tagName)) {
+  if (!(
+    (last instanceof templates.DynamicElement && tagName.toLowerCase() === 'tag') ||
+    (last instanceof templates.Element && last.tagName === tagName)
+  )) {
     throw new Error('Mismatched closing HTML tag: ' + tag);
   }
   parseElementClose(tagName);

diff --git a/test/templates.mocha.js b/test/templates.mocha.js
@@ -17,6 +17,7 @@ var model = {
     , matrix: [[0, 1], [1, 0]]
     , view: 'section'
     , html: '<b>Qua?</b>'
+    , tag: 'strong'
     }
   }
 };
@@ -181,6 +182,10 @@ describe('Parse and render HTML and blocks', function() {
   it('unescaped HTML', function() {
     test('<div>{{unescaped _page.html}}</div>', '<div><b>Qua?</b></div>');
   });
+
+  it('dynamic element', function() {
+    test('<div><tag is="{{_page.tag}}">Hi</tag></div>', '<div><strong>Hi</strong></div>');
+  });
 });
 
 describe('View insertion', function() {