@ripple-ts/prettier-plugin 0.2.159 → 0.2.160

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/prettier-plugin",
-  "version": "0.2.159",
+  "version": "0.2.160",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "prettier": "^3.6.2",
-    "ripple": "0.2.159"
+    "ripple": "0.2.160"
   },
   "dependencies": {},
   "files": [

package/src/index.js

@@ -156,6 +156,79 @@ function iterateFunctionParametersPath(path, iteratee) {
 	}
 }
 
+// Operator precedence (higher number = higher precedence)
+const PRECEDENCE = {
+	'||': 1,
+	'&&': 2,
+	'|': 3,
+	'^': 4,
+	'&': 5,
+	'==': 6,
+	'!=': 6,
+	'===': 6,
+	'!==': 6,
+	'<': 7,
+	'<=': 7,
+	'>': 7,
+	'>=': 7,
+	in: 7,
+	instanceof: 7,
+	'<<': 8,
+	'>>': 8,
+	'>>>': 8,
+	'+': 9,
+	'-': 9,
+	'*': 10,
+	'/': 10,
+	'%': 10,
+	'**': 11,
+};
+
+function getPrecedence(operator) {
+	return PRECEDENCE[operator] || 0;
+}
+
+// Check if a BinaryExpression needs parentheses
+function binaryExpressionNeedsParens(node, parent) {
+	if (!node.metadata?.parenthesized) {
+		return false;
+	}
+
+	// If parent is not an operator context, don't preserve parens
+	if (
+		!parent ||
+		(parent.type !== 'BinaryExpression' &&
+			parent.type !== 'LogicalExpression' &&
+			parent.type !== 'UnaryExpression')
+	) {
+		return false;
+	}
+
+	// If parent is UnaryExpression, it already handles the parentheses
+	if (parent.type === 'UnaryExpression') {
+		return false;
+	}
+
+	// For BinaryExpression/LogicalExpression parents, check precedence
+	if (parent.type === 'BinaryExpression' || parent.type === 'LogicalExpression') {
+		const nodePrecedence = getPrecedence(node.operator);
+		const parentPrecedence = getPrecedence(parent.operator);
+
+		// Need parens if:
+		// 1. Child has lower precedence than parent
+		// 2. Same precedence but different operators (for clarity)
+		// 3. Child is on the right side and precedence is equal (for left-associative operators)
+		if (nodePrecedence < parentPrecedence) {
+			return true;
+		}
+		if (nodePrecedence === parentPrecedence && node.operator !== parent.operator) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
 function createSkip(characters) {
 	return (text, startIndex, options) => {
 		const backwards = Boolean(options && options.backwards);
@@ -1445,9 +1518,10 @@ function printRippleNode(node, path, options, print, args) {
 					parent.type === 'AssignmentExpression' ||
 					parent.type === 'AssignmentPattern');
 
+			let result;
 			// Don't add indent if we're in a conditional test context
 			if (args?.isConditionalTest) {
-				nodeContent = group(
+				result = group(
 					concat([
 						path.call((childPath) => print(childPath, { isConditionalTest: true }), 'left'),
 						' ',
@@ -1460,7 +1534,7 @@ function printRippleNode(node, path, options, print, args) {
 				);
 			} else if (shouldNotIndent) {
 				// In assignment context, don't add indent - parent will handle it
-				nodeContent = group(
+				result = group(
 					concat([
 						path.call(print, 'left'),
 						' ',
@@ -1469,7 +1543,7 @@ function printRippleNode(node, path, options, print, args) {
 					]),
 				);
 			} else {
-				nodeContent = group(
+				result = group(
 					concat([
 						path.call(print, 'left'),
 						' ',
@@ -1478,6 +1552,13 @@ function printRippleNode(node, path, options, print, args) {
 					]),
 				);
 			}
+
+			// Wrap in parentheses only if semantically necessary
+			if (binaryExpressionNeedsParens(node, parent)) {
+				result = concat(['(', result, ')']);
+			}
+
+			nodeContent = result;
 			break;
 		}
 		case 'LogicalExpression':
@@ -2239,8 +2320,13 @@ function printArrowFunction(node, path, options, print) {
 		parts.push(path.call(print, 'body'));
 	} else {
 		// For expression bodies, check if we need to wrap in parens
-		// Wrap ObjectExpression in parens to avoid ambiguity with block statements
-		if (node.body.type === 'ObjectExpression') {
+		// Wrap ObjectExpression, AssignmentExpression, and SequenceExpression in parens
+		// to avoid ambiguity with block statements or to clarify intent
+		if (
+			node.body.type === 'ObjectExpression' ||
+			node.body.type === 'AssignmentExpression' ||
+			node.body.type === 'SequenceExpression'
+		) {
 			parts.push('(');
 			parts.push(path.call(print, 'body'));
 			parts.push(')');
@@ -3064,7 +3150,13 @@ function printMemberExpression(node, path, options, print) {
 
 	let result;
 	if (node.computed) {
-		const openBracket = node.optional ? '?.[' : '[';
+		// Check if the MemberExpression itself is tracked to add @ symbol
+		const trackedPrefix = node.tracked ? '@' : '';
+		const openBracket = node.optional
+			? '?.' + trackedPrefix + '['
+			: trackedPrefix
+				? '.' + trackedPrefix + '['
+				: '[';
 		result = concat([objectPart, openBracket, propertyPart, ']']);
 	} else {
 		const separator = node.optional ? '?.' : '.';
@@ -3095,9 +3187,21 @@ function printUnaryExpression(node, path, options, print) {
 		if (needsSpace) {
 			parts.push(' ');
 		}
-		parts.push(path.call(print, 'argument'));
+		const argumentDoc = path.call(print, 'argument');
+		// Preserve parentheses around the argument when present
+		if (node.argument.metadata?.parenthesized) {
+			parts.push('(', argumentDoc, ')');
+		} else {
+			parts.push(argumentDoc);
+		}
 	} else {
-		parts.push(path.call(print, 'argument'));
+		const argumentDoc = path.call(print, 'argument');
+		// Preserve parentheses around the argument when present
+		if (node.argument.metadata?.parenthesized) {
+			parts.push('(', argumentDoc, ')');
+		} else {
+			parts.push(argumentDoc);
+		}
 		parts.push(node.operator);
 	}
 
@@ -4637,17 +4741,21 @@ function printJSXMemberExpression(node) {
 
 function printMemberExpressionSimple(node, options, computed = false) {
 	if (node.type === 'Identifier') {
-		return node.name;
+		// When computed is true, it means we're inside brackets and tracked is already handled by .@[ or [
+		// So we should NOT add @ prefix in that case
+		return (computed ? '' : node.tracked ? '@' : '') + node.name;
 	}
 
 	if (node.type === 'MemberExpression') {
 		const obj = printMemberExpressionSimple(node.object, options);
+		// For properties, we add the .@ or . prefix, and then pass true to indicate
+		// that we're in a context where tracked has been handled
 		const prop = node.computed
 			? (node.property.tracked ? '.@[' : '[') +
-				printMemberExpressionSimple(node.property, options, node.computed) +
+				printMemberExpressionSimple(node.property, options, true) +
 				']'
 			: (node.property.tracked ? '.@' : '.') +
-				printMemberExpressionSimple(node.property, options, node.computed);
+				printMemberExpressionSimple(node.property, options, true);
 		return obj + prop;
 	}
 
@@ -4658,7 +4766,7 @@ function printMemberExpressionSimple(node, options, computed = false) {
 }
 
 function printElement(node, path, options, print) {
-	const tagName = (node.id.tracked ? '@' : '') + printMemberExpressionSimple(node.id, options);
+	const tagName = printMemberExpressionSimple(node.id, options);
 
 	const elementLeadingComments = getElementLeadingComments(node);
 	const metadataCommentParts =

package/src/index.test.js

@@ -902,6 +902,44 @@ export component Test({ a, b }: Props) {}`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should not strip @ from dynamic self-closing components', async () => {
+			const expected = `component App() {
+  <@tracked_object.@tracked_basic />
+}`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should keep @ on dynamic object member array expressions', async () => {
+			const expected = `component App() {
+  const obj = {
+    [0]: track(0),
+  };
+
+  <div>{obj.@[0]}</div>
+
+  <button
+    onClick={() => {
+      obj.@[0]++;
+    }}
+  >
+    {'Increment'}
+  </button>
+
+  <button
+    onClick={() => {
+      obj.@[0] += 1;
+    }}
+  >
+    {'Increment'}
+  </button>
+}`;
+
+			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
 
@@ -1105,6 +1143,30 @@ const set = new #Set([1, 2, 3]);`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should keep TrackedSet parents with short syntax and no args intact', async () => {
+			const expected = `component SetTest() {
+  let items = new #Set();
+
+  <button onClick={() => items.add(1)}>{'add'}</button>
+  <pre>{items.size}</pre>
+}`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should keep TrackedMap parents with short syntax and no args intact', async () => {
+			const expected = `component MapTest() {
+  let items = new #Map();
+
+  <button onClick={() => items.set('key', 1)}>{'add'}</button>
+  <pre>{items.size}</pre>
+}`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should not remove blank lines between components and types if provided', async () => {
 			const expected = `export component App() {
   console.log('test');
@@ -1496,6 +1558,59 @@ const program =
 			const result = await format(input, { singleQuote: true, printWidth: 30 });
 			expect(result).toBeWithNewline(expected);
 		});
+
+		it('should keep blank lines between commented out block and markup', async () => {
+			const expected = `function CounterWrapper(props) {
+  const more = {
+    double: track(() => props.count * 2),
+    another: track(0),
+    onemore: 100,
+  };
+
+  // if (props.@count > 1) {
+  // 	delete more.another;
+  // }
+
+  <div>
+    <Counter {...props} {...more} />
+  </div>
+}`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should keep parens around negating key in object expression', async () => {
+			const input = `effect(() => {
+  props.count;
+  if (props.count > 1 && 'another' in more) {
+  	untrack(() => delete more.another);
+  } else if (props.count > 2 && !('another' in more)) {
+  	untrack(() => more.another = 0);
+  }
+  untrack(() => console.log(more));
+});`;
+
+			const expected = `effect(() => {
+  props.count;
+  if (props.count > 1 && 'another' in more) {
+    untrack(() => delete more.another);
+  } else if (props.count > 2 && !('another' in more)) {
+    untrack(() => (more.another = 0));
+  }
+  untrack(() => console.log(more));
+});`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should keep parents in math subtraction and multiplication', async () => {
+			const expected = `let offset = track(() => (@page - 1) * @limit);`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
 	});
 
 	describe('edge cases', () => {