@tsrx/prettier-plugin 0.3.62 → 0.3.64

package/package.json

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

package/src/index.js

@@ -14,7 +14,7 @@
  * @typedef {((path: AstPath) => Doc) & ((path: AstPath, args: PrintArgs) => Doc)} PrintFn
  */
 
-/** @typedef {Partial<Pick<ParserOptions, 'singleQuote' | 'jsxSingleQuote' | 'semi' | 'trailingComma' | 'useTabs' | 'tabWidth' | 'singleAttributePerLine' | 'bracketSameLine' | 'bracketSpacing' | 'arrowParens' | 'originalText'>> & { locStart: (node: AST.NodeWithLocation) => number, locEnd: (node: AST.NodeWithLocation) => number }} RippleFormatOptions */
+/** @typedef {Partial<Pick<ParserOptions, 'singleQuote' | 'jsxSingleQuote' | 'semi' | 'trailingComma' | 'useTabs' | 'tabWidth' | 'singleAttributePerLine' | 'bracketSameLine' | 'bracketSpacing' | 'arrowParens' | 'originalText' | 'printWidth'>> & { locStart: (node: AST.NodeWithLocation) => number, locEnd: (node: AST.NodeWithLocation) => number }} RippleFormatOptions */
 
 /** @typedef {{ isInAttribute?: boolean, isInArray?: boolean, allowInlineObject?: boolean, isConditionalTest?: boolean, isNestedConditional?: boolean, suppressLeadingComments?: boolean, suppressExpressionLeadingComments?: boolean, isInlineContext?: boolean, isStatement?: boolean, isLogicalAndOr?: boolean, allowShorthandProperty?: boolean, isFirstChild?: boolean, skipComponentLabel?: boolean, noBreakInside?: boolean, expandLastArg?: boolean }} PrintArgs */
 
@@ -360,6 +360,49 @@ function binaryExpressionNeedsParens(node, parent) {
 	return false;
 }
 
+/**
+ * Check if a parenthesized AssignmentExpression needs its parentheses preserved.
+ * @param {AST.AssignmentExpression} node - The expression node
+ * @param {AST.Node | null} parent - The parent node
+ * @returns {boolean} - True if parentheses are needed
+ */
+function assignmentExpressionNeedsParens(node, parent) {
+	if (!node.metadata?.parenthesized || !parent) {
+		return false;
+	}
+
+	if (parent.type === 'BinaryExpression' || parent.type === 'LogicalExpression') {
+		return true;
+	}
+
+	if (parent.type === 'ConditionalExpression') {
+		return parent.test === node;
+	}
+
+	if (parent.type === 'AwaitExpression' || parent.type === 'YieldExpression') {
+		return parent.argument === node;
+	}
+
+	if (parent.type === 'CallExpression' || parent.type === 'NewExpression') {
+		return parent.callee === node;
+	}
+
+	if (parent.type === 'TaggedTemplateExpression') {
+		return parent.tag === node;
+	}
+
+	if (
+		parent.type === 'TSAsExpression' ||
+		parent.type === 'TSSatisfiesExpression' ||
+		parent.type === 'TSNonNullExpression' ||
+		parent.type === 'TSInstantiationExpression'
+	) {
+		return parent.expression === node;
+	}
+
+	return false;
+}
+
 /**
  * Create a function that skips specified characters in text
  * @param {string | RegExp} characters - Characters to skip
@@ -718,11 +761,13 @@ function printRippleNode(node, path, options, print, args) {
 	const isInlineContext = args && args.isInlineContext;
 	const suppressLeadingComments = args && args.suppressLeadingComments;
 	const suppressExpressionLeadingComments = args && args.suppressExpressionLeadingComments;
+	const parentNode = /** @type {AST.Node | null} */ (path.getParentNode());
 
 	// For TSRXExpression, Text, and Html nodes, don't add leading comments here - they should be handled
-	// as separate children within the element, not as part of the expression
+	// as separate children within elements, not as part of the expression.
 	const shouldSkipLeadingComments =
-		node.type === 'TSRXExpression' || node.type === 'Text' || node.type === 'Html';
+		parentNode?.type === 'Element' &&
+		(node.type === 'TSRXExpression' || node.type === 'Text' || node.type === 'Html');
 
 	// Handle leading comments
 	if (node.leadingComments && !shouldSkipLeadingComments && !suppressLeadingComments) {
@@ -1335,6 +1380,10 @@ function printRippleNode(node, path, options, print, args) {
 				group(indent(line), { id: groupId }),
 				indentIfBreak(rightSide, { groupId }),
 			]);
