@mrhenry/prettier-twig 0.1.0 → 0.1.2

package/package.json

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

package/src/printer.js

@@ -70,6 +70,13 @@ function printChildren(path, printCallback, source, leadingHardline = true, opti
 			docs.push(childDoc);
 		} else if (blankBefore) {
 			docs.push([hardline, hardline, childDoc]);
+		} else if (
+			first &&
+			!gap.includes('\n') &&
+			(child.type === 'comment' || child.type === 'twigComment')
+		) {
+			// a comment written right after the opening tag stays there
+			docs.push(gap === '' ? childDoc : [' ', childDoc]);
 		} else if (!gap.includes('\n') && previousWasInline && inline) {
 			// consecutive inline expressions on one source line stay together
 			docs.push([gap === '' ? '' : ' ', childDoc]);
@@ -109,9 +116,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,14 +130,34 @@ 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);
 }
 
-/** Phrasing (inline) elements that may share a line with neighbouring text. */
+/**
+ * Elements that are `display: inline` by default (and the inline-level ruby,
+ * replaced and form-control elements), so they may share a line with
+ * neighbouring text instead of being moved onto their own line.
+ */
 const INLINE_ELEMENTS = new Set([
-	'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em',
-	'i', 'img', 'kbd', 'mark', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small',
-	'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr',
+	// text-level semantics
+	'a', 'abbr', 'acronym', 'b', 'bdi', 'bdo', 'big', 'br', 'cite', 'code',
+	'data', 'del', 'dfn', 'em', 'font', 'i', 'ins', 'kbd', 'mark', 'nobr',
+	'q', 's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup',
+	'time', 'tt', 'u', 'var', 'wbr',
+	// ruby annotations
+	'rp', 'rt', 'ruby',
+	// embedded / replaced inline-level content
+	'audio', 'canvas', 'embed', 'iframe', 'img', 'map', 'math', 'object',
+	'picture', 'svg', 'video',
+	// inline-level form controls
+	'button', 'input', 'label', 'meter', 'output', 'progress', 'select',
+	'textarea',
 ]);
 
 /**
@@ -280,6 +307,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
@@ -440,14 +542,13 @@ function formatTwigTag(raw, forceBreakStructures = false, trailingComma = true)
 }
 
 /**
- * Prints an element's start tag.
+ * Whether an element's start tag prints on a single line: at most one real
+ * attribute, no conditional attributes and no multi-line attribute value.
  *
  * @param {any} node
- * @param {any[]} attrDocs
- * @param {string} source
- * @returns {any} A Prettier doc.
+ * @returns {boolean}
  */
-function printOpenTag(node, attrDocs, source) {
+function isSingleLineStartTag(node) {
 	const attrs = node.attrs ?? [];
 	const realAttrs = attrs.filter(
 		(/** @type {any} */ a) => a.type !== 'twig' && a.type !== 'twigBlock' && a.type !== 'twigComment',
@@ -460,8 +561,20 @@ function printOpenTag(node, attrDocs, source) {
 				: /[\r\n]/.test(c.text),
 		),
 	);
+	return realAttrs.length <= 1 && !hasConditional && !hasComplexValue;
+}
+
+/**
+ * Prints an element's start tag.
+ *
+ * @param {any} node
+ * @param {any[]} attrDocs
+ * @param {string} source
+ * @returns {any} A Prettier doc.
+ */
+function printOpenTag(node, attrDocs, source) {
 	const forcedSingleLine = FORCE_SINGLE_LINE.has(node.name);
-	const singleLineTag = forcedSingleLine || (realAttrs.length <= 1 && !hasConditional && !hasComplexValue);
+	const singleLineTag = forcedSingleLine || isSingleLineStartTag(node);
 	return forcedSingleLine
 		? // `html`, `link` and `meta` are never broken across lines
 		collapseWhitespace(source.slice(node.rawStart, node.startTagEnd)).replace(
@@ -567,7 +680,11 @@ function isTextOnly(node) {
 
 /**
  * Whether an element's non-empty content is only phrasing content (text,
- * prints, comments and inline twig blocks).
+ * prints, comments, inline twig blocks and inline elements).
+ *
+ * Inline element children only count as phrasing when the element's own start
+ * tag prints on a single line: once a multi-line start tag puts its `>` on a
+ * line of its own, the content belongs on the line below it.
  *
  * @param {any} node
  * @param {string} source
@@ -578,13 +695,15 @@ function isPhrasingContent(node, source) {
 	if (children.length === 0) {
 		return false;
 	}
+	const inlineElementsAttach = isSingleLineStartTag(node);
 	return children.every(
 		(/** @type {any} */ c) =>
 			c.type === 'text' ||
 			c.type === 'twig' ||
 			c.type === 'comment' ||
 			c.type === 'twigComment' ||
-			(c.type === 'twigBlock' && isInlineTwigBlock(c, source)),
+			(c.type === 'twigBlock' && isInlineTwigBlock(c, source)) ||
+			(c.type === 'element' && inlineElementsAttach && INLINE_ELEMENTS.has(c.name)),
 	);
 }
 
@@ -700,11 +819,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 +837,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 +1005,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 +1234,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

@@ -265,6 +265,56 @@ test('keeps text around inline elements on one line', async () => {
 	);
 });
 
+test('keeps inline elements from being pushed onto their own line', async () => {
+	{
+		const source = `<p><strong>If you are seeing this message you are viewing an incomplete page.<br>Everything you see here is WIP.</strong></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		const source = `<p class="type-d"><b>{{ __('There are no results.', 'mr') }}</b></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// no text sibling: the whole inline run stays on one line
+		const source = `<p><del>old</del><ins>new</ins></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// inline-level form controls and embedded content are covered too
+		const source = `<p><label for="x">Name</label><input id="x"><img src="a.png"></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// ruby annotations and legacy inline elements
+		const source = `<p><ruby>漢<rt>kan</rt></ruby><tt>mono</tt><big>big</big></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// a multi-line start tag puts its `>` on its own line, so the inline
+		// content belongs on the line below it (unchanged behaviour)
+		assert.equal(
+			await fmt(`<div class="a" data-x="1"><br></div>`),
+			`<div
+	class="a"
+	data-x="1"
+>
+	<br>
+</div>
+`,
+		);
+	}
+});
+
 test('places the closing > at the opening indent in multi-line tags', async () => {
 	{
 		const out = await fmt(`<div
@@ -485,6 +535,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 +1149,106 @@ 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 a comment written after the opening tag on that line', async () => {
+	{
+		const source = `<html lang="en" class="no-js"> {# TODO: set lang correctly #}
+	<head></head>
+</html>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// open-ended partial: the comment still follows the opening tag
+		const source = `<html lang="en" class="no-js"> {# TODO: set lang correctly #}
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		const source = `<div class="a"> {# c #}
+	<p>x</p>
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// html comments behave like twig comments
+		const source = `<div class="a"> <!-- c -->
+	<p>x</p>
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// a newline after the opening tag still puts the comment on its own line
+		const source = `<div class="a">
+	{# c #}
+	<p>x</p>
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+});
+
 test('keeps html comments and doctype', async () => {
 	const out = await fmt(`<!doctype html>
 <!-- c -->
@@ -1674,6 +1968,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(