@tsrx/prettier-plugin 0.3.65 → 0.3.67

package/package.json

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

package/src/index.js

@@ -16,7 +16,7 @@
 
 /** @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 */
+/** @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, preferInlineSimpleUnionType?: boolean }} PrintArgs */
 
 import { parseModule } from '@tsrx/core';
 import { doc } from 'prettier';
@@ -35,6 +35,7 @@ const {
 	breakParent,
 	indentIfBreak,
 	lineSuffix,
+	align,
 } = builders;
 const { replaceEndOfLine, willBreak } = utils;
 
@@ -1502,16 +1503,24 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 
 		case 'TSAsExpression': {
-			nodeContent = [path.call(print, 'expression'), ' as ', path.call(print, 'typeAnnotation')];
+			const typeAnnotation = path.call(
+				(typePath) => print(typePath, { preferInlineSimpleUnionType: true }),
+				'typeAnnotation',
+			);
+			nodeContent = willBreak(typeAnnotation)
+				? [path.call(print, 'expression'), ' as', indent([line, typeAnnotation])]
+				: [path.call(print, 'expression'), ' as ', typeAnnotation];
 			break;
 		}
 
 		case 'TSSatisfiesExpression': {
-			nodeContent = [
-				path.call(print, 'expression'),
-				' satisfies ',
-				path.call(print, 'typeAnnotation'),
-			];
+			const typeAnnotation = path.call(
+				(typePath) => print(typePath, { preferInlineSimpleUnionType: true }),
+				'typeAnnotation',
+			);
+			nodeContent = willBreak(typeAnnotation)
+				? [path.call(print, 'expression'), ' satisfies', indent([line, typeAnnotation])]
+				: [path.call(print, 'expression'), ' satisfies ', typeAnnotation];
 			break;
 		}
 
@@ -2137,8 +2146,7 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 
 		case 'TSUnionType': {
-			const types = path.map(print, 'types');
-			nodeContent = join(' | ', types);
+			nodeContent = printTSUnionType(node, path, print, args);
 			break;
 		}
 
