Fixes #229 - Marko v3: Special case style attribute to allow object expression

compiler/ast/HtmlAttribute.js

@@ -79,21 +79,37 @@ function generateCodeForExpressionAttr(name, value, escape, codegen) {
         }
         codegen.addWriteLiteral('"');
     } else {
+        if (name === 'style') {
+            // let builder = codegen.builder;
+            // let valueWithEscaping = handleEscaping(value);
+            let styleAttr = codegen.addStaticVar('styleAttr', '__helpers.sa');
 
-        // let builder = codegen.builder;
-        // let valueWithEscaping = handleEscaping(value);
-        let attrVar = codegen.addStaticVar('attr', '__helpers.a');
+            if (escape === false || isNoEscapeXml(value)) {
+                escape = false;
+            }
 
-        if (escape === false || isNoEscapeXml(value)) {
-            escape = false;
+            let styleAttrArgs = [value];
+
+            if (escape === false) {
+                styleAttrArgs.push(codegen.builder.literal(false));
+            }
+            codegen.addWrite(codegen.builder.functionCall(styleAttr, styleAttrArgs));
+        } else {
+            // let builder = codegen.builder;
+            // let valueWithEscaping = handleEscaping(value);
+            let attrVar = codegen.addStaticVar('attr', '__helpers.a');
+
+            if (escape === false || isNoEscapeXml(value)) {
+                escape = false;
+            }
+
+            let attrArgs = [codegen.builder.literal(name), value];
+
+            if (escape === false) {
+                attrArgs.push(codegen.builder.literal(false));
+            }
+            codegen.addWrite(codegen.builder.functionCall(attrVar, attrArgs));
         }
-
-        let attrArgs = [codegen.builder.literal(name), value];
-
-        if (escape === false) {
-            attrArgs.push(codegen.builder.literal(false));
-        }
-        codegen.addWrite(codegen.builder.functionCall(attrVar, attrArgs));
     }
 }
 

runtime/helpers.js

@@ -21,6 +21,7 @@ var runtime = require('./'); // Circular dependency, but that is okay
 var attr = require('raptor-util/attr');
 var attrs = require('raptor-util/attrs');
 var isArray = Array.isArray;
+var STYLE = 'style';
 
 function notEmpty(o) {
     if (o == null) {
@@ -178,6 +179,38 @@ module.exports = {
      * @private
      */
     as: attrs,
+
+    /**
+     * Internal helper method to handle the "style" attribute. The value can either
+     * be a string or an object with style propertes. For example:
+     *
+     * sa('color: red; font-weight: bold') ==> ' style="color: red; font-weight: bold"'
+     * sa({color: 'red', 'font-weight': 'bold'}) ==> ' style="color: red; font-weight: bold"'
+     */
+    sa: function(style, escape) {
+        if (!style) {
+            return;
+        }
+
+        escape = escape !== false;
+
+        if (typeof style === 'string') {
+            return attr(STYLE, style, escape);
+        } else if (typeof style === 'object') {
+            var parts = [];
+            for (var name in style) {
+                if (style.hasOwnProperty(name)) {
+                    var value = style[name];
+                    if (value) {
+                        parts.push(name + ':' + (escape ? escapeXmlAttr(value) : value));
+                    }
+                }
+            }
+            return parts ? attr(STYLE, parts.join(';'), false) : '';
+        } else {
+            return '';
+        }
+    },
     /**
      * Loads a template
      */

test/fixtures/render/autotest/style-attr-object-escape/expected.html

@@ -0,0 +1 @@
+<div style="color:&lt;evil&gt;"></div>

test/fixtures/render/autotest/style-attr-object-escape/template.marko

@@ -0,0 +1 @@
+div style=data.style

test/fixtures/render/autotest/style-attr-object-escape/test.js

@@ -0,0 +1,5 @@
+exports.templateData = {
+    style: {
+        color: '<evil>'
+    }
+};

test/fixtures/render/autotest/style-attr-object-no-escape/expected.html

@@ -0,0 +1 @@
+<div style="color:<evil>"></div>

test/fixtures/render/autotest/style-attr-object-no-escape/template.marko

@@ -0,0 +1 @@
+div style="$!{data.style}"

test/fixtures/render/autotest/style-attr-object-no-escape/test.js

@@ -0,0 +1,5 @@
+exports.templateData = {
+    style: {
+        color: '<evil>'
+    }
+};

test/fixtures/render/autotest/style-attr-object/expected.html

@@ -0,0 +1 @@
+<div style="color:red;font-weight:bold"></div>

test/fixtures/render/autotest/style-attr-object/template.marko

@@ -0,0 +1 @@
+div style={color: 'red', 'font-weight': 'bold'}

test/fixtures/render/autotest/style-attr-object/test.js

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

test/fixtures/render/autotest/style-attr-string-dynamic/expected.html

@@ -0,0 +1 @@
+<div style="color: red"></div>

test/fixtures/render/autotest/style-attr-string-dynamic/template.marko

@@ -0,0 +1 @@
+div style=data.style

test/fixtures/render/autotest/style-attr-string-dynamic/test.js

@@ -0,0 +1,3 @@
+exports.templateData = {
+    style: 'color: red'
+};

test/fixtures/render/autotest/style-attr-string/expected.html

@@ -0,0 +1 @@
+<div style="font-weight: bold;"></div>

test/fixtures/render/autotest/style-attr-string/template.marko

@@ -0,0 +1 @@
+div style="font-weight: bold;"

test/fixtures/render/autotest/style-attr-string/test.js

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