+			const parent = path.getParentNode();
+			if (assignmentExpressionNeedsParens(node, parent)) {
+				nodeContent = ['(', nodeContent, ')'];
+			}
 			break;
 		}
 
@@ -1874,6 +1923,13 @@ function printRippleNode(node, path, options, print, args) {
 		case 'LogicalExpression': {
 			const logicalParent = path.getParentNode();
 			let logicalResult;
+			const rightIsNullLiteral = node.right.type === 'Literal' && node.right.value === null;
+			const shouldKeepNullishFallbackInline =
+				node.operator === '??' &&
+				rightIsNullLiteral &&
+				(node.left.type === 'CallExpression' ||
+					node.left.type === 'ChainExpression' ||
+					node.left.type === 'NewExpression');
 			// Don't add indent if we're in a conditional test context
 			if (args?.isConditionalTest) {
 				logicalResult = group([
@@ -1882,6 +1938,14 @@ function printRippleNode(node, path, options, print, args) {
 					node.operator,
 					[line, path.call((childPath) => print(childPath, { isConditionalTest: true }), 'right')],
 				]);
+			} else if (shouldKeepNullishFallbackInline) {
+				logicalResult = group([
+					path.call(print, 'left'),
+					' ',
+					node.operator,
+					' ',
+					path.call(print, 'right'),
+				]);
 			} else {
 				logicalResult = group([
 					path.call(print, 'left'),
@@ -2765,36 +2829,45 @@ function printArrowFunction(node, path, options, print, args) {
 		parts.push(': ', path.call(print, 'returnType'));
 	}
 
-	parts.push(' => ');
-
 	// For block statements, print the body directly to get proper formatting
 	if (node.body.type === 'BlockStatement') {
+		parts.push(' => ');
 		parts.push(path.call(print, 'body'));
 	} else {
 		// For expression bodies, check if we need to wrap in parens
 		// Wrap ObjectExpression, AssignmentExpression, and SequenceExpression in parens
 		// to avoid ambiguity with block statements or to clarify intent
 		const bodyDoc = path.call(print, 'body');
+		const groupId = Symbol('arrow');
+		const shouldBreakBody = shouldBreakArrowExpressionBody(node.body, options);
+		/** @type {Doc | Doc[]} */
+		let bodyContent;
 		if (
 			node.body.type === 'ObjectExpression' ||
 			node.body.type === 'AssignmentExpression' ||
 			node.body.type === 'SequenceExpression' ||
 			(args?.isInAttribute && isTemplateExpression(node.body))
 		) {
-			parts.push('(');
 			if (isTemplateExpression(node.body)) {
-				parts.push(indent([hardline, bodyDoc]));
-				parts.push(hardline);
+				bodyContent = ['(', indent([hardline, bodyDoc]), hardline, ')'];
 			} else {
-				parts.push(bodyDoc);
+				bodyContent = ['(', bodyDoc, ')'];
 			}
-			parts.push(')');
 		} else {
-			parts.push(bodyDoc);
+			bodyContent = bodyDoc;
+		}
+		if (shouldBreakBody) {
+			parts.push(' =>', indent([hardline, bodyContent]));
+		} else {
+			parts.push(
+				' =>',
+				group(indent(line), { id: groupId }),
+				indentIfBreak(bodyContent, { groupId }),
+			);
 		}
 	}
 
-	return parts;
+	return group(parts);
 }
 
 /**
@@ -3004,6 +3077,33 @@ function shouldHugArrowFunctions(args) {
 	return firstBlockIndex === 0;
 }
 
+/**
+ * Check whether a node's original source span exceeds the configured print width.
+ * @param {AST.NodeWithLocation} node - The node to check
+ * @param {RippleFormatOptions} options - Prettier options
+ * @returns {boolean}
+ */
+function sourceSpanExceedsPrintWidth(node, options) {
+	const printWidth = options.printWidth ?? 80;
+	if (!options.originalText || node.start === undefined || node.end === undefined) {
+		return false;
+	}
+	return options.originalText.slice(node.start, node.end).length > printWidth;
+}
+
+/**
+ * Check if an arrow expression body should break immediately after `=>`.
+ * @param {AST.Expression} node - The arrow body expression
+ * @param {RippleFormatOptions} options - Prettier options
+ * @returns {boolean}
+ */
+function shouldBreakArrowExpressionBody(node, options) {
+	return (
+		(node.type === 'BinaryExpression' || node.type === 'LogicalExpression') &&
+		sourceSpanExceedsPrintWidth(/** @type {AST.NodeWithLocation} */ (node), options)
+	);
+}
+
 /**
  * Print call expression arguments
  * @param {AstPath<AST.CallExpression>} path - The call path
@@ -5930,6 +6030,24 @@ function printJSXElement(node, path, options, print) {
 			// Accumulate text content, preserving spaces between words
 			const trimmed = child.value.trim();
 			if (trimmed) {
+				const nextChild = node.children[i + 1];
+				const afterNextChild = node.children[i + 2];
+				const nextText = afterNextChild?.type === 'JSXText' ? afterNextChild.value.trim() : '';
+				if (
+					tagName === 'tsrx' &&
+					trimmed.endsWith('=') &&
+					nextChild?.type === 'JSXElement' &&
+					nextText === ';'
+				) {
+					if (currentText) {
+						childrenDocs.push(currentText);
+						currentText = '';
+					}
+					childrenDocs.push([trimmed, ' ', path.call(print, 'children', i + 1), ';']);
+					i += 2;
+					continue;
+				}
+
 				if (currentText) {
 					currentText += ' ' + trimmed;
 				} else {

package/src/index.test.js

@@ -200,6 +200,49 @@ describe('prettier-plugin', () => {
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should preserve comments before expressions after nested tsx and tsrx blocks', async () => {
+			const input = `component App() {
+	const content = <tsx>
+		{<tsrx>
+			const nested =
+			<tsx>
+				<span class="nested-tsx">
+					{'inside nested tsx'}
+				</span>
+			</tsx>
+			;
+			<div class="native">{nested}</div>
+		</tsrx>}
+	</tsx>;
+
+	// const content = <tsrx>
+	// 	<div>{hey()}</div>
+	// </tsrx>;
+
+	{content}
+}`;
+			const expected = `component App() {
+  const content = <tsx>
+    {<tsrx>
+      const nested = <tsx>
+        <span class="nested-tsx">
+          {'inside nested tsx'}
+        </span>
+      </tsx>;
+      <div class="native">{nested}</div>
+    </tsrx>}
+  </tsx>;
+
+  // const content = <tsrx>
+  // 	<div>{hey()}</div>
+  // </tsrx>;
+
+  {content}
+}`;
+			const result = await format(input, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should break nested TSX element attributes inside expression props', async () => {
 			const cases = [
 				{
@@ -762,6 +805,28 @@ function test() {
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should preserve required parentheses around assignment expressions', async () => {
+			const input = `const openSignal = useRef<Signal<boolean> | null>(null)
+const open = props.open ?? (openSignal.current ??= signal(false))
+const sum = a + (b = c)
+const condition = (a = b) ? c : d
+const called = (factory = getFactory())()
+async function load() {
+  await (promise = getPromise())
+}`;
+			const expected = `const openSignal = useRef<Signal<boolean> | null>(null);
+const open = props.open ?? (openSignal.current ??= signal(false));
+const sum = a + (b = c);
+const condition = (a = b) ? c : d;
+const called = (factory = getFactory())();
+async function load() {
+  await (promise = getPromise());
+}`;
+
+			const result = await format(input, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should not change formatting for function object properties and properties in square brackets', async () => {
 			const expected = `export component App() {
   const SYMBOL_PROP = Symbol();
@@ -1315,6 +1380,19 @@ import { effect, track } from 'ripple';`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should break arrow before a long generic optional call with nullish fallback', async () => {
+			const input = `const test = () => menuRef.current?.querySelector<HTMLElement>(
+        "[role=\\"menuitem\\"]:not([aria-disabled=\\"true\\"])",
+      ) ??
+        null`;
+			const expected = `const test = () =>
+  menuRef.current?.querySelector<HTMLElement>(
+    '[role="menuitem"]:not([aria-disabled="true"])',
+  ) ?? null;`;
+			const result = await format(input, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('does not add spaces around inlined array elements in destructured arguments', async () => {
 			const expected = `for (const [key, value] of Object.entries(attributes).filter(([_key, value]) => value !== '')) {
 }