@tsrx/prettier-plugin 0.3.74 → 0.3.77

package/package.json

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

package/src/index.js

@@ -42,16 +42,16 @@ const { replaceEndOfLine, willBreak } = utils;
 /** @type {import('prettier').Plugin['languages']} */
 export const languages = [
 	{
-		name: 'ripple',
-		parsers: ['ripple'],
+		name: 'tsrx',
+		parsers: ['tsrx'],
 		extensions: ['.tsrx'],
-		vscodeLanguageIds: ['ripple'],
+		vscodeLanguageIds: ['tsrx', 'ripple'],
 	},
 ];
 
 /** @type {import('prettier').Plugin['parsers']} */
 export const parsers = {
-	ripple: {
+	tsrx: {
 		astFormat: 'ripple-ast',
 		/**
 		 * @param {string} text
@@ -1732,18 +1732,12 @@ function printRippleNode(node, path, options, print, args) {
 		}
 		case 'Identifier': {
 			// Simple case - just return the name directly like Prettier core
-			const trackedPrefix = node.tracked ? '@' : '';
 			let identifierContent;
 			if (node.typeAnnotation) {
 				const optionalMarker = node.optional ? '?' : '';
-				identifierContent = [
-					trackedPrefix + node.name,
-					optionalMarker,
-					': ',
-					path.call(print, 'typeAnnotation'),
-				];
+				identifierContent = [node.name, optionalMarker, ': ', path.call(print, 'typeAnnotation')];
 			} else {
-				identifierContent = trackedPrefix + node.name;
+				identifierContent = node.name;
 			}
 			// Preserve parentheses for type-cast identifiers, but only if:
 			// 1. The identifier itself is marked as parenthesized
@@ -1857,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, '}'];
@@ -4010,7 +4010,6 @@ function printMemberExpression(node, path, options, print) {
 
 	let result;
 	if (node.computed) {
-		// Check if the MemberExpression itself is tracked to add @ symbol
 		const openBracket = node.optional ? '?.[' : '[';
 		result = [objectPart, openBracket, propertyPart, ']'];
 	} else {
@@ -6086,11 +6085,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>`.
@@ -6464,7 +6471,7 @@ function printJSXAttribute(attr, path, options, print) {
  */
 function printJSXElementName(node) {
 	if (node.type === 'JSXIdentifier') {
-		return (isDynamicJSXIdentifier(node) ? '@' : '') + node.name;
+		return node.name;
 	}
 	if (node.type === 'JSXMemberExpression') {
 		return printJSXElementName(node.object) + '.' + printJSXElementName(node.property);
@@ -6477,14 +6484,6 @@ function printJSXElementName(node) {
 	return 'Unknown';
 }
 
-/**
- * @param {ESTreeJSX.JSXIdentifier} node
- * @returns {boolean}
- */
-function isDynamicJSXIdentifier(node) {
-	return /** @type {{ dynamic?: boolean }} */ (node).dynamic === true;
-}
-
 /**
  * Print a member expression as simple string (for element tag names)
  * @param {AST.Node} node - The node to print
@@ -6494,7 +6493,7 @@ function isDynamicJSXIdentifier(node) {
  */
 function printMemberExpressionSimple(node, options, computed = false) {
 	if (node.type === 'JSXIdentifier') {
-		return (isDynamicJSXIdentifier(node) ? '@' : '') + node.name;
+		return node.name;
 	}
 
 	if (node.type === 'JSXMemberExpression') {
@@ -6510,7 +6509,7 @@ function printMemberExpressionSimple(node, options, computed = false) {
 	}
 
 	if (node.type === 'Identifier') {
-		return (computed ? '' : node.tracked ? '@' : '') + node.name;
+		return node.name;
 	}
 
 	if (node.type === 'MemberExpression') {

package/src/index.test.js

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import prettier from 'prettier';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
-import { languages } from './index.js';
+import { languages, parsers } from './index.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -40,13 +40,16 @@ expect.extend({
 
 describe('prettier-plugin', () => {
 	it('registers .tsrx as a supported file extension', () => {
-		const ripple_language = languages?.[0];
+		const tsrx_language = languages?.[0];
 
-		if (!ripple_language) {
-			throw new Error('Missing Ripple language metadata');
+		if (!tsrx_language) {
+			throw new Error('Missing TSRX language metadata');
 		}
 
-		expect(ripple_language.extensions).toContain('.tsrx');
+		expect(tsrx_language.extensions).toContain('.tsrx');
+		expect(tsrx_language.parsers).toContain('tsrx');
+		expect(parsers?.tsrx).toBeDefined();
+		expect(parsers?.ripple).toBeUndefined();
 	});
 
 	/**
@@ -55,7 +58,7 @@ describe('prettier-plugin', () => {
 	 */
 	const format = async (code, options = {}) => {
 		return await prettier.format(code, {
-			parser: 'ripple',
+			parser: 'tsrx',
 			plugins: [join(__dirname, 'index.js')],
 			...options,
 		});
@@ -233,10 +236,10 @@ const items=[1,2,3];
 	});
 
 	it('keeps native fragments expression based', async () => {
-		const input = `function App(){return <><div>"Hello world"</div>{value}</>}`;
+		const input = `function App(){return <><div>Hello world</div>{value}</>}`;
 		const expected = `function App() {
   return <>
-    <div>"Hello world"</div>
+    <div>Hello world</div>
     {value}
   </>;
 }`;
@@ -277,17 +280,17 @@ const items=[1,2,3];
 		const input = `export function App() {
   let [count] = track(0);
   return <div>
-    <p>"Count: "{count}</p>
-    <p>"Count: "{count}</p>
-    <button onClick={() => count++}>"Increment"</button>
+    <p>Count: {count}</p>
+    <p>Count: {count}</p>
+    <button onClick={() => count++}>Increment</button>
   </div>;
 }`;
 		const expected = `export function App() {
   let [count] = track(0);
   return <div>
-    <p>"Count: "{count}</p>
-    <p>"Count: "{count}</p>
-    <button onClick={() => count++}>"Increment"</button>
+    <p>Count: {count}</p>
+    <p>Count: {count}</p>
+    <button onClick={() => count++}>Increment</button>
   </div>;
 }`;
 
@@ -295,6 +298,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() {
@@ -400,28 +436,6 @@ function App() {
 		expect(result).toBeWithNewline(expected);
 	});
 
-	it('preserves dynamic component syntax', async () => {
-		const input = `function App(){return <>@{
-function Basic(){return <><div>{"Basic Component"}</div></>;}
-const obj={Basic};
-const comp=obj.Basic;
-<@comp />
-}</>}`;
-		const expected = `function App() {
-  return <>@{
-    function Basic() {
-      return <><div>{"Basic Component"}</div></>;
-    }
-    const obj = { Basic };
-    const comp = obj.Basic;
-    <@comp />
-  }</>;
-}`;
-
-		const result = await format(input);
-		expect(result).toBeWithNewline(expected);
-	});
-
 	it('formats raw HTML props inside native elements', async () => {
 		const input = `function App(){return <article innerHTML={source}/>}`;
 		const expected = `function App() {
@@ -608,10 +622,10 @@ const items=[1,2,3];
 	});
 
 	it('should keep sibling children in tsrx expression fragments on separate lines', async () => {
-		const input = `function Test(p1,p2){return <><div>"Hello"</div><div>{p1}</div><div>{p2}</div></>}`;
+		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>Hello</div>
     <div>{p1}</div>
     <div>{p2}</div>
   </>;
@@ -706,9 +720,9 @@ const items=[1,2,3];
 	});
 
 	it('keeps fitting single-child fragments inline and expands non-fitting single-child fragments', async () => {
-		const input = `function Test(){const short=<><span>"Ready"</span></>;const long=<><ReallyLongComponentName first={alpha} second={beta} third={gamma}/></>;}`;
+		const input = `function Test(){const short=<><span>Ready</span></>;const long=<><ReallyLongComponentName first={alpha} second={beta} third={gamma}/></>;}`;
 		const expected = `function Test() {
-  const short = <><span>"Ready"</span></>;
+  const short = <><span>Ready</span></>;
   const long = <>
     <ReallyLongComponentName
       first={alpha}
@@ -723,16 +737,16 @@ const items=[1,2,3];
 	});
 
 	it('expands multi-child fragments while keeping fitting openers on the first line', async () => {
-		const input = `function Test(){const short=<><div>"A"</div><div>"B"</div></>;const thisNameIsRidiculouslyLongEnoughToMissThePrintWidth=<><div>"A"</div><div>"B"</div></>;}`;
+		const input = `function Test(){const short=<><div>A</div><div>B</div></>;const thisNameIsRidiculouslyLongEnoughToMissThePrintWidth=<><div>A</div><div>B</div></>;}`;
 		const expected = `function Test() {
   const short = <>
-    <div>"A"</div>
-    <div>"B"</div>
+    <div>A</div>
+    <div>B</div>
   </>;
   const thisNameIsRidiculouslyLongEnoughToMissThePrintWidth =
     <>
-      <div>"A"</div>
-      <div>"B"</div>
+      <div>A</div>
+      <div>B</div>
     </>;
 }`;
 
@@ -816,7 +830,7 @@ const items=[1,2,3];
 		 */
 		const format = async (code, options = {}) => {
 			return await prettier.format(code, {
-				parser: 'ripple',
+				parser: 'tsrx',
 				plugins: [join(__dirname, 'index.js')],
 				...options,
 			});
@@ -829,7 +843,7 @@ const items=[1,2,3];
 		 */
 		const formatWithCursorHelper = async (code, options) =>
 			await prettier.formatWithCursor(code, {
-				parser: 'ripple',
+				parser: 'tsrx',
 				plugins: [join(__dirname, 'index.js')],
 				...options,
 			});
@@ -882,13 +896,14 @@ const items=[1,2,3];
 		});
 
 		it('registers .tsrx as a supported file extension', () => {
-			const ripple_language = languages?.[0];
+			const tsrx_language = languages?.[0];
 
-			if (!ripple_language) {
-				throw new Error('Missing Ripple language metadata');
+			if (!tsrx_language) {
+				throw new Error('Missing TSRX language metadata');
 			}
 
-			expect(ripple_language.extensions).toContain('.tsrx');
+			expect(tsrx_language.extensions).toContain('.tsrx');
+			expect(tsrx_language.parsers).toContain('tsrx');
 		});
 
 		it('should format a simple component', async () => {
@@ -966,23 +981,12 @@ const items=[1,2,3];
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should format a function with a dynamic function using props member access', async () => {
-			const expected = `function Card(props) {
-  <div class="card">
-    <@props.children />
-  </div>
-}`;
-
-			const result = await format(expected, { singleQuote: true });
-			expect(result).toBeWithNewline(expected);
-		});
-
 		it('should respect print width when using ternary expressions', async () => {
 			const input = `function printMemberExpressionSimple(node, options, computed = false) {
   if (node.type === 'MemberExpression') {
     const prop = node.computed
-      ? (node.property.tracked ? '.@[' : '[') + printMemberExpressionSimple(node.property, options, node.computed) + ']'
-      : (node.property.tracked ? '.@' : '.') + printMemberExpressionSimple(node.property, options, node.computed);
+      ? (node.optional ? '?.[' : '[') + printMemberExpressionSimple(node.property, options, node.computed) + ']'
+      : (node.optional ? '?.' : '.') + printMemberExpressionSimple(node.property, options, node.computed);
   }
 }`;
 
@@ -993,14 +997,14 @@ const items=[1,2,3];
 ) {
   if (node.type === 'MemberExpression') {
     const prop = node.computed
-      ? (node.property.tracked ? '.@[' : '[') +
+      ? (node.optional ? '?.[' : '[') +
         printMemberExpressionSimple(
           node.property,
           options,
           node.computed,
         ) +
         ']'
-      : (node.property.tracked ? '.@' : '.') +
+      : (node.optional ? '?.' : '.') +
         printMemberExpressionSimple(
           node.property,
           options,
@@ -1398,11 +1402,11 @@ export function Test({ a, b }: Props) {}`;
 
 		it('should not force attribute-less elements to break with singleAttributePerLine', async () => {
 			const input = `function One() @{
-  <div>"Hello"</div>
+  <div>Hello</div>
 }`;
 
 			const expected = `function One() @{
-  <div>"Hello"</div>
+  <div>Hello</div>
 }`;
 
 			const result = await format(input, {
@@ -1462,18 +1466,6 @@ export function Test({ a, b }: Props) {}`;
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should not strip @ from dynamic @tag', async () => {
-			const expected = `export function Four() {
-  let tag = track('div');
-
-  <@tag {href} {...props}>
-    <@children />
-  </@tag>
-}`;
-			const result = await format(expected, { singleQuote: true, printWidth: 100 });
-			expect(result).toBeWithNewline(expected);
-		});
-
 		it('should not include a comma after the last rest parameter', async () => {
 			const expected = `function Foo({
   lorem,
@@ -1490,15 +1482,6 @@ export function Test({ a, b }: Props) {}`;
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should not strip @ from dynamic self-closing components', async () => {
-			const expected = `function App() {
-  <@ripple_object.tracked_basic />
-}`;
-
-			const result = await format(expected, { singleQuote: true, printWidth: 100 });
-			expect(result).toBeWithNewline(expected);
-		});
-
 		it('keeps a new line between comments above and code if one is present', async () => {
 			const expected = `// comment
 
@@ -2545,6 +2528,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);
@@ -5604,7 +5632,7 @@ render(App);`;
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should preserve the order of try / pending / catch block', async () => {
+		it('should preserve the order of try / pending / catch blocks', async () => {
 			const expected = `function Test() {
   let items: RippleArray<string> | null = null;
   let error: string | null = null;
@@ -5622,8 +5650,6 @@ render(App);`;
     <div>{'Loading...'}</div>
   } @catch (e) {
     error = (e as Error).message;
-  } finally {
-    <div>finally block</div>
   };
 }`;
 
@@ -5738,7 +5764,8 @@ render(App);`;
     // <div>
     @try {
       <div>b is true</div>
-    } @catch (e) {}
+    } @catch (e) {
+    }
     // 	<div>
     // 		<div>
     // 			@if (b) {
@@ -5756,7 +5783,8 @@ render(App);`;
     // <div>
     @try {
       <div>b is true</div>
-    } @catch (e) {}
+    } @catch (e) {
+    }
     // 	<div>
     // 		<div>
     // 			@if (b) {