@mrhenry/prettier-twig 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mrhenry/prettier-twig",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"type": "module",
 	"main": "src/index.js",
 	"license": "MIT",

package/src/printer.js

@@ -109,9 +109,9 @@ function danglingEndIndent(raw) {
 }
 
 /**
- * Whether a node is inline content (a `{{ … }}` expression or text) that may
- * share a line with adjacent content when the source has no line break between
- * them.
+ * Whether a node is inline content (a `{{ … }}` expression, text, a single-line
+ * comment or an inline element) that may share a line with adjacent content when
+ * the source has no line break between them.
  *
  * @param {any} node
  * @returns {boolean}
@@ -123,6 +123,12 @@ function isInlineChild(node) {
 	if (node.type === 'twig') {
 		return Boolean(node.atom.isPrint);
 	}
+	if (node.type === 'twigComment') {
+		return !/[\r\n]/.test(node.atom.raw);
+	}
+	if (node.type === 'comment') {
+		return !/[\r\n]/.test(node.raw);
+	}
 	return node.type === 'element' && INLINE_ELEMENTS.has(node.name);
 }
 
@@ -280,6 +286,81 @@ function normalizeTwigTag(raw) {
 	return normalized === '' ? `${open}${close}` : `${open} ${normalized} ${close}`;
 }
 
+/**
+ * The net parenthesis depth a line opens (positive) or closes (negative),
+ * ignoring parentheses inside string literals.
+ *
+ * @param {string} text
+ * @returns {number}
+ */
+function parenDelta(text) {
+	let depth = 0;
+	let quote = '';
+	for (let i = 0; i < text.length; i += 1) {
+		const ch = text[i];
+		if (quote !== '') {
+			if (ch === '\\') {
+				i += 1;
+			} else if (ch === quote) {
+				quote = '';
+			}
+			continue;
+		}
+		if (ch === '"' || ch === "'") {
+			quote = ch;
+		} else if (ch === '(') {
+			depth += 1;
+		} else if (ch === ')') {
+			depth -= 1;
+		}
+	}
+	return depth;
+}
+
+/**
+ * Prints a `{% if … %}` / `{% elseif … %}` head. A condition written over
+ * several lines and made complex by boolean operators or parentheses keeps its
+ * line breaks, one operand per line, re-indented one level per parenthesis it
+ * is nested in. Anything else is normalized to a single line.
+ *
+ * @param {string} raw
+ * @param {any} options
+ * @returns {any} A Prettier doc.
+ */
+function formatTwigHead(raw, options) {
+	const { open, close, body } = twigDelimiters(raw);
+	const keywordMatch = body.match(/^\s*(if|elseif)\b/);
+	const condition = keywordMatch ? body.slice(keywordMatch[0].length) : '';
+	const complex = /\b(and|or)\b/.test(condition) || condition.includes('(');
+	if (!keywordMatch || !/[\r\n]/.test(body) || !complex) {
+		return normalizeTwigTag(raw);
+	}
+	const unit = options.useTabs === false ? ' '.repeat(options.tabWidth ?? 4) : '\t';
+	const lines = body
+		.split(/\r?\n/)
+		.map((/** @type {string} */ text) => collapseWhitespace(text).trim());
+	while (lines.length > 0 && lines[0] === '') {
+		lines.shift();
+	}
+	while (lines.length > 0 && lines[lines.length - 1] === '') {
+		lines.pop();
+	}
+	if (lines.length === 0) {
+		return `${open}${close}`;
+	}
+	const [first, ...rest] = lines;
+	let depth = parenDelta(first);
+	/** @type {any[]} */
+	const continuation = [];
+	for (const conditionLine of rest) {
+		const leadingClose = (conditionLine.match(/^\)+/) ?? [''])[0].length;
+		const level = Math.max(0, depth - leadingClose);
+		continuation.push([hardline, unit.repeat(level), conditionLine]);
+		depth += parenDelta(conditionLine);
+	}
+	return [open, ' ', first, indent(continuation), hardline, close];
+}
+
 /**
  * Whether a mapping/sequence was written multi-line in the source (a newline
  * between the opening delimiter and the first entry). Such containers stay
@@ -700,11 +781,12 @@ function printAttributeValue(raw) {
  * @param {any} path
  * @param {(selector: any, ...rest: any[]) => any} printCallback
  * @param {string} source
+ * @param {any} options
  * @returns {any} A Prettier doc.
  */
