@tsrx/prettier-plugin 0.3.48 → 0.3.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.48",
+  "version": "0.3.51",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -20,17 +20,15 @@
     "directory": "packages/prettier-plugin"
   },
   "peerDependencies": {
-    "ripple": "*",
     "prettier": ">=2.0.0"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
-    "prettier": "^3.8.3",
-    "ripple": "0.3.48"
+    "prettier": "^3.8.3"
   },
   "dependencies": {
-    "@tsrx/core": "0.0.27",
-    "@tsrx/ripple": "0.0.29"
+    "@tsrx/core": "0.1.1",
+    "@tsrx/ripple": "0.1.1"
   },
   "files": [
     "src/"

package/src/index.js

@@ -1632,6 +1632,10 @@ function printRippleNode(node, path, options, print, args) {
 			nodeContent = ['{ref ', path.call(print, 'argument'), '}'];
 			break;
 
+		case 'RefExpression':
+			nodeContent = ['ref ', path.call(print, 'argument')];
+			break;
+
 		case 'SpreadAttribute': {
 			/** @type {Doc[]} */
 			const parts = ['{...', path.call(print, 'argument'), '}'];
@@ -2188,6 +2192,10 @@ function printRippleNode(node, path, options, print, args) {
 			nodeContent = printTsxCompat(node, path, options, print);
 			break;
 
+		case 'Tsrx':
+			nodeContent = printTsrx(node, path, options, print);
+			break;
+
 		case 'Tsx':
 			nodeContent = printTsx(node, path, options, print);
 			break;
@@ -5623,6 +5631,15 @@ function printTsx(node, path, options, print) {
 		return [tagName, closingTagName];
 	}
 
+	if (printedChildren.length > 1) {
+		return group([
+			tagName,
+			indent([hardline, join(hardline, printedChildren)]),
+			hardline,
+			closingTagName,
+		]);
+	}
+
 	// Use softline to allow single-line when content fits
 	return group([
 		tagName,
@@ -5632,6 +5649,51 @@ function printTsx(node, path, options, print) {
 	]);
 }
 
+/**
+ * Print a Tsrx node - renders native TSRX template children inside
+ * <tsrx>...</tsrx>.
+ * @param {AST.Tsrx} node - The Tsrx node
+ * @param {AstPath<AST.Tsrx>} path - The AST path
+ * @param {RippleFormatOptions} options - Prettier options
+ * @param {PrintFn} print - Print callback
+ * @returns {Doc}
+ */
+function printTsrx(node, path, options, print) {
+	const tagName = '<tsrx>';
+	const closingTagName = '</tsrx>';
+	const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+
+	if (!hasChildren) {
+		return [tagName, closingTagName];
+	}
+
+	const printedChildren = [];
+
+	for (let i = 0; i < node.children.length; i++) {
+		const child = node.children[i];
+
+		if (child.type === 'JSXText') {
+			const text = child.value.trim();
+			if (!text) continue;
+			printedChildren.push(text);
+		} else {
+			const printedChild = path.call(print, 'children', i);
+			printedChildren.push(printedChild);
+		}
+	}
+
+	if (printedChildren.length === 0) {
+		return [tagName, closingTagName];
+	}
+
+	return group([
+		tagName,
+		indent([hardline, join(hardline, printedChildren)]),
+		hardline,
+		closingTagName,
+	]);
+}
+
 /**
  * Print a TSX compatibility node
  * @param {AST.TsxCompat} node - The TSX compat node
@@ -5831,6 +5893,17 @@ function printJSXElement(node, path, options, print) {
 	if (childrenDocs.length === 1 && typeof childrenDocs[0] === 'string') {
 		return ['<', tagName, typeArgsDoc, attributesDoc, '>', childrenDocs[0], '</', tagName, '>'];
 	}
+	const meaningfulChildren = node.children.filter(
+		(child) => child.type !== 'JSXText' || child.value.trim(),
+	);
+	const singleMeaningfulChild = meaningfulChildren.length === 1 ? meaningfulChildren[0] : null;
+	if (
+		childrenDocs.length === 1 &&
+		singleMeaningfulChild?.type === 'JSXExpressionContainer' &&
+		singleMeaningfulChild.expression.type === 'Identifier'
+	) {
+		return ['<', tagName, typeArgsDoc, attributesDoc, '>', childrenDocs[0], '</', tagName, '>'];
+	}
 
 	// Multiple children or complex children - format with line breaks
 	const formattedChildren = [];

package/src/index.test.js

@@ -102,6 +102,61 @@ describe('prettier-plugin', () => {
 			expect(typeof result.cursorOffset).toBe('number');
 		});
 
+		it('should format tsrx expression fragments', async () => {
+			const input = `component App(){const content=<tsrx>const label="Hi";<div>"Hello" {label}</div></tsrx>;{content}}`;
+			const expected = `component App() {
+  const content = <tsrx>
+    const label = 'Hi';
+    <div>
+      "Hello"
+      {label}
+    </div>
+  </tsrx>;
+  {content}
+}`;
+			const result = await format(input, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should keep sibling children in tsrx expression fragments on separate lines', async () => {
+			const input = `function Test(p1,p2){return <tsrx><div>"Hello"</div><div>{p1}</div><div>{p2}</div></tsrx>}`;
+			const expected = `function Test(p1, p2) {
+  return <tsrx>
+    <div>"Hello"</div>
+    <div>{p1}</div>
+    <div>{p2}</div>
+  </tsrx>;
+}`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should format shorthand tsx fragments like JSX fragments', async () => {
+			const input = `function Test(p1,p2){return <><div>Hello</div><div>{p1}</div><div>{p2}</div></>}`;
+			const expected = `function Test(p1, p2) {
+  return <>
+    <div>Hello</div>
+    <div>{p1}</div>
+    <div>{p2}</div>
+  </>;
+}`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should format tsx expression fragments like shorthand fragments', async () => {
+			const input = `function Test(p1,p2){return <tsx><div>Hello</div><div>{p1}</div><div>{p2}</div></tsx>}`;
+			const expected = `function Test(p1, p2) {
+  return <tsx>
+    <div>Hello</div>
+    <div>{p1}</div>
+    <div>{p2}</div>
+  </tsx>;
+}`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should format whitespace correctly', async () => {
 			const input = `export component Test(){
         let count=0