@tsrx/prettier-plugin 0.3.77 → 0.3.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.77",
+  "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.25"
+    "@tsrx/core": "0.1.26"
   },
   "files": [
     "src/"

package/src/index.js

@@ -5870,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;

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];