Fixes #541 - Fixed handling of placeholders in string attribute value

compiler/ast/HtmlAttribute/html/generateCode.js

@@ -49,6 +49,7 @@ function flattenAttrConcats(node) {
 
 function generateCodeForExpressionAttr(name, value, escape, codegen) {
     var flattenedConcats = flattenAttrConcats(value);
+
     var hasLiteral = false;
     var builder = codegen.builder;
     var finalNodes = [];
@@ -64,7 +65,7 @@ function generateCodeForExpressionAttr(name, value, escape, codegen) {
 
 
     for (let i=0; i<flattenedConcats.length; i++) {
-        if (flattenedConcats[i].type === 'Literal') {
+        if (flattenedConcats[i].type === 'Literal' || flattenedConcats[i].type === 'AttributePlaceholder') {
             hasLiteral = true;
             break;
         }

compiler/ast/HtmlElement/vdom/HtmlElementVDOM.js

@@ -65,6 +65,8 @@ class HtmlElementVDOM extends Node {
                     } else if (typeof literalValue === 'number') {
                         value.value = literalValue.toString();
                     }
+                } else if (value.type === 'AttributePlaceholder') {
+                    value = codegen.builder.functionCall(context.helper('str'), [value]);
                 }
 
                 attributesArg[name] = value;

test/autotests/compiler/attr-escape/expected.js

@@ -1,15 +1,15 @@
 var marko_template = module.exports = require("marko/html").t(__filename),
     marko_helpers = require("marko/runtime/html/helpers"),
     marko_classAttr = marko_helpers.ca,
-    marko_attr = marko_helpers.a,
-    marko_escapeXmlAttr = marko_helpers.xa,
-    marko_str = marko_helpers.s;
+    marko_str = marko_helpers.s,
+    marko_escapeXmlAttr = marko_helpers.xa;
 
 function render(data, out) {
   out.w("<div" +
     marko_classAttr(data.className) +
-    marko_attr("class2", data.className, false) +
-    " foo=\"a" +
+    " class2=\"" +
+    marko_str(data.className) +
+    "\" foo=\"a" +
     marko_escapeXmlAttr(data.foo) +
     "b\" bar=\"a " +
     marko_escapeXmlAttr(data.foo) +

test/autotests/render/attr-boolean-placeholder/template.marko

@@ -1,10 +1,10 @@
-<input type="checkbox" checked="${data.checked}">
+<input type="checkbox" checked=data.checked>
 
 <button disabled>Button</button>
 
 <select>
     <option value="${option.value}"
-        selected="${option.selected}"
+        selected=option.selected
         for(option in data.options)>
 
         ${option.value}

test/autotests/render/attr-empty-dynamic/template.marko

@@ -1 +1 @@
-<img alt="${data.myAlt || true}">
+<img alt=(data.myAlt || true)>

test/autotests/render/attr-value-obj/expected.html

@@ -0,0 +1 @@
+<div data-foo="Frank"></div><div data-foo='{"name":"Frank"}'></div>

test/autotests/render/attr-value-obj/template.marko

@@ -0,0 +1,9 @@
+var foo = {
+    name: 'Frank',
+    toString: function() {
+        return this.name;
+    }
+};
+
+<div data-foo="${foo}"/>
+<div data-foo=foo/>

test/autotests/render/attr-value-obj/test.js

@@ -0,0 +1 @@
+exports.templateData = {};

test/autotests/render/tabs-tab-new/tags/test-tabs-new/template.marko

@@ -2,14 +2,14 @@
 
 <div class="tabs">
     <ul class="nav nav-tabs">
-        <li class="${tab.liClass}" for(tab in tabs)>
+        <li class=tab.liClass for(tab in tabs)>
             <a href="#${tab.id}" data-toggle="tab">
                 ${tab.title}
             </a>
         </li>
     </ul>
     <div class="tab-content">
-        <div id="${tab.id}" class="${tab.divClass}" for(tab in tabs)>
+        <div id=tab.id class=tab.divClass for(tab in tabs)>
             <invoke tab.renderBody(out) if(tab.renderBody) />
         </div>
     </div>

test/autotests/render/tabs-tab/tags/test-tabs/template.marko

@@ -2,7 +2,7 @@
 
 <div class="tabs">
     <ul class="nav nav-tabs">
-        <li class="${tab.liClass}" for(tab in tabs)>
+        <li class=tab.liClass for(tab in tabs)>
             <a href="#${tab.id}" data-toggle="tab">
                 ${tab.title}
             </a>