@tsrx/prettier-plugin 0.3.76 → 0.3.78

package/package.json

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

package/src/index.js

@@ -1851,7 +1851,13 @@ function printRippleNode(node, path, options, print, args) {
 						blockParent.type === 'ForOfStatement' ||
 						blockParent.type === 'WhileStatement' ||
 						blockParent.type === 'DoWhileStatement' ||
-						blockParent.type === 'SwitchCase');
+						blockParent.type === 'TryStatement' ||
+						blockParent.type === 'CatchClause' ||
+						blockParent.type === 'SwitchCase' ||
+						blockParent.type === 'JSXIfExpression' ||
+						blockParent.type === 'JSXForExpression' ||
+						blockParent.type === 'JSXTryExpression' ||
+						blockParent.type === 'JSXSwitchExpression');
 
 				if (isControlFlow) {
 					nodeContent = ['{', hardline, '}'];
@@ -5864,7 +5870,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 =
+		/** @type {any} */ (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;
@@ -6079,11 +6090,19 @@ function printJSXElement(node, path, options, print) {
 		return Array.isArray(leadingComments) && leadingComments.length > 0;
 	});
 	const forceMultiline = hasClosingComments || hasChildLeadingComments;
+	const singleChildNode = childNodes.length === 1 ? childNodes[0] : null;
+	const hasAuthoredMultilineSingleTextChild =
+		singleChildNode?.type === 'JSXText' && /[\r\n]/u.test(singleChildNode.value);
 
 	// Check if content can be inlined (single text node or single expression).
 	// Trailing or child-leading comments force the multi-line layout. A single
 	// text child stays inline when it fits and otherwise fills/wraps to printWidth.
-	if (!forceMultiline && childrenDocs.length === 1 && typeof childrenDocs[0] === 'string') {
+	if (
+		!forceMultiline &&
+		!hasAuthoredMultilineSingleTextChild &&
+		childrenDocs.length === 1 &&
+		typeof childrenDocs[0] === 'string'
+	) {
 		// The open tag breaks for attributes independently; the text+closing get
 		// their own group so the text only drops to its own (filled) lines when it
 		// itself overflows — otherwise it hugs `>text</tag>`.

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];
@@ -298,6 +326,39 @@ const items=[1,2,3];
 		expect(result).toBeWithNewline(expected);
 	});
 
+	it('preserves authored multiline whitespace around a single JSXText child', async () => {
+		const input = `function Foo() @{
+  @if (props.onRemove) {
+    <button
+      class={\`\${styles.actionButton} \${styles.actionButtonDanger}\`}
+      type="button"
+      onClick={() => {
+        void props.onRemove?.();
+      }}
+    >
+      Remove shortcut
+    </button>
+  }
+}`;
+
+		const expected = `function Foo() @{
+  @if (props.onRemove) {
+    <button
+      class={\`\${styles.actionButton} \${styles.actionButtonDanger}\`}
+      type="button"
+      onClick={() => {
+        void props.onRemove?.();
+      }}
+    >
+      Remove shortcut
+    </button>
+  }
+}`;
+
+		const result = await format(input);
+		expect(result).toBeWithNewline(expected);
+	});
+
 	it('preserves inline text spaces around expression children', async () => {
 		const input = `function Test(){return <div><p class="status">Visible: {String(visible)}</p><p>{name} is visible</p><p>Hello {name}!</p></div>}`;
 		const expected = `function Test() {
@@ -2495,6 +2556,51 @@ files = [...(files ?? []), ...dt.files];`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('expands empty braces for template control-flow blocks', async () => {
+			const input = `const App=()=> <>@if (ready) {} @else {}@for (const item of items) {} @empty {}</>;`;
+			const expected = `const App = () => <>
+  @if (ready) {
+  } @else {
+  }
+  @for (const item of items) {
+  } @empty {
+  }
+</>;`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('expands empty braces for try family blocks', async () => {
+			const input = `function Foo() @{ @try {} @pending {} @catch {} }
+function Bar() @{ @try {} @catch {} }
+function Baz() { try {} catch {} finally {} }
+function Qux() { try {} catch {} }`;
+			const expected = `function Foo() @{
+  @try {
+  } @pending {
+  } @catch {
+  }
+}
+function Bar() @{
+  @try {
+  } @catch {
+  }
+}
+function Baz() {
+  try {
+  } catch {
+  } finally {
+  }
+}
+function Qux() {
+  try {
+  } catch {
+  }
+}`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('prints function with a rest parameter correctly', async () => {
 			const expected = `function TestRest(...args: string[]) {
   console.log(args);
@@ -5686,7 +5792,8 @@ render(App);`;
     // <div>
     @try {
       <div>b is true</div>
-    } @catch (e) {}
+    } @catch (e) {
+    }
     // 	<div>
     // 		<div>
     // 			@if (b) {
@@ -5704,7 +5811,8 @@ render(App);`;
     // <div>
     @try {
       <div>b is true</div>
-    } @catch (e) {}
+    } @catch (e) {
+    }
     // 	<div>
     // 		<div>
     // 			@if (b) {