Handle for...of in vue v-for

[Shinigami92]

closes #129

[Shinigami92]

plugin-pug/src/printer.ts

Line 277 in b237d0f

val = format(val, { parser: parser as any, ...this.codeInterpolationOptions });

@fisker Hi 🙂 (You are my person of trust in prettier's team ^^ so I write you)
I'm passing the following data to prettier's format function

{
  val: 'item of items', // not 'item in items'!
  parser: '__vue_expression',
  codeInterpolationOptions: {
    singleQuote: true,
    bracketSpacing: true,
    arrowParens: 'always',
    printWidth: 9000,
    endOfLine: 'lf'
  }
}

Vue seems to allow v-for with for of syntax:

Is this a prettier issue? Or do I need to call another (internal) parser for this specific case?

[fisker]

The v-for is similar to for-of but not the same, v-for="(a, b) of c" is valid, for ((a, b) of c){} is not valid js, here is how prettier handle v-for https://github.com/prettier/prettier/blob/fbb212ab59a5951f062caf01e94eba89759f24b0/src/language-html/syntax-vue.js#L7

FYI, we just improved some v-for cases few days ago prettier/prettier#9225

[Shinigami92]

@fisker So I did not dig deep into it but the only call to this function is here

https://github.com/prettier/prettier/blob/64cb7abed85566ec5d0eaee13e9d4fc58198f001/src/language-html/printer-html.js#L1081-L1083

  if (options.parser === "vue") {
    if (node.fullName === "v-for") {
      return printVueFor(getValue(), textToDoc);

But I'm calling directly with parser: '__vue_expression', so maybe I never reach this code 🤔
Maybe I need to call with parser: 'vue' directly here in this case
But until now every thing worked with all the internal parsers

plugin-pug/src/printer.ts

Lines 368 to 413 in 8106cda

	private formatVueEventBinding(val: string): string {
	val = val.trim();
	val = val.slice(1, -1); // Remove quotes
	val = format(val, { parser: '__vue_event_binding' as any, ...this.codeInterpolationOptions });
	val = unwrapLineFeeds(val);
	if (val[val.length - 1] === ';') {
	val = val.slice(0, -1);
	}
	return this.quoteString(val);
	}
	private formatVueExpression(val: string): string {
	return this.formatDelegatePrettier(val, '__vue_expression');
	}
	private formatAngularBinding(val: string): string {
	return this.formatDelegatePrettier(val, '__ng_binding');
	}
	private formatAngularAction(val: string): string {
	return this.formatDelegatePrettier(val, '__ng_action');
	}
	private formatAngularDirective(val: string): string {
	return this.formatDelegatePrettier(val, '__ng_directive');
	}
	private formatAngularInterpolation(val: string): string {
	val = val.slice(1, -1); // Remove quotes
	val = val.slice(2, -2); // Remove braces
	val = val.trim();
	if (val.includes(`\\${this.otherQuotes}`)) {
	logger.warn(
	'The following expression could not be formatted correctly. Please try to fix it yourself and if there is a problem, please open a bug issue:',
	val
	);
	} else {
	val = format(val, {
	parser: '__ng_interpolation' as any,
	...this.codeInterpolationOptions
	});
	val = unwrapLineFeeds(val);
	}
	val = handleBracketSpacing(this.options.pugBracketSpacing, val);
	return this.quoteString(val);
	}

[Shinigami92]

@fisker So indeed if calling

plugin-pug/src/printer.ts

Line 396 in a220e91

return this.formatDelegatePrettier(val, '__vue_expression');

with only 'vue' instead of '__vue_expression', the one specific v-for="x of quux" test passes!

But why '__vue_expression' don't handle this case?
Should we handle it in prettier itself? Or should I add a condition if v-for and contains ' of ' then use parser: 'vue' 🤔

[Shinigami92]

Awaiting release of prettier: prettier/prettier#9225 (comment)

[fisker]

But why '__vue_expression' don't handle this case?

Because it's not legal js code.

[Shinigami92]

Oh you mean cause using of in js is different to in
But in Vue: of is just an alias to in

[fisker]

No, of and in the same.

Check #132 (comment)