@tsrx/prettier-plugin 0.3.41 → 0.3.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.41",
+  "version": "0.3.43",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -26,11 +26,11 @@
   "devDependencies": {
     "@types/node": "^24.3.0",
     "prettier": "^3.8.3",
-    "ripple": "0.3.41"
+    "ripple": "0.3.43"
   },
   "dependencies": {
-    "@tsrx/core": "0.0.21",
-    "@tsrx/ripple": "0.0.23"
+    "@tsrx/core": "0.0.23",
+    "@tsrx/ripple": "0.0.25"
   },
   "files": [
     "src/"

package/src/index.js

@@ -1427,8 +1427,8 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 		}
 
-		case 'StyleIdentifier': {
-			nodeContent = '#style';
+		case 'Style': {
+			nodeContent = ['style ', path.call(print, 'value')];
 			break;
 		}
 
@@ -1444,11 +1444,6 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 		}
 
-		case 'ServerIdentifier': {
-			nodeContent = '#server';
-			break;
-		}
-
 		case 'UnaryExpression':
 			nodeContent = printUnaryExpression(node, path, options, print);
 			break;
@@ -1695,15 +1690,17 @@ function printRippleNode(node, path, options, print, args) {
 			nodeContent = printFunctionExpression(node, path, options, print);
 			break;
 
+		case 'TSModuleBlock':
 		case 'BlockStatement': {
 			// Apply the same block formatting pattern as component bodies
 			if (!node.body || node.body.length === 0) {
 				// Handle innerComments for empty blocks
 				if (innerCommentParts.length > 0) {
+					const blockNode = /** @type {AST.BlockStatement} */ (node);
 					// Check if we need to preserve blank lines between comments
-					if (node.innerComments && node.innerComments.length > 0) {
+					if (blockNode.innerComments && blockNode.innerComments.length > 0) {
 						const commentDocs = [];
-						const comments = node.innerComments;
+						const comments = blockNode.innerComments;
 
 						for (let i = 0; i < comments.length; i++) {
 							const comment = comments[i];
@@ -1804,9 +1801,14 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 		}
 
-		case 'ServerBlock': {
-			const blockContent = path.call(print, 'body');
-			nodeContent = ['#server ', blockContent];
+		case 'TSModuleDeclaration': {
+			nodeContent = [
+				node.metadata?.module_keyword ?? 'module',
+				' ',
+				path.call(print, 'id'),
+				' ',
+				path.call(print, 'body'),
+			];
 			break;
 		}
 
@@ -2387,11 +2389,13 @@ function printImportDeclaration(node, path, options, _print) {
 		parts.push(' from');
 	}
 
-	parts.push(
-		' ',
-		formatStringLiteral(/** @type {string} */ (node.source.value), options),
-		semi(options),
-	);
+	const source = /** @type {AST.Literal | AST.Identifier} */ (/** @type {unknown} */ (node.source));
+	const sourceDoc =
+		source.type === 'Identifier'
+			? source.name
+			: formatStringLiteral(/** @type {string} */ (source.value), options);
+
+	parts.push(' ', sourceDoc, semi(options));
 
 	return parts;
 }
@@ -2430,8 +2434,15 @@ function printExportNamedDeclaration(node, path, options, print) {
 		parts.push(' }');
 
 		if (node.source) {
+			const source = /** @type {AST.Literal | AST.Identifier} */ (
+				/** @type {unknown} */ (node.source)
+			);
 			parts.push(' from ');
-			parts.push(formatStringLiteral(/** @type {string} */ (node.source.value), options));
+			parts.push(
+				source.type === 'Identifier'
+					? source.name
+					: formatStringLiteral(/** @type {string} */ (source.value), options),
+			);
 		}
 		parts.push(semi(options));
 
@@ -5748,6 +5759,12 @@ function printJSXElement(node, path, options, print) {
 	const hasAttributes = openingElement.attributes && openingElement.attributes.length > 0;
 	const hasChildren = node.children && node.children.length > 0;
 
+	/** @type {Doc} */
+	let typeArgsDoc = '';
+	if (openingElement.typeArguments) {
+		typeArgsDoc = path.call(print, 'openingElement', 'typeArguments');
+	}
+
 	// Format attributes
 	/** @type {Doc} */
 	let attributesDoc = '';
@@ -5778,11 +5795,11 @@ function printJSXElement(node, path, options, print) {
 	}
 
 	if (isSelfClosing) {
-		return ['<', tagName, attributesDoc, ' />'];
+		return ['<', tagName, typeArgsDoc, attributesDoc, ' />'];
 	}
 
 	if (!hasChildren) {
-		return ['<', tagName, attributesDoc, '></', tagName, '>'];
+		return ['<', tagName, typeArgsDoc, attributesDoc, '></', tagName, '>'];
 	}
 
 	// Format children - filter out empty text nodes and merge adjacent text nodes
@@ -5826,7 +5843,7 @@ function printJSXElement(node, path, options, print) {
 
 	// Check if content can be inlined (single text node or single expression)
 	if (childrenDocs.length === 1 && typeof childrenDocs[0] === 'string') {
-		return ['<', tagName, attributesDoc, '>', childrenDocs[0], '</', tagName, '>'];
+		return ['<', tagName, typeArgsDoc, attributesDoc, '>', childrenDocs[0], '</', tagName, '>'];
 	}
 
 	// Multiple children or complex children - format with line breaks
@@ -5842,6 +5859,7 @@ function printJSXElement(node, path, options, print) {
 	return group([
 		'<',
 		tagName,
+		typeArgsDoc,
 		attributesDoc,
 		'>',
 		indent([hardline, ...formattedChildren]),
@@ -6019,6 +6037,12 @@ function is_attribute_value_breakable(value, is_nested_in_object = false) {
 function printElement(element, path, options, print) {
 	const node = /** @type {AST.Element & AST.NodeWithLocation} */ (element);
 	const tagName = printMemberExpressionSimple(node.id, options);
+	const openingElement = /** @type {any} */ (node.openingElement);
+	/** @type {Doc} */
+	let typeArgsDoc = '';
+	if (openingElement?.typeArguments) {
+		typeArgsDoc = path.call(print, 'openingElement', 'typeArguments');
+	}
 	const elementLeadingComments = getElementLeadingComments(node);
 
 	// `metadata.elementLeadingComments` may include comments that actually appear *inside* the element
@@ -6095,7 +6119,7 @@ function printElement(element, path, options, print) {
 	}
 
 	if (isSelfClosing && !hasInnerComments && !hasAttributes) {
-		const elementDoc = group(['<', tagName, ' />']);
+		const elementDoc = group(['<', tagName, typeArgsDoc, ' />']);
 		return metadataCommentParts.length > 0 ? [...metadataCommentParts, elementDoc] : elementDoc;
 	}
 
@@ -6146,6 +6170,7 @@ function printElement(element, path, options, print) {
 	const openingTag = group([
 		'<',
 		tagName,
+		typeArgsDoc,
 		hasAttributes
 			? indent([
 					...attrDocs,

package/src/index.test.js

@@ -3477,6 +3477,46 @@ declare function processData<T>(data: T): Promise<T>;`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should preserve generic type arguments on JSX component tags', async () => {
+			const input = `type User = { name: string };
+component RenderProp<Item>(props: { children: (item: Item) => any }) {}
+export component App() {
+	<RenderProp<User>>
+		{(item) => item.name}
+	</RenderProp>
+}`;
+
+			const expected = `type User = { name: string };
+component RenderProp<Item>(props: { children: (item: Item) => any }) {}
+export component App() {
+  <RenderProp<User>>
+    {(item) => item.name}
+  </RenderProp>
+}`;
+
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should preserve generic type arguments on self-closing JSX component tags', async () => {
+			const input = `component Box<T>({ value }: { value: T }) {
+	<div>{String(value)}</div>
+}
+export component App() {
+	<Box<string> value="hi" />
+}`;
+
+			const expected = `component Box<T>({ value }: { value: T }) {
+  <div>{String(value)}</div>
+}
+export component App() {
+  <Box<string> value="hi" />
+}`;
+
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should preserve multiple generics on method shorthand', async () => {
 			const input = `const obj = {
   method<V, T, U>(): { build: () => V; data: T; key: U } {