Fixes #220 - Support expansion of CSS selector shorthand for tag names

compiler/Parser.js

@@ -18,7 +18,6 @@ function isIEConditionalComment(comment) {
 }
 
 function replacePlaceholderEscapeFuncs(node, context) {
-
     var walker = context.createWalker({
         exit: function(node, parent) {
             if (node.type === 'FunctionCall' &&
@@ -36,6 +35,39 @@ function replacePlaceholderEscapeFuncs(node, context) {
     return walker.walk(node);
 }
 
+function mergeShorthandClassNames(el, shorthandClassNames, context) {
+    var builder = context.builder;
+    let classNames = shorthandClassNames.map((className) => {
+        return builder.parseExpression(className.value);
+    });
+
+    var classAttr = el.getAttributeValue('class');
+    if (classAttr) {
+        classNames.push(classAttr);
+    }
+
+    let prevClassName;
+
+    var finalClassNames = [];
+
+    for (var i=0; i<classNames.length; i++) {
+        let className = classNames[i];
+        if (prevClassName && className.type === 'Literal' && prevClassName.type === 'Literal') {
+            prevClassName.value += ' ' + className.value;
+        } else {
+            finalClassNames.push(className);
+        }
+        prevClassName = className;
+    }
+
+    if (finalClassNames.length === 1) {
+        el.setAttributeValue('class', finalClassNames[0]);
+    } else {
+        var classListVar = context.addStaticVar('__classList', '__helpers.cl');
+        el.setAttributeValue('class', builder.functionCall(classListVar, finalClassNames));
+    }
+}
+
 class Parser {
     constructor(parserImpl) {
         ok(parserImpl, '"parserImpl" is required');
@@ -160,6 +192,17 @@ class Parser {
 
         var node = this.context.createNodeForEl(elDef);
 
+        if (el.shorthandClassNames) {
+            mergeShorthandClassNames(node, el.shorthandClassNames, context);
+        }
+
+        if (el.shorthandId) {
+            if (node.hasAttribute('id')) {
+                context.addError(node, 'A shorthand ID cannot be used in conjunction with the "id" attribute');
+            } else {
+                node.setAttributeValue('id', builder.parseExpression(el.shorthandId.value));
+            }
+        }
 
         this.parentNode.appendChild(node);
 

runtime/helpers.js

@@ -252,7 +252,7 @@ module.exports = {
     },
 
     /**
-     * Merges
+     * Merges object properties
      * @param  {[type]} object [description]
      * @param  {[type]} source [description]
      * @return {[type]}        [description]
@@ -264,5 +264,24 @@ module.exports = {
             }
         }
         return into;
+    },
+
+    /**
+     * classList(a, b, c, ...)
+     * Joines a list of class names with spaces. Empty class names are omitted.
+     *
+     * classList('a', undefined, 'b') --> 'a b'
+     *
+     */
+    cl: function() {
+        var args = arguments;
+        var classNames = [];
+        for (var i=0, len=args.length; i<len; i++) {
+            var cur = args[i];
+            if (cur) {
+                classNames.push(cur);
+            }
+        }
+        return classNames.join(' ');
     }
 };

test/fixtures/render/autotest/shorthand-class-merge/expected.html

@@ -0,0 +1 @@
+<div class="foo bar"></div>

test/fixtures/render/autotest/shorthand-class-merge/template.marko

@@ -0,0 +1 @@
+div.foo class="bar"

test/fixtures/render/autotest/shorthand-class-merge/test.js

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

test/fixtures/render/autotest/shorthand-class-merge2/expected.html

@@ -0,0 +1 @@
+<div class="foo baz"></div>

test/fixtures/render/autotest/shorthand-class-merge2/template.marko

@@ -0,0 +1 @@
+div.foo.${data.missing} class="baz"

test/fixtures/render/autotest/shorthand-class-merge2/test.js

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

test/fixtures/render/autotest/shorthand-div-id-dynamic/expected.html

@@ -0,0 +1 @@
+<div style="color: red;" id="foo-Frank">Hello Frank!</div>

test/fixtures/render/autotest/shorthand-div-id-dynamic/template.marko

@@ -0,0 +1,2 @@
+div#foo-${data.name} style="color: red;"
+    - Hello ${data.name}!

test/fixtures/render/autotest/shorthand-div-id-dynamic/test.js

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

test/fixtures/render/autotest/shorthand-div-id/expected.html

@@ -0,0 +1 @@
+<div style="color: red;" id="foo">Hello Frank!</div>

test/fixtures/render/autotest/shorthand-div-id/template.marko

@@ -0,0 +1,2 @@
+div#foo style="color: red;"
+    - Hello ${data.name}!

test/fixtures/render/autotest/shorthand-div-id/test.js

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

test/fixtures/render/autotest/shorthand-div.foo/expected.html

@@ -0,0 +1 @@
+<div style="color: red;" class="foo">Hello Frank!</div>

test/fixtures/render/autotest/shorthand-div.foo/template.marko

@@ -0,0 +1,2 @@
+div.foo style="color: red;"
+    - Hello ${data.name}!

test/fixtures/render/autotest/shorthand-div.foo/test.js

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

test/fixtures/render/autotest/shorthand-id-and-classes/expected.html

@@ -0,0 +1 @@
+<div class="bar baz" id="foo"></div>

test/fixtures/render/autotest/shorthand-id-and-classes/template.marko

@@ -0,0 +1 @@
+#foo.bar.baz

test/fixtures/render/autotest/shorthand-id-and-classes/test.js

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

test/fixtures/render/autotest/shorthand-verbose/expected.html

@@ -0,0 +1 @@
+<div class="bar baz" id="foo">Hello Frank!</div>

test/fixtures/render/autotest/shorthand-verbose/template.marko

@@ -0,0 +1,3 @@
+<#foo.bar.baz>
+    Hello ${data.name}!
+</>

test/fixtures/render/autotest/shorthand-verbose/test.js

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