@tsrx/prettier-plugin 0.3.59 → 0.3.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.59",
+  "version": "0.3.61",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -27,7 +27,7 @@
     "prettier": "^3.8.3"
   },
   "dependencies": {
-    "@tsrx/core": "0.1.9"
+    "@tsrx/core": "0.1.11"
   },
   "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;
 			}
 
@@ -5501,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
@@ -6270,6 +6291,8 @@ function printElement(element, path, options, print) {
 			}, 'attributes')
 		: [];
 	const shouldForceBreak = hasOpeningTagComments || hasBreakingAttribute;
+	const openingTagAlwaysBreaks =
+		(hasAttributes && options.singleAttributePerLine) || shouldForceBreak;
 	const openingTag = group([
 		'<',
 		tagName,
@@ -6551,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';