@tsrx/prettier-plugin 0.3.58 → 0.3.60

package/package.json

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

package/src/index.js

@@ -36,7 +36,7 @@ const {
 	indentIfBreak,
 	lineSuffix,
 } = builders;
-const { willBreak } = utils;
+const { replaceEndOfLine, willBreak } = utils;
 
 /** @type {import('prettier').Plugin['languages']} */
 export const languages = [
@@ -2236,7 +2236,7 @@ function printRippleNode(node, path, options, print, args) {
 
 		case 'Text': {
 			if (typeof node.raw === 'string') {
-				nodeContent = node.raw;
+				nodeContent = printRawText(node.raw);
 				break;
 			}
 
@@ -4286,23 +4286,17 @@ function printTSInterfaceBody(node, path, options, print) {
  * @param {AstPath<AST.TSTypeAliasDeclaration>} path - The AST path
  * @param {RippleFormatOptions} options - Prettier options
  * @param {PrintFn} print - Print callback
- * @returns {Doc[]}
+ * @returns {Doc}
  */
 function printTSTypeAliasDeclaration(node, path, options, print) {
 	/** @type {Doc[]} */
-	const parts = [];
-	parts.push('type ');
-	parts.push(node.id.name);
+	const head = ['type ', node.id.name];
 
 	if (node.typeParameters) {
-		parts.push(path.call(print, 'typeParameters'));
+		head.push(path.call(print, 'typeParameters'));
 	}
 
-	parts.push(' = ');
-	parts.push(path.call(print, 'typeAnnotation'));
-	parts.push(semi(options));
-
-	return parts;
+	return group([head, ' =', indent([line, path.call(print, 'typeAnnotation')]), semi(options)]);
 }
 
 /**
@@ -5394,19 +5388,22 @@ function printTSConstructorType(node, path, options, print) {
  * @param {AstPath<AST.TSConditionalType>} path - The AST path
  * @param {RippleFormatOptions} options - Prettier options
  * @param {PrintFn} print - Print callback
- * @returns {Doc[]}
+ * @returns {Doc}
  */
 function printTSConditionalType(node, path, options, print) {
-	/** @type {Doc[]} */
-	const parts = [];
-	parts.push(path.call(print, 'checkType'));
-	parts.push(' extends ');
-	parts.push(path.call(print, 'extendsType'));
-	parts.push(' ? ');
-	parts.push(path.call(print, 'trueType'));
-	parts.push(' : ');
-	parts.push(path.call(print, 'falseType'));
-	return parts;
+	const trueType = path.call(print, 'trueType');
+	const falseType = path.call(print, 'falseType');
+
+	const shouldIndentTrueType = node.trueType.type !== 'TSConditionalType';
+	const shouldIndentFalseType = node.falseType.type !== 'TSConditionalType';
+
+	return group([
+		path.call(print, 'checkType'),
+		' extends ',
+		path.call(print, 'extendsType'),
+		indent([line, '? ', shouldIndentTrueType ? indent(trueType) : trueType]),
+		indent([line, ': ', shouldIndentFalseType ? indent(falseType) : falseType]),
+	]);
 }
 
 /**
@@ -5504,6 +5501,27 @@ function printTSIndexedAccessType(node, path, options, print) {
 	return [path.call(print, 'objectType'), '[', path.call(print, 'indexType'), ']'];
 }
 
+/**
+ * Print direct TSRX text so it can wrap like JSX text when an element body breaks.
+ * @param {string} raw
+ * @returns {Doc}
+ */
+function printRawText(raw) {
+	const text = raw.trim().replace(/(?:\r\n|\r|\n)[^\S\r\n]+/gu, ' ');
+	if (!text) {
+		return '';
+	}
+
+	return fill(
+		text
+			.split(/([^\S\r\n]+)/u)
+			.filter(Boolean)
+			.map((part) => {
+				return /^[^\S\r\n]+$/u.test(part) ? line : replaceEndOfLine(part);
+			}),
+	);
+}
+
 /**
  * @param {AST.Node} parentNode
  * @param {AST.Node} firstChild
@@ -6273,6 +6291,8 @@ function printElement(element, path, options, print) {
 			}, 'attributes')
 		: [];
 	const shouldForceBreak = hasOpeningTagComments || hasBreakingAttribute;
+	const openingTagAlwaysBreaks =
+		(hasAttributes && options.singleAttributePerLine) || shouldForceBreak;
 	const openingTag = group([
 		'<',
 		tagName,
@@ -6384,12 +6404,23 @@ function printElement(element, path, options, print) {
 			isTextLikeChild && Array.isArray(currentChild.expression?.leadingComments)
 				? currentChild.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)) {
+				if (!openingTagCommentsSet.has(comment) && !elementBodyLeadingComments.includes(comment)) {
 					fallbackElementComments.push(comment);
 				}
 			}
@@ -6408,10 +6439,15 @@ function printElement(element, path, options, print) {
 				? path.call((childPath) => print(childPath, childPrintArgs), 'children', i)
 				: path.call(print, 'children', i);
 
-		const childDoc =
-			rawExpressionLeadingComments && rawExpressionLeadingComments.length > 0
-				? [...createElementLevelCommentParts(rawExpressionLeadingComments), printedChild]
-				: printedChild;
+		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).
@@ -6538,9 +6574,19 @@ function printElement(element, path, options, print) {
 		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' && shouldInlineSingleChild(node, firstChild, child)) {
-			elementOutput = group([openingTag, child, closingTag]);
+		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' &&

package/src/index.test.js

@@ -4,6 +4,14 @@ import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import { languages } from './index.js';
 
+/**
+ * @typedef {typeof prettier & {
+ *   __debug: {
+ *     printToDoc: (code: string, options: import('prettier').Options) => Promise<import('prettier').Doc>;
+ *   };
+ * }} PrettierWithDebug
+ */
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
@@ -62,6 +70,41 @@ describe('prettier-plugin', () => {
 		});
 	};
 
+	/**
+	 * @param {string} code
+	 * @param {import('prettier').Options} [options]
+	 */
+	const printToDoc = async (code, options = {}) => {
+		const prettierWithDebug = /** @type {PrettierWithDebug} */ (prettier);
+		return await prettierWithDebug.__debug.printToDoc(code, {
+			parser: 'ripple',
+			plugins: [join(__dirname, 'index.js')],
+			...options,
+		});
+	};
+
+	/**
+	 * @param {unknown} doc
+	 * @param {(doc: Record<string, unknown>) => boolean} predicate
+	 * @returns {boolean}
+	 */
+	const docContains = (doc, predicate) => {
+		if (!doc || typeof doc !== 'object') {
+			return false;
+		}
+
+		if (Array.isArray(doc)) {
+			return doc.some((part) => docContains(part, predicate));
+		}
+
+		const objectDoc = /** @type {Record<string, unknown>} */ (doc);
+		if (predicate(objectDoc)) {
+			return true;
+		}
+
+		return Object.values(objectDoc).some((value) => docContains(value, predicate));
+	};
+
 	/**
 	 * @param {string} code
 	 * @param {Partial<import('prettier').CursorOptions>} options
@@ -1055,6 +1098,23 @@ export component Test({ a, b }: Props) {}`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should not force attribute-less elements to break with singleAttributePerLine', async () => {
+			const input = `component One() {
+  <div>"Hello"</div>
+}`;
+
+			const expected = `component One() {
+  <div>"Hello"</div>
+}`;
+
+			const result = await format(input, {
+				singleQuote: true,
+				printWidth: 100,
+				singleAttributePerLine: true,
+			});
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should respect singleAttributePerLine set to false setting', async () => {
 			const input = `component One() {
   <button
@@ -3239,6 +3299,114 @@ const items = [] as unknown[];`;
 		expect(result).toBeWithNewline(expected);
 	});
 
+	it('should preserve literal newlines in direct double-quoted text children', async () => {
+		const input = `component App() {
+  <pre>"first
+second"</pre>
+}`;
+
+		const expected = `component App() {
+  <pre>"first
+second"</pre>
+}`;
+
+		const result = await format(input);
+		expect(result).toBeWithNewline(expected);
+	});
+
+	it('should wrap direct double-quoted text children idempotently', async () => {
+		const input = `component App() {
+  <p class="lede">
+    "Set up TSRX with React, Preact, Solid, Vue, or Ripple and then wire in the editor tooling that makes "
+    <code class="inline-code">".tsrx"</code>
+    " files feel native in the rest of your repo."
+  </p>
+}`;
+
+		const expected = `component App() {
+  <p class="lede">
+    "Set up TSRX with React, Preact, Solid, Vue, or Ripple and then wire in the editor tooling that
+    makes "
+    <code class="inline-code">".tsrx"</code>
+    " files feel native in the rest of your repo."
+  </p>
+}`;
+
+		const result = await format(input, { printWidth: 100 });
+		const secondResult = await format(result, { printWidth: 100 });
+		expect(result).toBeWithNewline(expected);
+		expect(secondResult).toBeWithNewline(expected);
+	});
+
+	it('should break long direct text children after inline attributes', async () => {
+		const input = `component App() {
+  <span
+      class={styles.notificationMessage}
+  >"The report is ready. Review the summary before sharing it with the team."</span>
+}`;
+
+		const expected = `component App() {
+  <span class={styles.notificationMessage}>
+    "The report is ready. Review the summary before sharing it with the team."
+  </span>
+}`;
+
+		const result = await format(input, { printWidth: 80 });
+		expect(result).toBeWithNewline(expected);
+	});
+
+	it('should wrap long direct text children when elements break', async () => {
+		const input = `component App() {
+  <span class={styles.notificationMessage}>"The report is ready. Review the summary before sharing it with the team."</span>
+}`;
+
+		const expectedPrintWidth70 = `component App() {
+  <span class={styles.notificationMessage}>
+    "The report is ready. Review the summary before sharing it with
+    the team."
+  </span>
+}`;
+		const expectedPrintWidth40 = `component App() {
+  <span
+    class={styles.notificationMessage}
+  >
+    "The report is ready. Review the
+    summary before sharing it with the
+    team."
+  </span>
+}`;
+
+		const resultPrintWidth70 = await format(input, { printWidth: 70 });
+		expect(resultPrintWidth70).toBeWithNewline(expectedPrintWidth70);
+
+		const resultPrintWidth40 = await format(input, { printWidth: 40 });
+		expect(resultPrintWidth40).toBeWithNewline(expectedPrintWidth40);
+	});
+
+	it('should keep direct text children on the text-specific conditional layout path', async () => {
+		const input = `component App() {
+  <div>"The report is ready. Review the summary before sharing it with the team."</div>
+}`;
+
+		const doc = await printToDoc(input, { printWidth: 70 });
+		const hasConditionalTextGroup = docContains(doc, (part) => {
+			return (
+				part.type === 'group' &&
+				Array.isArray(part.expandedStates) &&
+				docContains(part.contents, (childPart) => {
+					return (
+						childPart.type === 'fill' &&
+						Array.isArray(childPart.parts) &&
+						childPart.parts.some((part) => Array.isArray(part) && part.includes('"The')) &&
+						childPart.parts.some((part) => Array.isArray(part) && part.includes('team."'))
+					);
+				})
+			);
+		});
+
+		expect(hasConditionalTextGroup).toBe(true);
+	});
+
 	it('should not insert a new line between js and jsx if not provided', async () => {
 		const expected = `export component App() {
   let text = 'something';
@@ -3474,6 +3642,20 @@ const items = [] as unknown[];`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should break long nested TypeScript conditional type aliases', async () => {
+			const input = `type PageModelValue<Value> = Value extends ReadonlySignal<unknown> ? Value : Value extends (...args: any[]) => any ? Value : Value extends object ? { [Key in keyof Value]: PageModelValue<Value[Key]> } : never;`;
+			const expected = `type PageModelValue<Value> =
+  Value extends ReadonlySignal<unknown>
+    ? Value
+    : Value extends (...args: any[]) => any
+      ? Value
+      : Value extends object
+        ? { [Key in keyof Value]: PageModelValue<Value[Key]> }
+        : never;`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should format TypeScript mapped types (TSMappedType)', async () => {
 			const input = `type ReadonlyPartial<T> = { readonly [K in keyof T]?: T[K] }`;
 			const expected = `type ReadonlyPartial<T> = { readonly [K in keyof T]?: T[K] };`;