each should recognize iteration protocol objects

[strugee]

Pug Version: 2.0.4

Node Version: 8.10.0

Input JavaScript Values

var pug = require('pug');

var map = new Map([['foo', 'bar']]);

var html = pug.renderFile('input.pug', { some_iterable: map });

console.log(html);

Input Pug

h1 Pug iteration test file
each el in some_iterable
     p= el[0]
     p= el[1]

Expected HTML

<h1>Pug iteration test file</h1><p>foo</p><p>bar</p>

Actual HTML

<h1>Pug iteration test file</h1>

Additional Comments

Here's the relevant MDN documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols

I would be happy to prepare a PR implementing this change but wanted to open an issue first to make sure there aren't any issues I haven't thought of yet. I also think this will be backwards-compatible pretty easily, but don't have the time to double-check at the moment. I'll do that soon.

[ForbesLindesay]

This will require us to adopt some new syntax. I would suggest something like for item of iterable since we already have for as a reserved word, and could easily enough detect the in/of distinction. I'm happy to accept a PR to add this syntax given that node.js supports for of natively.

[maxrumsey]

@strugee Are you currently working on a PR for this? Because if not I'd be happy to take it on.

[ForbesLindesay]

@maxrumsey I've marked it as being worked on. Based on the assumption that one of you or @strugee will be working on it :)

[strugee]

@maxrumsey I am not. If no one lands this I'll probably eventually prepare patches just because I want this in my own projects, but I'm not doing anything right now and would be thrilled if someone else implemented this for me :-)

[maxrumsey]

Yeah I'd be happy to take a stab at this!

[maxrumsey]

@ForbesLindesay Considering the size of Pug, do you have any tips for where I could get started? See the gitter chat.

[ForbesLindesay]

You'll need to start by building an eachOf variant of

pug/packages/pug-lexer/index.js

Lines 950 to 972 in fa8d287

	each: function() {
	var captures;
	if (captures = /^(?:each|for) +([a-zA-Z_$][\w$]*)(?: *, *([a-zA-Z_$][\w$]*))? * in *([^\n]+)/.exec(this.input)) {
	this.consume(captures[0].length);
	var tok = this.tok('each', captures[1]);
	tok.key = captures[2] || null;
	this.incrementColumn(captures[0].length - captures[3].length);
	this.assertExpression(captures[3])
	tok.code = captures[3];
	this.incrementColumn(captures[3].length);
	this.tokens.push(this.tokEnd(tok));
	return true;
	}
	if (this.scan(/^(?:each|for)\b/)) {
	this.error('MALFORMED_EACH', 'malformed each');
	}
	if (captures = /^- *(?:each|for) +([a-zA-Z_$][\w$]*)(?: *, *([a-zA-Z_$][\w$]*))? +in +([^\n]+)/.exec(this.input)) {
	this.error(
	'MALFORMED_EACH',
	'Pug each and for should no longer be prefixed with a dash ("-"). They are pug keywords and not part of JavaScript.'
	);
	}
	},

You'll then need to handle it in the parser

pug/packages/pug-parser/index.js

Lines 235 to 236 in fa8d287

	case 'each':
	return this.parseEach();

Finally, you'll need to generate js code for it in

pug/packages/pug-code-gen/index.js

Line 724 in fa8d287

visitEach: function(each){

[ForbesLindesay]

To get a local environment setup where all the packages work together, you should use lerna

[ForbesLindesay]

The code to implement this has now been merged, and will be included in the next release.

[simonv3]

This should probably be added to the docs if it's implemented?

https://pugjs.org/language/iteration.html