@@ -2182,9 +2190,7 @@ function printRippleNode(node, path, options, print, args) {
 
 			// Handle return type
 			parts.push(' => ');
-			if (node.returnType) {
-				parts.push(path.call(print, 'returnType'));
-			} else if (node.typeAnnotation) {
+			if (node.typeAnnotation) {
 				parts.push(path.call(print, 'typeAnnotation'));
 			}
 
@@ -4420,6 +4426,35 @@ function printTSTypeAliasDeclaration(node, path, options, print) {
 	return group([head, ' =', indent([line, path.call(print, 'typeAnnotation')]), semi(options)]);
 }
 
+/**
+ * Print a TypeScript union type
+ * @param {AST.TSUnionType} node - The union node
+ * @param {AstPath<AST.TSUnionType>} path - The AST path
+ * @param {PrintFn} print - Print callback
+ * @param {PrintArgs} [args] - Additional context arguments
+ * @returns {Doc}
+ */
+function printTSUnionType(node, path, print, args) {
+	const types = path.map(print, 'types');
+	const inlineDoc = join(' | ', types);
+	const multilineDoc = [
+		'| ',
+		join(
+			[hardline, '| '],
+			types.map((typeDoc) => align(2, typeDoc)),
+		),
+	];
+	const shouldBreak = node.types.some(
+		(typeNode, index) => !wasOriginallySingleLine(typeNode) || willBreak(types[index]),
+	);
+
+	if (args?.preferInlineSimpleUnionType && !types.some((typeDoc) => willBreak(typeDoc))) {
+		return inlineDoc;
+	}
+
+	return shouldBreak ? group(multilineDoc) : conditionalGroup([inlineDoc, multilineDoc]);
+}
+
 /**
  * Print a TypeScript enum declaration
  * @param {AST.TSEnumDeclaration} node - The enum declaration node
@@ -5495,9 +5530,7 @@ function printTSConstructorType(node, path, options, print) {
 	}
 	parts.push(')');
 	parts.push(' => ');
-	if (node.returnType) {
-		parts.push(path.call(print, 'returnType'));
-	} else if (node.typeAnnotation) {
+	if (node.typeAnnotation) {
 		parts.push(path.call(print, 'typeAnnotation'));
 	}
 	return parts;

package/src/index.test.js

@@ -3035,6 +3035,41 @@ function test() {
 		expect(result).toBeWithNewline(expected);
 	});
 
+	it('should preserve comments in destructured typed component parameters', async () => {
+		const expected = `component Child({
+  tr: &[count, tr],
+  // test,
+}: {
+  tr: [number, Tracked<number>];
+  // test: (node: HTMLDivElement) => void;
+}) {
+  <button
+    onClick={() => {
+      count++;
+      tr[0]++;
+    }}
+  >
+    {count}
+  </button>
+}`;
+
+		const result = await format(expected);
+		expect(result).toBeWithNewline(expected);
+	});
+
+	it('should preserve comments in destructured typed function parameters', async () => {
+		const expected = `function Child({
+  tr: &[count, tr],
+  // test,
+}: {
+  tr: [number, Tracked<number>];
+  // test: (node: HTMLDivElement) => void;
+}) {}`;
+
+		const result = await format(expected);
+		expect(result).toBeWithNewline(expected);
+	});
+
 	it('should preserve trailing comments in call arguments', async () => {
 		const expected = `fn(
   arg1,
@@ -3782,6 +3817,70 @@ second"</pre>
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should normalize simple cast union types at print width 100', async () => {
+			const input = `const alphaLink = container.querySelector('[data-route-id="alpha"]') as HTMLAnchorElement | null;
+const saveButton = container.querySelector('[data-action-id="save"]') as HTMLButtonElement | null;
+const deleteButton = container.querySelector('[data-action-id="delete"]') as | HTMLButtonElement
+| null;`;
+
+			const expected = `const alphaLink = container.querySelector('[data-route-id="alpha"]') as HTMLAnchorElement | null;
+const saveButton = container.querySelector('[data-action-id="save"]') as HTMLButtonElement | null;
+const deleteButton = container.querySelector(
+  '[data-action-id="delete"]',
+) as HTMLButtonElement | null;`;
+
+			const result = await format(input, { printWidth: 100, singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should normalize simple cast union types at print width 80', async () => {
+			const input = `const alphaLink = container.querySelector('[data-route-id="alpha"]') as HTMLAnchorElement | null;
+const saveButton = container.querySelector('[data-action-id="save"]') as HTMLButtonElement | null;
+const deleteButton = container.querySelector('[data-action-id="delete"]') as | HTMLButtonElement
+| null;`;
+
+			const expected = `const alphaLink = container.querySelector(
+  '[data-route-id="alpha"]',
+) as HTMLAnchorElement | null;
+const saveButton = container.querySelector(
+  '[data-action-id="save"]',
+) as HTMLButtonElement | null;
+const deleteButton = container.querySelector(
+  '[data-action-id="delete"]',
+) as HTMLButtonElement | null;`;
+
+			const result = await format(input, { printWidth: 80, singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should format multiline TypeScript union object types like Prettier TypeScript', async () => {
+			const input = `type SvgIconSource = { name: SvgIconName; data?: never } | {
+    data: SvgIconData;
+    name?: never;
+ }`;
+
+			const expected = `type SvgIconSource =
+  | { name: SvgIconName; data?: never }
+  | {
+      data: SvgIconData;
+      name?: never;
+    };`;
+
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should break long TypeScript union types with leading operators', async () => {
+			const input = `type Source = SomeVeryLongTypeNameThatWillDefinitelyNotFit | AnotherVeryLongTypeNameThatWillDefinitelyNotFit;`;
+
+			const expected = `type Source =
+  | SomeVeryLongTypeNameThatWillDefinitelyNotFit
+  | AnotherVeryLongTypeNameThatWillDefinitelyNotFit;`;
+
+			const result = await format(input, { printWidth: 50 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should not overindent multiline object type aliases', async () => {
 			const input = `type ModuleShape = {
   default: ComponentType<{ value: string }>;