Fixes #137 - adds support for dynamic HTML tag names

compiler/ElementNode.js

@@ -211,7 +211,13 @@ ElementNode.prototype = {
 
         var _this = this;
 
-        template.text('<' + name);
+        if (template.isExpression(name)) {
+            template.text('<');
+            template.write(name);
+        } else {
+            template.text('<' + name);
+        }
+
         this.forEachAttributeAnyNS(function (attr) {
             var prefix = attr.prefix;
             if (!prefix && attr.namespace) {
@@ -291,11 +297,19 @@ ElementNode.prototype = {
     },
     generateAfterCode: function (template) {
         var name = this.prefix ? this.prefix + ':' + this.localName : this.localName;
-        if (this.hasChildren()) {
-            template.text('</' + name + '>');
+
+
+        if (template.isExpression(name)) {
+            template.text('</');
+            template.write(name);
+            template.text('>');
         } else {
-            if (!this.startTagOnly && !this.allowSelfClosing) {
-                template.text('></' + name + '>');
+            if (this.hasChildren()) {
+                template.text('</' + name + '>');
+            } else {
+                if (!this.startTagOnly && !this.allowSelfClosing) {
+                    template.text('></' + name + '>');
+                }
             }
         }
     },

taglibs/html/HtmlElementNode.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2011 eBay Software Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+function HtmlElementNode(props) {
+    HtmlElementNode.$super.call(this);
+    if (props) {
+        this.setProperties(props);
+    }
+}
+HtmlElementNode.nodeType = 'element';
+
+HtmlElementNode.prototype = {
+    doGenerateCode: function (template) {
+        this.removeAttribute('tag-name');
+        this.localName = this.getProperty('tagName');
+        HtmlElementNode.$super.prototype.doGenerateCode.call(this, template);
+    },
+
+};
+
+module.exports = HtmlElementNode;

taglibs/html/marko-taglib.json

@@ -21,6 +21,13 @@
             },
             "node-class": "./DocTypeNode"
         },
+        "html-element": {
+            "@tag-name": "string",
+            "@*": {
+                "ignore": true
+            },
+            "node-class": "./HtmlElementNode"
+        },
         "*": {
             "transformer": "./html-tag-transformer"
         },

test/fixtures/templates/dynamic-tag-name/expected.html

@@ -0,0 +1 @@
+<hello-world class="my-class" foo="bar">My nested content</hello-world>

test/fixtures/templates/dynamic-tag-name/template.marko

@@ -0,0 +1,4 @@
+<html-element tag-name="hello-${data.myTagName}" class="my-class" foo="bar">
+    My nested content
+</html-element>
+<html-element tag-name="img" src="foo.jpg" self-closing="true"/>

test/fixtures/templates/dynamic-tag-name/test.js

@@ -0,0 +1,3 @@
+exports.templateData = {
+    myTagName: 'world'
+};