@mrhenry/prettier-twig 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mrhenry/prettier-twig",
-	"version": "0.1.1",
+	"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]);
@@ -132,11 +139,25 @@ function isInlineChild(node) {
 	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',
 ]);
 
 /**
@@ -521,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',
@@ -541,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(
@@ -648,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
@@ -659,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)),
 	);
 }
 

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
@@ -1155,6 +1205,50 @@ test('keeps inline comments next to content without adding line breaks', async (
 	}
 });
 
+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 -->