@tsrx/prettier-plugin 0.3.77 → 0.3.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.77",
+  "version": "0.3.79",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -27,7 +27,7 @@
     "prettier": "^3.8.3"
   },
   "dependencies": {
-    "@tsrx/core": "0.1.25"
+    "@tsrx/core": "0.1.27"
   },
   "files": [
     "src/"

package/src/index.js

@@ -2292,20 +2292,20 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 
 		case 'JSXStyleElement':
-			nodeContent = printJSXElement(
-				/** @type {ESTreeJSX.JSXElement} */ (/** @type {unknown} */ (node)),
-				path,
-				options,
-				print,
-			);
+			nodeContent = printJSXElement(node, path, options, print);
 			break;
 
 		case 'JSXElement':
-			nodeContent = printJSXElement(node, path, options, print);
+			nodeContent = printJSXElement(/** @type {AST.TSRXJSXElement} */ (node), path, options, print);
 			break;
 
 		case 'JSXFragment':
-			nodeContent = printJSXFragment(node, path, options, print);
+			nodeContent = printJSXFragment(
+				/** @type {AST.TSRXJSXFragment} */ (node),
+				path,
+				options,
+				print,
+			);
 			break;
 
 		case 'JSXText':
@@ -5694,86 +5694,6 @@ function normalizeInlineJSXText(raw) {
 	return text.trim() || !/[\r\n]/u.test(text) ? text : '';
 }
 
-/**
- * @param {AST.Node} parentNode
- * @param {AST.Node} firstChild
- * @param {Doc} childDoc
- * @returns {boolean}
- */
-function shouldInlineSingleChild(parentNode, firstChild, childDoc) {
-	if (!firstChild || childDoc == null) {
-		return false;
-	}
-
-	if (firstChild.type === 'JSXText') {
-		return true;
-	}
-
-	if (typeof childDoc === 'string') {
-		return childDoc.length <= 20 && !childDoc.includes('\n');
-	}
-
-	// Inline JSX expressions if they fit, but respect original multi-line formatting
-	// for non-literal expressions (e.g. {children} should stay multi-line if written that way)
-	if (firstChild.type === 'JSXExpressionContainer') {
-		if (wasOriginallySingleLine(parentNode)) {
-			return true;
-		}
-		// For multi-line parents, only inline if the expression is a simple literal
-		const expr = firstChild.expression;
-		if (expr && (expr.type === 'Literal' || expr.type === 'TemplateLiteral')) {
-			return true;
-		}
-		return false;
-	}
-
-	// Respect original formatting for elements: if parent was originally multi-line, keep it multi-line
-	// This follows Prettier's philosophy for decorators and objects
-	if (!wasOriginallySingleLine(parentNode)) {
-		return false;
-	}
-
-	if (firstChild.type === 'JSXElement' && firstChild.openingElement?.selfClosing) {
-		const parent = /** @type {any} */ (parentNode);
-		return !parent.openingElement?.attributes?.length;
-	}
-
-	return false;
-}
-
-/**
- * Check whether a child can participate in compact inline TSRX content.
- * @param {any} child
- * @returns {boolean}
- */
-function isInlineableTextOrExpressionChild(child) {
-	if (!child || (child.type !== 'JSXText' && child.type !== 'JSXExpressionContainer')) {
-		return false;
-	}
-
-	if (hasComment(/** @type {AST.Node & AST.NodeWithMaybeComments} */ (child))) {
-		return false;
-	}
-
-	const expression = /** @type {{ expression?: AST.Node & AST.NodeWithMaybeComments }} */ (child)
-		.expression;
-	return !expression || !hasComment(expression);
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function shouldTryInlineMultipleTextChildren(node) {
-	return (
-		wasOriginallySingleLine(node) &&
-		Array.isArray(node.children) &&
-		node.children.length > 1 &&
-		node.children.some((/** @type {any} */ child) => child.type === 'JSXText') &&
-		node.children.every(isInlineableTextOrExpressionChild)
-	);
-}
-
 /**
  * @param {AST.Node} child
  * @returns {boolean}
@@ -5795,72 +5715,10 @@ function isSimpleJSXExpressionChild(child) {
 	);
 }
 
-/**
- * Get leading comments from element metadata
- * @param {ESTreeJSX.JSXElement} node - The element node
- * @returns {AST.Comment[]}
- */
-function getElementLeadingComments(node) {
-	const fromMetadata = node?.metadata?.elementLeadingComments;
-	if (Array.isArray(fromMetadata)) {
-		return fromMetadata;
-	}
-	return [];
-}
-
-/**
- * Create doc parts for element-level comments
- * @param {AST.Comment[]} comments - Array of comments
- * @returns {Doc[]}
- */
-function createElementLevelCommentParts(comments) {
-	if (!comments || comments.length === 0) {
-		return [];
-	}
-
-	/** @type {Doc[]} */
-	const parts = [];
-
-	for (let i = 0; i < comments.length; i++) {
-		const comment = comments[i];
-		const nextComment = comments[i + 1];
-
-		if (comment.type === 'Line') {
-			parts.push('//' + comment.value);
-			parts.push(hardline);
-		} else if (comment.type === 'Block') {
-			parts.push('/*' + comment.value + '*/');
-			parts.push(hardline);
-		}
-
-		if (nextComment) {
-			const blankLinesBetween = getBlankLinesBetweenNodes(comment, nextComment);
-			if (blankLinesBetween > 0) {
-				parts.push(hardline);
-			}
-		}
-	}
-
-	return parts;
-}
-
-/**
- * Create element-level comment parts with trailing hardline trimmed
- * @param {AST.Comment[]} comments - Array of comments
- * @returns {Doc[]}
- */
-function createElementLevelCommentPartsTrimmed(comments) {
-	const parts = createElementLevelCommentParts(comments);
-	if (parts.length > 0 && parts[parts.length - 1] === hardline) {
-		parts.pop();
-	}
-	return parts;
-}
-
 /**
  * Print a JSX element
- * @param {AST.TSRXJSXElement} node - The JSX element node
- * @param {AstPath<any>} path - The AST path
+ * @param {AST.TSRXJSXElement | AST.JSXStyleElement} node - The JSX element node
+ * @param {AstPath<AST.TSRXJSXElement>} path - The AST path
  * @param {RippleFormatOptions} options - Prettier options
  * @param {PrintFn} print - Print callback
  * @returns {Doc | Doc[]}
@@ -5870,7 +5728,12 @@ function printJSXElement(node, path, options, print) {
 	const openingElement = node.openingElement;
 	const closingElement = node.closingElement;
 
-	const tagName = printJSXElementName(openingElement.name);
+	// Dynamic tags (`<{expr}>`) print the opening expression for both tags so
+	// they stay textually identical; static names print as plain strings.
+	const tagName =
+		openingElement.name.type === 'JSXExpressionContainer'
+			? ['{', path.call(print, 'openingElement', 'name', 'expression'), '}']
+			: printJSXElementName(openingElement.name);
 
 	const isSelfClosing = openingElement.selfClosing;
 	const hasAttributes = openingElement.attributes && openingElement.attributes.length > 0;
@@ -5955,26 +5818,13 @@ function printJSXElement(node, path, options, print) {
 		{ shouldBreak: shouldForceBreak },
 	);
 
-	// Trailing comments after the last child are attached by the parser either to
-	// the closing tag (`closingElement.leadingComments`) or, when the last child is
-	// an `{expr}` container, to `metadata.elementLeadingComments` positioned inside
-	// the body (start >= opening tag end). Emit both before `</tag>`.
-	const openingTagEnd = /** @type {AST.NodeWithLocation} */ (openingElement).end;
-	const bodyMetaComments = (node.metadata?.elementLeadingComments ?? []).filter(
-		(/** @type {AST.Comment} */ comment) =>
-			typeof comment.start === 'number' && comment.start >= openingTagEnd,
+	// Comments before `</tag>` and the comments of a comment-only element.
+	const { closingCommentDocs, innerCommentDocs } = collectElementBodyCommentDocs(
+		/** @type {AST.TSRXJSXElement} */ (node),
+		openingElement,
+		node.closingElement,
 	);
-	const trailingComments = [
-		...(node.closingElement?.leadingComments ?? []),
-		...bodyMetaComments,
-	].sort((a, b) => /** @type {number} */ (a.start) - /** @type {number} */ (b.start));
-	const lastMeaningfulChild = [...(node.children ?? [])]
-		.reverse()
-		.find((child) => child.type !== 'JSXText' || child.value.trim());
-	const closingCommentDocs = printElementBodyLineComments(trailingComments, lastMeaningfulChild);
 	const hasClosingComments = closingCommentDocs.length > 0;
-	// A comment-only element has no children; its comments live in `innerComments`.
-	const innerCommentDocs = printElementBodyLineComments(node.innerComments);
 
 	if (!hasChildren) {
 		const bodyComments = [...innerCommentDocs, ...closingCommentDocs];
@@ -6107,7 +5957,7 @@ function printJSXElement(node, path, options, print) {
 		];
 	}
 	const meaningfulChildren = node.children.filter(
-		(/** @type {any} */ child) => child.type !== 'JSXText' || child.value.trim(),
+		(child) => child.type !== 'JSXText' || child.value.trim(),
 	);
 	const singleMeaningfulChild = meaningfulChildren.length === 1 ? meaningfulChildren[0] : null;
 	if (
@@ -6122,9 +5972,9 @@ function printJSXElement(node, path, options, print) {
 		!forceMultiline &&
 		childrenDocs.length > 1 &&
 		wasOriginallySingleLine(node) &&
-		node.children.some((/** @type {any} */ child) => child.type === 'JSXText') &&
+		node.children.some((child) => child.type === 'JSXText') &&
 		node.children.every(
-			(/** @type {any} */ child) =>
+			(child) =>
 				child.type === 'JSXText' || isSimpleJSXExpressionChild(/** @type {AST.Node} */ (child)),
 		)
 	) {
@@ -6157,8 +6007,8 @@ function printJSXElement(node, path, options, print) {
 
 /**
  * Print a JSX fragment (<>...</>)
- * @param {ESTreeJSX.JSXFragment} node - The JSX fragment node
- * @param {AstPath<ESTreeJSX.JSXFragment>} path - The AST path
+ * @param {AST.TSRXJSXFragment} node - The JSX fragment node
+ * @param {AstPath<AST.TSRXJSXFragment>} path - The AST path
  * @param {RippleFormatOptions} options - Prettier options
  * @param {PrintFn} print - Print callback
  * @returns {Doc}
@@ -6166,12 +6016,23 @@ function printJSXElement(node, path, options, print) {
 function printJSXFragment(node, path, options, print) {
 	const hasChildren = node.children && node.children.length > 0;
 
+	// Comments before `</>` and the comments of a comment-only fragment.
+	const { closingCommentDocs, innerCommentDocs } = collectElementBodyCommentDocs(
+		node,
+		node.openingFragment,
+		node.closingFragment,
+	);
+
 	if (!hasChildren) {
+		const bodyComments = [...innerCommentDocs, ...closingCommentDocs];
+		if (bodyComments.length > 0) {
+			return group(['<>', indent(bodyComments), hardline, '</>']);
+		}
 		return '<></>';
 	}
 
 	// A `@{ … }` code block is the whole body and hugs the tags: `<>@{ … }</>`.
-	if (node.children.length === 1 && /** @type {any} */ (node.children[0]).type === 'JSXCodeBlock') {
+	if (node.children.length === 1 && node.children[0].type === 'JSXCodeBlock') {
 		return group(['<>', path.call(print, 'children', 0), '</>']);
 	}
 
@@ -6214,7 +6075,11 @@ function printJSXFragment(node, path, options, print) {
 	}
 
 	// Check if content can be inlined (single text node or single expression)
-	if (childrenDocs.length === 1 && typeof childrenDocs[0] === 'string') {
+	if (
+		childrenDocs.length === 1 &&
+		typeof childrenDocs[0] === 'string' &&
+		closingCommentDocs.length === 0
+	) {
 		return ['<>', childrenDocs[0], '</>'];
 	}
 	const meaningfulChildren = node.children.filter(
@@ -6225,6 +6090,7 @@ function printJSXFragment(node, path, options, print) {
 		meaningfulChildren.length === 1 &&
 		meaningfulChildren[0].type === 'JSXElement' &&
 		wasOriginallySingleLine(node) &&
+		closingCommentDocs.length === 0 &&
 		!willBreak(childrenDocs[0])
 	) {
 		// Keep the fragment inline when it fits; otherwise expand `<>` onto its own
@@ -6248,7 +6114,12 @@ function printJSXFragment(node, path, options, print) {
 	}
 
 	// Build the final fragment
-	return group(['<>', indent([hardline, ...formattedChildren]), hardline, '</>']);
+	return group([
+		'<>',
+		indent([hardline, ...formattedChildren, ...closingCommentDocs]),
+		hardline,
+		'</>',
+	]);
 }
 
 /**
@@ -6257,14 +6128,14 @@ function printJSXFragment(node, path, options, print) {
  * opening tag's end, but the child is visited first). Pull those out of the
  * children and return a map from attribute index to the comments that precede it,
  * so the element printer can render them in the opening tag instead of the body.
- * @param {AST.TSRXJSXElement} node
+ * @param {AST.TSRXJSXElement | AST.JSXStyleElement} node
  * @returns {Map<number, AST.Comment[]>}
  */
 function collectOpeningTagComments(node) {
 	/** @type {Map<number, AST.Comment[]>} */
 	const byAttr = new Map();
 	const openingElement = /** @type {AST.NodeWithLocation} */ (node.openingElement);
-	const attributes = /** @type {any[]} */ (node.openingElement?.attributes) ?? [];
+	const attributes = node.openingElement?.attributes ?? [];
 	if (!openingElement || attributes.length === 0 || !Array.isArray(node.children)) {
 		return byAttr;
 	}
@@ -6283,7 +6154,7 @@ function collectOpeningTagComments(node) {
 			}
 		}
 		if (keep.length !== lead.length) {
-			/** @type {any} */ (child).leadingComments = keep;
+			child.leadingComments = keep;
 		}
 	}
 	if (collected.length === 0) return byAttr;
@@ -6333,18 +6204,48 @@ function printTemplateChildLeadingComments(child) {
 }
 
 /**
- * Build doc parts for `//` line comments attached to an element body — trailing
+ * Collect and print the comments that belong to an element/fragment body:
+ * trailing comments after the last child (attached by the parser to the closing
+ * tag's `leadingComments` or, when the last child is an `{expr}` container, to
+ * `metadata.elementLeadingComments` positioned inside the body) and the comments
+ * of a comment-only body (`innerComments`).
+ * @param {AST.TSRXJSXElement | AST.TSRXJSXFragment} node
+ * @param {AST.TSRXJSXElement['openingElement'] | AST.TSRXJSXFragment['openingFragment']} openingNode
+ * @param {AST.TSRXJSXElement['closingElement'] | AST.TSRXJSXFragment['closingFragment']} closingNode
+ * @returns {{ closingCommentDocs: Doc[], innerCommentDocs: Doc[] }}
+ */
+function collectElementBodyCommentDocs(node, openingNode, closingNode) {
+	const openingEnd = openingNode?.end;
+	const bodyMetaComments = (node.metadata?.elementLeadingComments ?? []).filter(
+		(/** @type {AST.Comment} */ comment) =>
+			typeof comment.start === 'number' &&
+			typeof openingEnd === 'number' &&
+			comment.start >= openingEnd,
+	);
+	const trailingComments = [...(closingNode?.leadingComments ?? []), ...bodyMetaComments].sort(
+		(/** @type {AST.Comment} */ a, /** @type {AST.Comment} */ b) =>
+			/** @type {number} */ (a.start) - /** @type {number} */ (b.start),
+	);
+	const lastMeaningfulChild = [...(node.children ?? [])]
+		.reverse()
+		.find((child) => child.type !== 'JSXText' || child.value.trim());
+	return {
+		closingCommentDocs: printElementBodyComments(trailingComments, lastMeaningfulChild),
+		innerCommentDocs: printElementBodyComments(node.innerComments),
+	};
+}
+
+/**
+ * Build doc parts for comments attached to an element body — trailing
  * comments before `</tag>` (`closingElement.leadingComments`) or the comments of a
- * comment-only element (`innerComments`). Block comments are intentionally skipped:
- * they survive in the adjacent JSXText value and are already rendered as text, so
- * emitting them here would duplicate them. Each comment is emitted on its own line
+ * comment-only element (`innerComments`). Each comment is emitted on its own line
  * at the children indent.
  * @param {AST.Comment[] | null | undefined} commentList
  * @param {any} [previousNode]
  * @returns {Doc[]}
  */
-function printElementBodyLineComments(commentList, previousNode = null) {
-	const comments = (commentList ?? []).filter((comment) => comment.type === 'Line');
+function printElementBodyComments(commentList, previousNode = null) {
+	const comments = commentList ?? [];
 	if (comments.length === 0) {
 		return [];
 	}
@@ -6358,7 +6259,9 @@ function printElementBodyLineComments(commentList, previousNode = null) {
 		if (prev && getBlankLinesBetweenNodes(prev, comments[i]) > 0) {
 			parts.push(hardline);
 		}
-		parts.push('//' + comments[i].value);
+		parts.push(
+			comments[i].type === 'Line' ? '//' + comments[i].value : '/*' + comments[i].value + '*/',
+		);
 		prev = comments[i];
 	}
 	return parts;
@@ -6399,10 +6302,10 @@ function printJSXCodeBlock(node, path, options, print) {
 		parts.push(path.call(print, 'render'));
 	}
 	// Trailing comments after the last statement/render inside the block.
-	const innerCommentDocs = printElementBodyLineComments(node.innerComments);
+	const innerCommentDocs = printElementBodyComments(node.innerComments);
 	if (innerCommentDocs.length > 0) {
 		const lastNode = node.render ?? node.body[node.body.length - 1];
-		const firstComment = (node.innerComments ?? []).find((c) => c.type === 'Line');
+		const firstComment = (node.innerComments ?? [])[0];
 		if (lastNode && firstComment && getBlankLinesBetweenNodes(lastNode, firstComment) > 0) {
 			parts.push(hardline);
 		}
@@ -6483,539 +6386,3 @@ function printJSXElementName(node) {
 	}
 	return 'Unknown';
 }
-
-/**
- * Print a member expression as simple string (for element tag names)
- * @param {AST.Node} node - The node to print
- * @param {RippleFormatOptions} options - Prettier options
- * @param {boolean} [computed=false] - Whether the property is computed
- * @returns {string}
- */
-function printMemberExpressionSimple(node, options, computed = false) {
-	if (node.type === 'JSXIdentifier') {
-		return node.name;
-	}
-
-	if (node.type === 'JSXMemberExpression') {
-		return (
-			printMemberExpressionSimple(node.object, options) +
-			'.' +
-			printMemberExpressionSimple(node.property, options, true)
-		);
-	}
-
-	if (node.type === 'JSXNamespacedName') {
-		return node.namespace.name + ':' + node.name.name;
-	}
-
-	if (node.type === 'Identifier') {
-		return node.name;
-	}
-
-	if (node.type === 'MemberExpression') {
-		const obj = printMemberExpressionSimple(node.object, options);
-		let prop;
-		if (node.computed) {
-			prop = '[' + printMemberExpressionSimple(node.property, options, true) + ']';
-		} else {
-			prop = '.' + printMemberExpressionSimple(node.property, options, true);
-		}
-		return obj + prop;
-	}
-
-	if (node.type === 'Literal') {
-		return computed ? formatStringLiteral(node.value, options) : JSON.stringify(node.value);
-	}
-	return '';
-}
-
-/**
- * Check whether an attribute value can expand into multiline content.
- * @param {AST.Expression | null | undefined} value - The attribute value node
- * @param {boolean} [is_nested_in_object=false] - Whether this value is nested within an object literal
- * @returns {boolean}
- */
-function is_attribute_value_breakable(value, is_nested_in_object = false) {
-	if (!value) return false;
-
-	switch (value.type) {
-		case 'ConditionalExpression':
-			// Keep simple top-level ternary attributes inline when they fit.
-			// We only force-break when a conditional is nested in an object literal value.
-			return is_nested_in_object;
-		case 'ObjectExpression':
-			return value.properties.some(
-				(property) =>
-					property.type === 'Property' &&
-					is_attribute_value_breakable(/** @type {AST.Expression} */ (property.value), true),
-			);
-		default:
-			return false;
-	}
-}
-
-/**
- * Print a JSX element node
- * @param {AST.Element} element - The element node
- * @param {AstPath<AST.Element>} path - The AST path
- * @param {RippleFormatOptions} options - Prettier options
- * @param {PrintFn} print - Print callback
- * @returns {Doc}
- */
-function printElement(element, path, options, print) {
-	const node = /** @type {any} */ (element);
-	const tagName = printMemberExpressionSimple(node.id, options);
-	const openingElement = /** @type {any} */ (node.openingElement);
-	/** @type {Doc} */
-	let typeArgsDoc = '';
-	if (openingElement?.typeArguments) {
-		typeArgsDoc = path.call(print, 'openingElement', 'typeArguments');
-	}
-	const elementLeadingComments = getElementLeadingComments(/** @type {any} */ (node));
-
-	// `metadata.elementLeadingComments` may include comments that actually appear *inside* the element
-	// body (after the opening tag). Those must not be hoisted before the element.
-	const outerElementLeadingComments = elementLeadingComments.filter(
-		(/** @type {AST.Comment} */ comment) =>
-			typeof comment.start !== 'number' || comment.start < node.start,
-	);
-	const innerElementBodyComments = elementLeadingComments.filter(
-		(/** @type {AST.Comment} */ comment) =>
-			typeof comment.start === 'number' &&
-			comment.start >= /** @type {AST.NodeWithLocation} */ (node.openingElement).end &&
-			comment.start < node.end,
-	);
-	const metadataCommentParts =
-		outerElementLeadingComments.length > 0
-			? createElementLevelCommentParts(outerElementLeadingComments)
-			: [];
-	const fallbackElementComments = [];
-	const shouldLiftTextLevelComments = outerElementLeadingComments.length === 0;
-
-	const hasChildren = Array.isArray(node.children) && node.children.length > 0;
-	const hasInnerComments = Array.isArray(node.innerComments) && node.innerComments.length > 0;
-	const isSelfClosing = !!node.selfClosing;
-	const hasAttributes = Array.isArray(node.attributes) && node.attributes.length > 0;
-
-	// Collect comments that the parser attached to children but actually belong inside
-	// the opening tag (positionally before openingElement.end). These should be printed
-	// as leading comments before the appropriate attribute, not lifted to element-level.
-	/** @type {Set<AST.Comment>} */
-	const openingTagCommentsSet = new Set();
-	if (hasChildren && node.openingElement) {
-		const openingEnd = /** @type {AST.NodeWithLocation} */ (node.openingElement).end;
-		for (const child of node.children) {
-			if (
-				(child.type === 'JSXExpressionContainer' || child.type === 'JSXText') &&
-				Array.isArray(child.leadingComments)
-			) {
-				for (const comment of child.leadingComments) {
-					if (
-						typeof comment.start === 'number' &&
-						comment.start >= node.start &&
-						comment.start < openingEnd
-					) {
-						openingTagCommentsSet.add(comment);
-					}
-				}
-			}
-		}
-	}
-
-	// Build a map from attribute index to comments that should precede that attribute
-	const openingTagCommentsByAttrIndex = new Map();
-	if (openingTagCommentsSet.size > 0 && hasAttributes) {
-		const sortedOTC = [...openingTagCommentsSet].sort(
-			(a, b) => /** @type {number} */ (a.start) - /** @type {number} */ (b.start),
-		);
-		let commentIdx = 0;
-		for (let attrIdx = 0; attrIdx < node.attributes.length; attrIdx++) {
-			const attr = node.attributes[attrIdx];
-			const commentsForAttr = [];
-			while (
-				commentIdx < sortedOTC.length &&
-				/** @type {number} */ (sortedOTC[commentIdx].start) <
-					/** @type {AST.NodeWithLocation} */ (attr).start
-			) {
-				commentsForAttr.push(sortedOTC[commentIdx]);
-				commentIdx++;
-			}
-			if (commentsForAttr.length > 0) {
-				openingTagCommentsByAttrIndex.set(attrIdx, commentsForAttr);
-			}
-		}
-	}
-
-	if (isSelfClosing && !hasInnerComments && !hasAttributes) {
-		const elementDoc = group(['<', tagName, typeArgsDoc, ' />']);
-		return metadataCommentParts.length > 0 ? [...metadataCommentParts, elementDoc] : elementDoc;
-	}
-
-	// Determine the line break type for attributes
-	// When singleAttributePerLine is true, force each attribute on its own line with hardline
-	// Otherwise, use line to allow collapsing when it fits
-	const attrLineBreak = options.singleAttributePerLine ? hardline : line;
-
-	const shouldUseSelfClosingSyntax = isSelfClosing || (!hasChildren && !hasInnerComments);
-
-	const hasOpeningTagComments = openingTagCommentsSet.size > 0;
-	let attrIndex = 0;
-	let hasBreakingAttribute = false;
-	const attrDocs = hasAttributes
-		? path.map((attrPath) => {
-				const idx = attrIndex++;
-				const commentsForAttr = openingTagCommentsByAttrIndex.get(idx);
-				/** @type {Doc[]} */
-				const parts = [];
-				if (commentsForAttr) {
-					for (const comment of commentsForAttr) {
-						// Line comments (//) consume the rest of the line, so they must
-						// use hardline to force a break. Block comments can use normal breaks.
-						if (comment.type === 'Line') {
-							parts.push(hardline);
-							parts.push('//' + comment.value);
-						} else if (comment.type === 'Block') {
-							parts.push(attrLineBreak);
-							parts.push('/*' + comment.value + '*/');
-						}
-					}
-				}
-				parts.push(attrLineBreak);
-				const attrDoc = print(attrPath);
-				parts.push(attrDoc);
-				const attr_node = /** @type {ESTreeJSX.JSXAttribute | ESTreeJSX.JSXSpreadAttribute} */ (
-					/** @type {unknown} */ (attrPath.node)
-				);
-				if (
-					!hasBreakingAttribute &&
-					(willBreak(attrDoc) ||
-						(attr_node.type === 'JSXAttribute' &&
-							is_attribute_value_breakable(/** @type {any} */ (attr_node.value))))
-				) {
-					hasBreakingAttribute = true;
-				}
-				return parts;
-			}, 'attributes')
-		: [];
-	const shouldForceBreak = hasOpeningTagComments || hasBreakingAttribute;
-	const openingTagAlwaysBreaks =
-		(hasAttributes && options.singleAttributePerLine) || shouldForceBreak;
-	const openingTag = group([
-		'<',
-		tagName,
-		typeArgsDoc,
-		hasAttributes
-			? indent([
-					...attrDocs,
-					// Force the group to break when there are line comments in the opening tag,
-					// or when any attribute value would break (e.g. multiline objects, ternaries).
-					// This ensures attributes are broken onto separate lines rather than breaking
-					// expression values inline on the same line as the tag name.
-					...(shouldForceBreak ? [breakParent] : []),
-				])
-			: '',
-		// Add line break opportunity before > or />
-		// Use line for self-closing (keeps space), softline for non-self-closing when attributes present
-		// When bracketSameLine is true, don't add line break for non-self-closing elements
-		shouldUseSelfClosingSyntax
-			? hasAttributes
-				? line
-				: ''
-			: hasAttributes && !options.bracketSameLine
-				? softline
-				: '',
-		shouldUseSelfClosingSyntax ? (hasAttributes ? '/>' : ' />') : '>',
-	]);
-
-	if (!hasChildren) {
-		if (!hasInnerComments) {
-			return metadataCommentParts.length > 0 ? [...metadataCommentParts, openingTag] : openingTag;
-		}
-
-		/** @type {Doc[]} */
-		const innerParts = [];
-		for (const comment of node.innerComments ?? []) {
-			if (comment.type === 'Line') {
-				innerParts.push('//' + comment.value);
-				innerParts.push(hardline);
-			} else if (comment.type === 'Block') {
-				innerParts.push('/*' + comment.value + '*/');
-				innerParts.push(hardline);
-			}
-		}
-
-		if (innerParts.length > 0 && innerParts[innerParts.length - 1] === hardline) {
-			innerParts.pop();
-		}
-
-		const closingTag = ['</', tagName, '>'];
-		const elementOutput = group([
-			openingTag,
-			indent([hardline, ...innerParts]),
-			hardline,
-			closingTag,
-		]);
-		return metadataCommentParts.length > 0
-			? [...metadataCommentParts, elementOutput]
-			: elementOutput;
-	}
-
-	// Has children - use unified children processing
-	// Build children with whitespace preservation
-	/** @type {Doc[]} */
-	const finalChildren = [];
-	const sortedInnerElementBodyComments =
-		innerElementBodyComments.length > 0
-			? innerElementBodyComments.slice().sort((a, b) => (a.start ?? 0) - (b.start ?? 0))
-			: [];
-	let innerElementBodyCommentIndex = 0;
-
-	for (let i = 0; i < node.children.length; i++) {
-		const currentChild = node.children[i];
-		const nextChild = node.children[i + 1];
-
-		// Insert any element-body comments that appear before this child.
-		if (innerElementBodyCommentIndex < sortedInnerElementBodyComments.length) {
-			const currentChildStart = typeof currentChild.start === 'number' ? currentChild.start : null;
-			if (currentChildStart != null) {
-				const commentsBefore = [];
-				while (innerElementBodyCommentIndex < sortedInnerElementBodyComments.length) {
-					/** @type {AST.Comment} */
-					const comment = sortedInnerElementBodyComments[innerElementBodyCommentIndex];
-					if (typeof comment.start !== 'number' || comment.start >= currentChildStart) {
-						break;
-					}
-					commentsBefore.push(comment);
-					innerElementBodyCommentIndex++;
-				}
-				if (commentsBefore.length > 0) {
-					if (finalChildren.length > 0) {
-						finalChildren.push(hardline);
-					}
-					finalChildren.push(...createElementLevelCommentPartsTrimmed(commentsBefore));
-					finalChildren.push(hardline);
-				}
-			}
-		}
-
-		const isTextLikeChild =
-			currentChild.type === 'JSXExpressionContainer' || currentChild.type === 'JSXText';
-		const hasTextLeadingComments =
-			shouldLiftTextLevelComments &&
-			isTextLikeChild &&
-			Array.isArray(currentChild.leadingComments) &&
-			currentChild.leadingComments.length > 0;
-		const currentChildAny = /** @type {any} */ (currentChild);
-		const rawExpressionLeadingComments =
-			isTextLikeChild && Array.isArray(currentChildAny.expression?.leadingComments)
-				? currentChildAny.expression.leadingComments
-				: null;
-		const elementBodyLeadingComments =
-			hasTextLeadingComments && node.openingElement
-				? /** @type {AST.Comment[]} */ (currentChild.leadingComments).filter(
-						(comment) =>
-							comment.context?.containerId === node.metadata?.commentContainerId &&
-							comment.context?.beforeMeaningfulChild &&
-							typeof comment.start === 'number' &&
-							comment.start >= /** @type {AST.NodeWithLocation} */ (node.openingElement).end &&
-							comment.start < /** @type {AST.NodeWithLocation} */ (currentChild).start,
-					)
-				: [];
-
-		if (hasTextLeadingComments) {
-			for (let j = 0; j < /** @type {AST.Comment[]} */ (currentChild.leadingComments).length; j++) {
-				const comment = /** @type {AST.Comment[]} */ (currentChild.leadingComments)[j];
-				// Don't lift comments that belong inside the opening tag (handled in attribute section)
-				if (!openingTagCommentsSet.has(comment) && !elementBodyLeadingComments.includes(comment)) {
-					fallbackElementComments.push(comment);
-				}
-			}
-		}
-
-		const childPrintArgs = /** @type {PrintArgs} */ ({});
-		if (hasTextLeadingComments) {
-			childPrintArgs.suppressLeadingComments = true;
-		}
-		if (rawExpressionLeadingComments && rawExpressionLeadingComments.length > 0) {
-			childPrintArgs.suppressExpressionLeadingComments = true;
-		}
-
-		const printedChild =
-			Object.keys(childPrintArgs).length > 0
-				? path.call((childPath) => print(childPath, childPrintArgs), 'children', i)
-				: path.call(print, 'children', i);
-
-		const childLeadingCommentParts =
-			elementBodyLeadingComments.length > 0
-				? createElementLevelCommentParts(elementBodyLeadingComments)
-				: rawExpressionLeadingComments && rawExpressionLeadingComments.length > 0
-					? createElementLevelCommentParts(rawExpressionLeadingComments)
-					: null;
-		const childDoc = childLeadingCommentParts
-			? [...childLeadingCommentParts, printedChild]
-			: printedChild;
-		finalChildren.push(childDoc);
-
-		// Insert element-body comments that fall between this child and the next child (or the closing tag).
-		let insertedBodyCommentsBetween = false;
-		if (innerElementBodyCommentIndex < sortedInnerElementBodyComments.length) {
-			const currentChildEnd = /** @type {AST.NodeWithLocation} */ (currentChild).end;
-			const nextChildStart =
-				nextChild && typeof nextChild.start === 'number' ? nextChild.start : null;
-			const commentsBetween = [];
-			while (innerElementBodyCommentIndex < sortedInnerElementBodyComments.length) {
-				/** @type {AST.Comment} */
-				const comment = sortedInnerElementBodyComments[innerElementBodyCommentIndex];
-				if (typeof comment.start !== 'number') {
-					innerElementBodyCommentIndex++;
-					continue;
-				}
-				if (comment.start < currentChildEnd) {
-					break;
-				}
-				if (nextChildStart != null && comment.start >= nextChildStart) {
-					break;
-				}
-				commentsBetween.push(comment);
-				innerElementBodyCommentIndex++;
-			}
-			if (commentsBetween.length > 0) {
-				const firstComment = commentsBetween[0];
-				const lastComment = commentsBetween[commentsBetween.length - 1];
-
-				// Preserve any blank line(s) that existed between the previous child and the comment block.
-				const blankLinesBefore = getBlankLinesBetweenNodes(currentChild, firstComment);
-				finalChildren.push(hardline);
-				if (blankLinesBefore > 0) {
-					finalChildren.push(hardline);
-				}
-
-				finalChildren.push(...createElementLevelCommentPartsTrimmed(commentsBetween));
-
-				if (nextChild) {
-					// Preserve any blank line(s) that existed between the comment block and the next child.
-					const blankLinesAfter = getBlankLinesBetweenNodes(lastComment, nextChild);
-					finalChildren.push(hardline);
-					if (blankLinesAfter > 0) {
-						finalChildren.push(hardline);
-					}
-				}
-				insertedBodyCommentsBetween = true;
-			}
-		}
-
-		if (nextChild) {
-			if (insertedBodyCommentsBetween) {
-				continue;
-			}
-			const whitespaceTarget =
-				nextChild.leadingComments && nextChild.leadingComments.length > 0
-					? nextChild.leadingComments[0]
-					: nextChild;
-			const whitespaceLinesCount = getBlankLinesBetweenNodes(currentChild, whitespaceTarget);
-			const isTextOrExpressionChild =
-				currentChild.type === 'JSXExpressionContainer' ||
-				currentChild.type === 'JSXText' ||
-				nextChild.type === 'JSXExpressionContainer' ||
-				nextChild.type === 'JSXText';
-
-			if (whitespaceLinesCount > 0) {
-				finalChildren.push(hardline);
-				finalChildren.push(hardline);
-			} else if (!isTextOrExpressionChild && shouldAddBlankLine(currentChild, nextChild)) {
-				finalChildren.push(hardline);
-				finalChildren.push(hardline);
-			} else {
-				finalChildren.push(hardline);
-			}
-		}
-	}
-
-	// Collect comments attached to the closing element (comments that appear after the last child
-	// but before the closing tag, e.g. `</div>`). The parser attaches these as leadingComments
-	// on either the closingElement node or the closingElement.name node depending on context.
-	const closingElementComments = [
-		...(node.closingElement && Array.isArray(node.closingElement.leadingComments)
-			? node.closingElement.leadingComments
-			: []),
-		...(node.closingElement &&
-		node.closingElement.name &&
-		Array.isArray(node.closingElement.name.leadingComments)
-			? node.closingElement.name.leadingComments
-			: []),
-	];
-
-	if (closingElementComments.length > 0) {
-		const lastChild = node.children[node.children.length - 1];
-		if (lastChild) {
-			const blankLinesBefore = getBlankLinesBetweenNodes(lastChild, closingElementComments[0]);
-			finalChildren.push(hardline);
-			if (blankLinesBefore > 0) {
-				finalChildren.push(hardline);
-			}
-		}
-		finalChildren.push(...createElementLevelCommentPartsTrimmed(closingElementComments));
-	}
-
-	const fallbackCommentParts =
-		fallbackElementComments.length > 0
-			? createElementLevelCommentParts(fallbackElementComments)
-			: [];
-	const leadingCommentParts =
-		metadataCommentParts.length > 0
-			? [...metadataCommentParts, ...fallbackCommentParts]
-			: fallbackCommentParts;
-
-	const closingTag = ['</', tagName, '>'];
-	let elementOutput;
-	const shouldTryInlineMultipleChildren =
-		!openingTagAlwaysBreaks &&
-		fallbackCommentParts.length === 0 &&
-		closingElementComments.length === 0 &&
-		shouldTryInlineMultipleTextChildren(node);
-
-	if (finalChildren.length === 1) {
-		const child = finalChildren[0];
-		const firstChild = /** @type {any} */ (node.children[0]);
-		const isNonSelfClosingElement =
-			firstChild && firstChild.type === 'Element' && !firstChild.selfClosing;
-		const isElementChild = firstChild && firstChild.type === 'Element';
-		const isRawTextChild =
-			firstChild && firstChild.type === 'Text' && typeof firstChild.raw === 'string';
-
-		if (
-			(typeof child === 'string' || isRawTextChild) &&
-			shouldInlineSingleChild(node, firstChild, child)
-		) {
-			elementOutput = openingTagAlwaysBreaks
-				? [openingTag, indent([hardline, child]), hardline, closingTag]
-				: conditionalGroup([
-						group([openingTag, child, closingTag]),
-						[openingTag, indent([hardline, child]), hardline, closingTag],
-					]);
-		} else if (
-			child &&
-			typeof child === 'object' &&
-			!isNonSelfClosingElement &&
-			shouldInlineSingleChild(node, firstChild, child)
-		) {
-			if (isElementChild && hasAttributes) {
-				elementOutput = [openingTag, indent([hardline, child]), hardline, closingTag];
-			} else {
-				elementOutput = group([openingTag, indent([softline, child]), softline, closingTag]);
-			}
-		} else {
-			elementOutput = [openingTag, indent([hardline, ...finalChildren]), hardline, closingTag];
-		}
-	} else if (shouldTryInlineMultipleChildren) {
-		const inlineChildren = path.map(print, 'children');
-		elementOutput = conditionalGroup([
-			group([openingTag, ...inlineChildren, closingTag]),
-			[openingTag, indent([hardline, ...finalChildren]), hardline, closingTag],
-		]);
-	} else {
-		elementOutput = group([openingTag, indent([hardline, ...finalChildren]), hardline, closingTag]);
-	}
-
-	return leadingCommentParts.length > 0 ? [...leadingCommentParts, elementOutput] : elementOutput;
-}

package/src/index.test.js

@@ -74,6 +74,34 @@ describe('prettier-plugin', () => {
 		expect(result).toBeWithNewline(expected);
 	});
 
+	it('formats dynamic element tags', async () => {
+		const input = `function App(props){const Child='div';return <{Child} {...props} class="card"><span>Hello</span></{Child}>}`;
+		const expected = `function App(props) {
+  const Child = "div";
+  return <{Child} {...props} class="card">
+    <span>Hello</span>
+  </{Child}>;
+}`;
+
+		const result = await format(input);
+		expect(result).toBeWithNewline(expected);
+	});
+
+	it('formats dynamic element tag expressions', async () => {
+		const input = `function App(){return <><{registry.item}/><{items[0]}/><{'section'}/><{\`article\`}/></>;}`;
+		const expected = `function App() {
+  return <>
+    <{registry.item} />
+    <{items[0]} />
+    <{"section"} />
+    <{\`article\`} />
+  </>;
+}`;
+
+		const result = await format(input);
+		expect(result).toBeWithNewline(expected);
+	});
+
 	it('formats a fragment code block with setup and template control flow', async () => {
 		const input = `function App(){return <>@{
 const items=[1,2,3];
@@ -2725,6 +2753,104 @@ function test() {
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should preserve template comments and blank lines from unformatted input', async () => {
+			const input = `function TodoList() @{
+<>
+  /* world 0 */
+  // hello
+  /* world 1 */
+  <ul>
+  // hello
+  /* world 2 */
+
+  </ul>
+
+  <ul>
+  // hello
+  /* world 3 */
+  // hello
+  </ul>
+  /* world 4 */
+  </>
+}`;
+
+			const expected = `function TodoList() @{
+  <>
+    /* world 0 */
+    // hello
+    /* world 1 */
+    <ul>
+      // hello
+      /* world 2 */
+    </ul>
+
+    <ul>
+      // hello
+      /* world 3 */
+      // hello
+    </ul>
+    /* world 4 */
+  </>
+}`;
+
+			const result = await format(input, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+			// Reformatting the output must be stable.
+			expect(await format(result, { singleQuote: true })).toBeWithNewline(expected);
+		});
+
+		it('should preserve block comments before a closing fragment', async () => {
+			const expected = `function App() @{
+  <>
+    <span>{'child'}</span>
+
+    /* block comment */
+  </>
+}`;
+
+			const result = await format(expected, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should preserve a blank line before a trailing block comment in elements', async () => {
+			const expected = `function App() {
+  <div>
+    <span>{'child'}</span>
+
+    /* block comment */
+  </div>
+}`;
+
+			const result = await format(expected, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should preserve a comment-only fragment body', async () => {
+			const expected = `function App() @{
+  <>
+    /* only */
+  </>
+}`;
+
+			const result = await format(expected, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should keep blank lines around comments between template siblings', async () => {
+			const expected = `function App() @{
+  <>
+    <ul></ul>
+
+    /* between */
+
+    <ul></ul>
+  </>
+}`;
+
+			const result = await format(expected, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should preserve trailing comments in function parameters', async () => {
 			const expected = `function test(
   // comment in params