Fixes #184 - Looping over object properties

compiler/Builder.js

@@ -19,6 +19,7 @@ var HtmlElement = require('./ast/HtmlElement');
 var Html = require('./ast/Html');
 var Text = require('./ast/Text');
 var ForEach = require('./ast/ForEach');
+var ForEachProp = require('./ast/ForEachProp');
 var ForRange = require('./ast/ForRange');
 var Slot = require('./ast/Slot');
 var HtmlComment = require('./ast/HtmlComment');
@@ -83,6 +84,18 @@ class Builder {
         }
     }
 
+    forEachProp(nameVarName, valueVarName, inExpression, body) {
+        if (arguments.length === 1) {
+            var def = arguments[0];
+            return new ForEachProp(def);
+        } else {
+            nameVarName = makeNode(nameVarName);
+            valueVarName = makeNode(valueVarName);
+            inExpression = makeNode(inExpression);
+            return new ForEachProp({nameVarName, valueVarName, in: inExpression, body});
+        }
+    }
+
     forRange(varName, from, to, step, body) {
         if (arguments.length === 1) {
             var def = arguments[0];

compiler/ast/ForEachProp.js

@@ -0,0 +1,36 @@
+'use strict';
+var ok = require('assert').ok;
+var Node = require('./Node');
+
+class ForEachProp extends Node {
+    constructor(def) {
+        super('ForEachProp');
+        this.nameVarName = def.nameVarName;
+        this.valueVarName = def.valueVarName;
+        this.in = def.in;
+        this.body = this.makeContainer(def.body);
+
+        ok(this.nameVarName, '"nameVarName" is required');
+        ok(this.valueVarName != null, '"valueVarName" is required');
+        ok(this.in != null, '"in" is required');
+    }
+
+    generateCode(generator) {
+        var nameVarName = this.nameVarName;
+        var valueVarName = this.valueVarName;
+        var inExpression = this.in;
+        var body = this.body;
+
+        var builder = generator.builder;
+
+        let forEachVarName = generator.addStaticVar('forEachProp', '__helpers.fp');
+
+        return builder.functionCall(forEachVarName, [
+            inExpression,
+            builder.functionDeclaration(null, [nameVarName, valueVarName], body)
+        ]);
+
+    }
+}
+
+module.exports = ForEachProp;

taglibs/core/util/createLoopNode.js

@@ -13,6 +13,8 @@ function createLoopNode(str, body, builder) {
         return builder.forEach(forDef);
     } else if (forDef.loopType === 'ForRange') {
         return builder.forRange(forDef);
+    } else if (forDef.loopType === 'ForEachProp') {
+        return builder.forEachProp(forDef);
     } else if (forDef.loopType === 'For') {
         return builder.forStatement(forDef);
     } else {

test/fixtures/render/autotest-pending/looping-props/expected.html

@@ -1 +0,0 @@
-[foo=low][bar=high]<ul><li>[foo=low]</li><li>[bar=high]</li></ul>

test/fixtures/render/autotest-pending/looping-props/template.marko

@@ -1,9 +0,0 @@
-<for each="(name,value) in {'foo': 'low', 'bar': 'high'}">
-    [$name=$value]
-</for>
-
-<ul>
-    <li for="(name, value) in {'foo': 'low', 'bar': 'high'}">
-        [$name=$value]
-    </li>
-</ul>

test/fixtures/render/autotest/for-props-attr/expected.html

@@ -0,0 +1 @@
+<ul><li>[foo=low]</li><li>[bar=high]</li></ul>

test/fixtures/render/autotest/for-props-attr/template.marko

@@ -0,0 +1,5 @@
+<ul>
+    <li for(name, value in {'foo': 'low', 'bar': 'high'})>
+        [${name}=${value}]
+    </li>
+</ul>

test/fixtures/render/autotest/for-props/expected.html

@@ -0,0 +1 @@
+[foo=low][bar=high]

test/fixtures/render/autotest/for-props/template.marko

@@ -0,0 +1,3 @@
+<for(name,value in {'foo': 'low', 'bar': 'high'})>
+    [${name}=${value}]
+</for>

test/fixtures/render/autotest/for-props/test.js

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