@tsrx/prettier-plugin 0.3.74 → 0.3.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.74",
+  "version": "0.3.76",
   "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.24"
   },
   "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
@@ -4010,7 +4004,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 {
@@ -6464,7 +6457,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 +6470,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 +6479,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 +6495,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>;
 }`;
 
@@ -400,28 +403,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 +589,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 +687,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 +704,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 +797,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 +810,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 +863,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 +948,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 +964,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 +1369,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 +1433,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 +1449,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
 
@@ -5604,7 +5554,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 +5572,6 @@ render(App);`;
     <div>{'Loading...'}</div>
   } @catch (e) {
     error = (e as Error).message;
-  } finally {
-    <div>finally block</div>
   };
 }`;