@ripple-ts/prettier-plugin 0.2.170 → 0.2.172

package/package.json

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

package/src/index.js

@@ -2044,7 +2044,6 @@ function printRippleNode(node, path, options, print, args) {
 }
 
 function printImportDeclaration(node, path, options, print) {
-	// Use Prettier's doc builders for proper cursor tracking
 	const parts = ['import'];
 
 	// Handle type imports
@@ -2073,25 +2072,47 @@ function printImportDeclaration(node, path, options, print) {
 			}
 		});
 
-		// Build import clause properly
-		const importParts = [];
+		// Build import clause with proper grouping and line breaking
+		const importClauseParts = [];
+
 		if (defaultImports.length > 0) {
-			importParts.push(defaultImports.join(', '));
+			importClauseParts.push(defaultImports.join(', '));
 		}
 		if (namespaceImports.length > 0) {
-			importParts.push(namespaceImports.join(', '));
+			importClauseParts.push(namespaceImports.join(', '));
 		}
 		if (namedImports.length > 0) {
-			importParts.push('{ ' + namedImports.join(', ') + ' }');
+			// Use Prettier's group and conditionalGroup for named imports to handle line breaking
+			const namedImportsDocs = namedImports.map((name) => name);
+			const namedImportsGroup = group(
+				concat([
+					'{',
+					indent(
+						concat([
+							options.bracketSpacing ? line : softline,
+							join(concat([',', line]), namedImportsDocs),
+						]),
+					),
+					ifBreak(shouldPrintComma(options) ? ',' : ''),
+					options.bracketSpacing ? line : softline,
+					'}',
+				]),
+			);
+			importClauseParts.push(namedImportsGroup);
 		}
 
-		parts.push(' ' + importParts.join(', ') + ' from');
+		parts.push(' ');
+		if (importClauseParts.length === 1 && typeof importClauseParts[0] === 'object') {
+			parts.push(importClauseParts[0]);
+		} else {
+			parts.push(join(', ', importClauseParts));
+		}
+		parts.push(' from');
 	}
 
-	parts.push(' ' + formatStringLiteral(node.source.value, options) + semi(options));
+	parts.push(' ', formatStringLiteral(node.source.value, options), semi(options));
 
-	// Return as single string for proper cursor tracking
-	return parts;
+	return concat(parts);
 }
 
 function printExportNamedDeclaration(node, path, options, print) {

package/src/index.test.js

@@ -663,6 +663,33 @@ import { Something, type Props, track } from 'ripple';`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should format long import statements correctly', async () => {
+			const input = `import { flushSync, track, effect, bindValue, bindChecked, bindGroup, bindClientWidth, bindClientHeight, bindOffsetWidth, bindOffsetHeight, bindContentRect, bindContentBoxSize, bindBorderBoxSize, bindDevicePixelContentBoxSize, bindInnerHTML, bindInnerText, bindTextContent, bindNode } from 'ripple';`;
+			const expected = `import {
+  flushSync,
+  track,
+  effect,
+  bindValue,
+  bindChecked,
+  bindGroup,
+  bindClientWidth,
+  bindClientHeight,
+  bindOffsetWidth,
+  bindOffsetHeight,
+  bindContentRect,
+  bindContentBoxSize,
+  bindBorderBoxSize,
+  bindDevicePixelContentBoxSize,
+  bindInnerHTML,
+  bindInnerText,
+  bindTextContent,
+  bindNode,
+} from 'ripple';`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 80 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should preserve @ symbol in JSX attributes and shorthand syntax', async () => {
 			const input = `component App() {
 	const count = track(0);