@ripple-ts/prettier-plugin 0.2.196 → 0.2.198

package/package.json

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

package/src/index.js

@@ -85,6 +85,26 @@ export const printers = {
 				};
 			}
 
+			if (node.type === 'ScriptContent' && node.content) {
+				return async (textToDoc) => {
+					try {
+						// Format JS/TS using Prettier's textToDoc
+						const body = await textToDoc(node.content, {
+							parser: 'babel-ts',
+						});
+
+						// Return complete element with tags
+						// return ['<script>', indent([hardline, formattedContent]), hardline, '</script>'];
+						return body;
+					} catch (error) {
+						// If JS/TS has syntax errors, return original unformatted content
+						console.error('Error formatting JS/TS inside <script>:', error);
+						return node.content;
+						// return ['<script>', indent([hardline, node.content]), hardline, '</script>'];
+					}
+				};
+			}
+
 			return null;
 		},
 		getVisitorKeys(node) {
@@ -98,6 +118,7 @@ export const printers = {
 				'css', // Handled by embed()
 				'raw',
 				'regex',
+				'content', // Handled by embed() for <script> tags
 			]);
 
 			const keys = Object.keys(node).filter((key) => {
@@ -1290,6 +1311,12 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 		}
 
+		case 'TSInstantiationExpression': {
+			// Explicit type instantiation: foo<Type>, identity<string>
+			nodeContent = concat([path.call(print, 'expression'), path.call(print, 'typeArguments')]);
+			break;
+		}
+
 		case 'JSXExpressionContainer': {
 			nodeContent = concat(['{', path.call(print, 'expression'), '}']);
 			break;
@@ -1869,7 +1896,7 @@ function printRippleNode(node, path, options, print, args) {
 		case 'TSTypeOperator': {
 			const operator = node.operator;
 			const type = path.call(print, 'typeAnnotation');
-			nodeContent = `${operator} ${type}`;
+			nodeContent = concat([operator, ' ', type]);
 			break;
 		}
 
@@ -2175,7 +2202,7 @@ function printExportNamedDeclaration(node, path, options, print) {
 
 function printComponent(node, path, options, print, innerCommentParts = []) {
 	// Use arrays instead of string concatenation
-	const signatureParts = ['component ', node.id.name];
+	const signatureParts = node.id ? ['component ', node.id.name] : ['component'];
 
 	// Add TypeScript generics if present
 	if (node.typeParameters) {
@@ -3137,6 +3164,11 @@ function printTryStatement(node, path, options, print) {
 	parts.push('try ');
 	parts.push(path.call(print, 'block'));
 
+	if (node.pending) {
+		parts.push(' pending ');
+		parts.push(path.call(print, 'pending'));
+	}
+
 	if (node.handler) {
 		parts.push(' catch');
 		if (node.handler.param) {
@@ -3153,11 +3185,6 @@ function printTryStatement(node, path, options, print) {
 		parts.push(path.call(print, 'finalizer'));
 	}
 
-	if (node.pending) {
-		parts.push(' pending ');
-		parts.push(path.call(print, 'pending'));
-	}
-
 	return parts;
 }
 
@@ -3168,8 +3195,22 @@ function printClassBody(node, path, options, print) {
 
 	const members = path.map(print, 'body');
 
-	// Use AST builders for proper formatting
-	return group(['{', indent(concat([line, join(concat([line, line]), members)])), line, '}']);
+	// Build content with proper blank line handling
+	const contentParts = [];
+	for (let i = 0; i < members.length; i++) {
+		if (i > 0) {
+			// Check if we should add a blank line between members
+			const prevNode = node.body[i - 1];
+			const currNode = node.body[i];
+			if (shouldAddBlankLine(prevNode, currNode)) {
+				contentParts.push(line);
+			}
+		}
+		contentParts.push(line);
+		contentParts.push(members[i]);
+	}
+
+	return group(['{', indent(concat(contentParts)), line, '}']);
 }
 
 function printPropertyDefinition(node, path, options, print) {
@@ -3572,6 +3613,9 @@ function printTSTypeParameterDeclaration(node, path, options, print) {
 		if (i > 0) parts.push(', ');
 		parts.push(paramList[i]);
 	}
+	if (node.params.length === 1 && node.extra?.trailingComma !== undefined) {
+		parts.push(',');
+	}
 	parts.push('>');
 	return parts;
 }
@@ -3598,15 +3642,38 @@ function printTSTypeParameterInstantiation(node, path, options, print) {
 		return '';
 	}
 
-	const parts = [];
-	parts.push('<');
 	const paramList = path.map(print, 'params');
+
+	// Check if any param has line breaks (e.g., contains object types)
+	const hasBreakingParam = paramList.some((param) => willBreak(param));
+
+	// Build inline version: <T, U>
+	const inlineParts = ['<'];
 	for (let i = 0; i < paramList.length; i++) {
-		if (i > 0) parts.push(', ');
+		if (i > 0) inlineParts.push(', ');
+		inlineParts.push(paramList[i]);
+	}
+	inlineParts.push('>');
+
+	// If any param breaks, use the breaking version with proper indentation
+	if (hasBreakingParam) {
+		// Build breaking version: <\n  T,\n  U\n>
+		const breakingParts = [];
+		for (let i = 0; i < paramList.length; i++) {
+			if (i > 0) breakingParts.push(',', hardline);
+			breakingParts.push(paramList[i]);
+		}
+		return group(concat(['<', indent(concat([hardline, ...breakingParts])), hardline, '>']));
+	}
+
+	// Otherwise use group to allow natural breaking
+	const parts = [];
+	for (let i = 0; i < paramList.length; i++) {
+		if (i > 0) parts.push(',', line);
 		parts.push(paramList[i]);
 	}
-	parts.push('>');
-	return concat(parts);
+
+	return group(concat(['<', indent(concat([softline, ...parts])), softline, '>']));
 }
 
 function printSwitchStatement(node, path, options, print) {
@@ -4725,33 +4792,19 @@ function printMemberExpressionSimple(node, options, computed = false) {
 
 function printElement(node, path, options, print) {
 	const tagName = printMemberExpressionSimple(node.id, options);
-
 	const elementLeadingComments = getElementLeadingComments(node);
-	const openingTagEndIndex =
-		node?.metadata && typeof node.metadata.openingTagEnd === 'number'
-			? node.metadata.openingTagEnd
-			: null;
-	const nodeStartIndex = typeof node.start === 'number' ? node.start : null;
-	const nodeEndIndex = typeof node.end === 'number' ? node.end : null;
 
 	// `metadata.elementLeadingComments` may include comments that actually appear *inside* the element
 	// body (after the opening tag). Those must not be hoisted before the element.
-	const outerElementLeadingComments =
-		openingTagEndIndex == null || nodeStartIndex == null
-			? elementLeadingComments
-			: elementLeadingComments.filter(
-				(comment) => typeof comment.start !== 'number' || comment.start < nodeStartIndex,
-			);
-	const innerElementBodyComments =
-		openingTagEndIndex != null && nodeEndIndex != null
-			? elementLeadingComments.filter(
-				(comment) =>
-					typeof comment.start === 'number' &&
-					comment.start >= openingTagEndIndex &&
-					comment.start < nodeEndIndex,
-			)
-			: [];
-
+	const outerElementLeadingComments = elementLeadingComments.filter(
+		(comment) => typeof comment.start !== 'number' || comment.start < node.start,
+	);
+	const innerElementBodyComments = elementLeadingComments.filter(
+		(comment) =>
+			typeof comment.start === 'number' &&
+			comment.start >= node.openingElement.end &&
+			comment.start < node.end,
+	);
 	const metadataCommentParts =
 		outerElementLeadingComments.length > 0
 			? createElementLevelCommentParts(outerElementLeadingComments)
@@ -4842,9 +4895,7 @@ function printElement(node, path, options, print) {
 	const finalChildren = [];
 	const sortedInnerElementBodyComments =
 		innerElementBodyComments.length > 0
-			? innerElementBodyComments
-					.slice()
-					.sort((a, b) => (a.start ?? 0) - (b.start ?? 0))
+			? innerElementBodyComments.slice().sort((a, b) => (a.start ?? 0) - (b.start ?? 0))
 			: [];
 	let innerElementBodyCommentIndex = 0;
 
@@ -4915,7 +4966,8 @@ function printElement(node, path, options, print) {
 		let insertedBodyCommentsBetween = false;
 		if (innerElementBodyCommentIndex < sortedInnerElementBodyComments.length) {
 			const currentChildEnd = getNodeEndIndex(currentChild);
-			const nextChildStart = nextChild && typeof nextChild.start === 'number' ? nextChild.start : null;
+			const nextChildStart =
+				nextChild && typeof nextChild.start === 'number' ? nextChild.start : null;
 			if (typeof currentChildEnd === 'number') {
 				const commentsBetween = [];
 				while (innerElementBodyCommentIndex < sortedInnerElementBodyComments.length) {

package/src/index.test.js

@@ -1729,6 +1729,58 @@ files = [...(files ?? []), ...dt.files];`;
 			const result = await format(expected, { singleQuote: true, printWidth: 100 });
 			expect(result).toBeWithNewline(expected);
 		});
+
+		it('should preserve <script> tags', async () => {
+			const expected = `<script>
+  const i = 2;
+</script>`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should preserve component as a named or an anonymous property', async () => {
+			const expected = `const UI = {
+  span: component Span() {
+    <span>{'Hello from Span'}</span>
+  },
+  button: component({ children }) {
+    <button>
+      <children />
+    </button>
+  },
+};`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should preserve the order of try / pending / catch block', async () => {
+			const expected = `component Test() {
+  let items: TrackedArray<string> | null = null;
+  let error: string | null = null;
+
+  async function* throwingIterable() {
+    throw new Error('Async error');
+  }
+
+  try {
+    items = await TrackedArray.fromAsync(throwingIterable());
+    for (const item of items) {
+      <li>{item}</li>
+    }
+  } pending {
+    <div>{'Loading...'}</div>
+  } catch (e) {
+    error = (e as Error).message;
+  } finally {
+    <div>{'finally block'}</div>
+  }
+}`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
 	});
 
 	describe('edge cases', () => {
@@ -2164,6 +2216,28 @@ const obj2 = #{
 		expect(result).toBeWithNewline(expected);
 	});
 
+	it('should preserve comments inside js/ts blocks inside markup', async () => {
+		const expected = `component App() {
+  <button
+    onClick={() => {
+      @hasError = false;
+      try {
+        @hasError = false;
+        // @ts-ignore
+        obj['nonexistent']();
+      } catch {
+        // @hasError = true;
+      }
+    }}
+  >
+    {'Nonexistent'}
+  </button>
+}`;
+
+		const result = await format(expected, { singleQuote: true, printWidth: 100 });
+		expect(result).toBeWithNewline(expected);
+	});
+
 	it('should properly format array with various sized strings and 100 printWidth', async () => {
 		const expected = `component App() {
   const d = [
@@ -2566,6 +2640,26 @@ const items = [] as unknown[];`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should format nested generics types', async () => {
+			const expected = `component Test() {
+  const [children, rest] = trackSplit<
+    PropsWithChildren<{
+      class: string;
+      id: string;
+      onClick: EventListener;
+    }>,
+    keyof PropsWithChildren<{
+      class: string;
+      id: string;
+      onClick: EventListener;
+    }>
+  >(props as Props, ['children']);
+}`;
+
+			const result = await format(expected, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should format TypeScript tuple types (TSTupleType)', async () => {
 			const input = `type T = [string, number, boolean];`;
 			const expected = `type T = [string, number, boolean];`;
@@ -2650,6 +2744,15 @@ const items = [] as unknown[];`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should keep the TSInstantiationExpression ', async () => {
+			const expected = `component Test() {
+  const items = (Promise<string[]>).reject(new Error('Async error'));
+}`;
+
+			const result = await format(expected, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should format TSNonNullExpression in complex expressions', async () => {
 			const input = `function getValue(x?:string){return x!.toUpperCase()}`;
 			const expected = `function getValue(x?: string) {