-function printTwigBlock(path, printCallback, source) {
+function printTwigBlock(path, printCallback, source, options) {
 	const node = path.node;
-	const open = normalizeTwigTag(node.open.atom.raw);
+	const open = formatTwigHead(node.open.atom.raw, options);
 	const close = normalizeTwigTag(node.close.atom.raw);
 	/** @type {any[]} */
 	const docs = [];
@@ -717,7 +799,7 @@ function printTwigBlock(path, printCallback, source) {
 	for (const section of node.sections ?? []) {
 		if (section.head) {
 			// mid tags (`{% else %}`, `{% elseif %}`) sit at the block's own indent
-			const head = normalizeTwigTag(section.head.atom.raw);
+			const head = formatTwigHead(section.head.atom.raw, options);
 			docs.push(hasBlankLine(source, previousEnd, section.head.atom.rawStart) ? [hardline, hardline, head] : [hardline, head]);
 			previousEnd = section.head.atom.rawEnd;
 		}
@@ -885,8 +967,11 @@ function printTwigComment(node) {
  * @returns {boolean}
  */
 function isInlineTwigBlock(node, source) {
-	const raw = source.slice(node.rawStart, node.rawEnd);
-	if (raw.includes('\n')) {
+	// Trim-consumed whitespace before the `{%` is part of the node's raw span;
+	// the open/close atoms describe the block itself, so a block that only looks
+	// multi-line because of that leading trivia is still recognised as inline.
+	const { start, end } = contentBounds(node);
+	if (source.slice(start, end).includes('\n')) {
 		return false;
 	}
 	const children = (node.children ?? []).filter((/** @type {any} */ c) => !isWhitespaceOnly(c));
@@ -1111,9 +1196,13 @@ export function print(path, options, printCallback) {
 		case 'element':
 			return printElement(path, printCallback, source);
 		case 'twigBlock':
-			return isInlineTwigBlock(node, source)
-				? source.slice(node.rawStart, node.rawEnd)
-				: printTwigBlock(path, printCallback, source);
+			if (isInlineTwigBlock(node, source)) {
+				// slice from the atoms so trim-consumed whitespace before the `{%`
+				// is not duplicated (the containing printer owns that gap)
+				const { start, end } = contentBounds(node);
+				return source.slice(start, end);
+			}
+			return printTwigBlock(path, printCallback, source, options);
 		default:
 			return printNode(node, options);
 	}

package/test/prettier-twig.test.js

@@ -485,6 +485,150 @@ test('formats conditional attributes', async () => {
 	}
 });
 
+test('keeps a complex multi-line condition across lines with paren-depth indent', async () => {
+	{
+		const out = await fmt(`<div
+	class="teaser-a"
+	{% if teaser.path %}
+		data-has-link
+	{% endif %}
+	{% if
+			show_region or
+			teaser.email or
+			teaser.telephone or
+			teaser.street or
+			teaser.postal or
+			teaser.city or
+			(teaser.type == 'Contact' and (
+				teaser.opening_hours.days|length > 0 or
+				teaser.opening_hours.text or
+				teaser.opening_hours_b.days|length > 0 or
+				teaser.opening_hours_b.text or
+				teaser.links|length > 0
+			))
+	%}
+		data-has-side
+	{% endif %}
+>
+`);
+		assert.equal(
+			out,
+			`<div
+	class="teaser-a"
+	{% if teaser.path %}
+		data-has-link
+	{% endif %}
+	{% if
+		show_region or
+		teaser.email or
+		teaser.telephone or
+		teaser.street or
+		teaser.postal or
+		teaser.city or
+		(teaser.type == 'Contact' and (
+				teaser.opening_hours.days|length > 0 or
+				teaser.opening_hours.text or
+				teaser.opening_hours_b.days|length > 0 or
+				teaser.opening_hours_b.text or
+				teaser.links|length > 0
+		))
+	%}
+		data-has-side
+	{% endif %}
+>
+`,
+		);
+	}
+
+	{
+		const out = await fmt(`<div
+	class="teaser-a"
+	{% if teaser.path %}
+		data-has-link
+	{% endif %}
+	{% if
+		show_region or
+		teaser.email or
+		teaser.telephone or
+		teaser.street or
+		teaser.postal or
+		teaser.city or
+		(
+		teaser.type == 'Contact' and (
+		teaser.opening_hours.days|length > 0 or
+		teaser.opening_hours.text or
+		teaser.opening_hours_b.days|length > 0 or
+		teaser.opening_hours_b.text or
+		teaser.links|length > 0
+		)
+		)
+	%}
+		data-has-side
+	{% endif %}
+>
+`);
+		assert.equal(
+			out,
+			`<div
+	class="teaser-a"
+	{% if teaser.path %}
+		data-has-link
+	{% endif %}
+	{% if
+		show_region or
+		teaser.email or
+		teaser.telephone or
+		teaser.street or
+		teaser.postal or
+		teaser.city or
+		(
+			teaser.type == 'Contact' and (
+				teaser.opening_hours.days|length > 0 or
+				teaser.opening_hours.text or
+				teaser.opening_hours_b.days|length > 0 or
+				teaser.opening_hours_b.text or
+				teaser.links|length > 0
+			)
+		)
+	%}
+		data-has-side
+	{% endif %}
+>
+`,
+		);
+	}
+});
+
+test('keeps multi-line elseif conditions across lines', async () => {
+	const source = `{% if
+	a or
+	b
+%}
+	<p>x</p>
+{% elseif
+	c and
+	d
+%}
+	<p>y</p>
+{% endif %}
+`;
+	assert.equal(await fmt(source), source);
+
+	// a simple condition broken across lines is still collapsed
+	assert.equal(
+		await fmt(`{% if
+	x
+%}
+	<p>a</p>
+{% endif %}
+`),
+		`{% if x %}
+	<p>a</p>
+{% endif %}
+`,
+	);
+});
+
 test('indents twig block bodies', async () => {
 	{
 		const out = await fmt(`{% if x %}
@@ -955,6 +1099,62 @@ test('format twig comments', async () => {
 	}
 });
 
+test('keeps inline comments next to content without adding line breaks', async () => {
+	{
+		// the comment sits after the text on the same line, so it stays there
+		const source = `<p>
+	Start of main content. {# TODO: Translate if necessary. #}
+</p>
+`;
+		assert.equal(await fmt(source), source);
+
+		// a subtle variation that does get formatted: spaces in the comment
+		assert.equal(
+			await fmt(`<p>
+	Start of main content. {#  TODO: Translate if necessary.  #}
+</p>
+`),
+			source,
+		);
+	}
+
+	{
+		// in between text on one line
+		const source = `<div>
+	text {# c #} more
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// in between text and an inline element
+		const source = `<p>
+	Go back to the <a href="/">homepage</a>. {# c #}
+</p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// html comments behave like twig comments
+		const source = `<div>
+	text <!-- c --> more
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// at the document root
+		assert.equal(
+			await fmt(`Start of main content. {# TODO: Translate if necessary. #}`),
+			`Start of main content. {# TODO: Translate if necessary. #}
+`,
+		);
+	}
+});
+
 test('keeps html comments and doctype', async () => {
 	const out = await fmt(`<!doctype html>
 <!-- c -->
@@ -1674,6 +1874,23 @@ test('indents nested loops inside elements', async () => {
 	);
 });
 
+test('keeps an inline twig block on one line after whitespace-trimmed siblings', async () => {
+	const source = `{% if regions|length > 0 %}
+	Regio
+
+	{% for region in regions -%}
+		{{- region.name -}}
+		{%- if not loop.last -%}, {% endif -%}
+	{%- endfor -%}
+
+	{% if page_fields.job_meta_location or page_fields.job_meta_apply_until or tags|length > 0 %}
+		<br>
+	{% endif %}
+{% endif %}
+`;
+	assert.equal(await fmt(source), source);
+});
+
 test('nests control structures inside elements', async () => {
 	const out = await fmt(`{% for group in groups %}<div><h2>{{ group.name }}</h2><ul>{% for item in group.items %}<li>{{ item }}</li>{% endfor %}</ul></div>{% endfor %}`);
 	assert.equal(