@tsrx/prettier-plugin 0.3.103 → 0.3.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.103",
+  "version": "0.3.104",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",

package/src/index.js

@@ -20,6 +20,7 @@
 
 import { parseModule } from '@tsrx/core';
 import { doc } from 'prettier';
+import postcssPlugin from 'prettier/parser-postcss.js';
 
 const { builders, utils } = doc;
 const {
@@ -51,6 +52,9 @@ export const languages = [
 
 /** @type {import('prettier').Plugin['parsers']} */
 export const parsers = {
+	// Carry the embedded stylesheet parsers with the TSRX plugin so browser
+	// consumers of prettier/standalone do not need to register PostCSS separately.
+	...postcssPlugin.parsers,
 	tsrx: {
 		astFormat: 'ripple-ast',
 		/**
@@ -82,6 +86,7 @@ export const parsers = {
 
 /** @type {import('prettier').Plugin['printers']} */
 export const printers = {
+	...postcssPlugin.printers,
 	'ripple-ast': {
 		/**
 		 * @param {AstPath<AST.Node | AST.CSS.StyleSheet>} path
@@ -123,8 +128,8 @@ export const printers = {
 						return body;
 					} catch {
 						// A stylesheet that doesn't parse (e.g. mid-edit code) is an expected
-						// state, not an error: keep it verbatim and stay quiet.
-						return node.source;
+						// state, not an error: keep its authored lines and stay quiet.
+						return replaceEndOfLine(node.source.trim());
 					}
 				};
 			}
@@ -1664,7 +1669,8 @@ function printRippleNode(node, path, options, print, args) {
 			if (!node.source || !node.source.trim()) {
 				nodeContent = '';
 			} else {
-				nodeContent = node.source.trim();
+				// Preserve authored lines when embedded-language formatting is disabled.
+				nodeContent = replaceEndOfLine(node.source.trim());
 			}
 			break;
 		}
@@ -5820,10 +5826,10 @@ function isSimpleJSXExpressionChild(child) {
 		expression?.type === 'Identifier' ||
 		expression?.type === 'Literal' ||
 		expression?.type === 'TemplateLiteral' ||
-		// Stock Prettier keeps a single `{expr}` child inline regardless of the
-		// expression kind (member access, calls, etc.); only multiple children break.
 		expression?.type === 'MemberExpression' ||
-		expression?.type === 'CallExpression'
+		expression?.type === 'CallExpression' ||
+		expression?.type === 'BinaryExpression' ||
+		expression?.type === 'LogicalExpression'
 	);
 }
 
@@ -6091,6 +6097,21 @@ function printJSXElement(node, path, options, print) {
 		(child) => child.type !== 'JSXText' || child.value.trim(),
 	);
 	const singleMeaningfulChild = meaningfulChildren.length === 1 ? meaningfulChildren[0] : null;
+	const singleExpression =
+		singleMeaningfulChild?.type === 'JSXExpressionContainer'
+			? singleMeaningfulChild.expression
+			: null;
+	if (
+		!forceMultiline &&
+		childrenDocs.length === 1 &&
+		(singleExpression?.type === 'BinaryExpression' ||
+			singleExpression?.type === 'LogicalExpression')
+	) {
+		// Keep a short operation against its tags, but give a wrapping operation
+		// an indented element body instead of aligning continuations after `{`.
+		// Group the opening tag with that body so wrapped attributes break both.
+		return group([openingTag, indent([softline, childrenDocs[0]]), softline, '</', tagName, '>']);
+	}
 	if (
 		!forceMultiline &&
 		childrenDocs.length === 1 &&

package/src/index.test.js

@@ -1,8 +1,10 @@
 import { describe, it, expect } from 'vitest';
 import prettier from 'prettier';
+import standalonePrettier from 'prettier/standalone';
+import estreePlugin from 'prettier/plugins/estree';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
-import { languages, parsers } from './index.js';
+import { languages, parsers, printers } from './index.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -292,6 +294,79 @@ const items=[1,2,3];
 		expect(result).toBeWithNewline(expected);
 	});
 
+	it('formats style tags with standalone Prettier', async () => {
+		const input = `export default function App() @{
+	<style>
+		.demo { display: grid; gap: 0.5rem; justify-items: start; }
+		button { padding: 0.4rem 0.9rem; color: inherit; }
+	</style>
+}`;
+		const expected = `export default function App() @{
+	<style>
+		.demo {
+			display: grid;
+			gap: 0.5rem;
+			justify-items: start;
+		}
+		button {
+			padding: 0.4rem 0.9rem;
+			color: inherit;
+		}
+	</style>
+}`;
+		const options = {
+			parser: 'tsrx',
+			plugins: [{ languages, parsers, printers }, estreePlugin],
+			useTabs: true,
+			tabWidth: 2,
+			singleQuote: true,
+			printWidth: 100,
+		};
+
+		const result = await standalonePrettier.format(input, options);
+		expect(result).toBeWithNewline(expected);
+		expect(await standalonePrettier.format(result, options)).toBe(result);
+	});
+
+	it('preserves style lines when embedded formatting is disabled', async () => {
+		const input = `export default function App() @{
+	<style>
+		.demo {
+			display: grid;
+			gap: 0.5rem;
+		}
+		button {
+			color: inherit;
+		}
+	</style>
+}`;
+
+		const options = {
+			useTabs: true,
+			singleQuote: true,
+			embeddedLanguageFormatting: 'off',
+		};
+		const result = await format(input, options);
+
+		expect(result).toBeWithNewline(input);
+		expect(await format(result, options)).toBe(result);
+	});
+
+	it('preserves style lines when embedded formatting fails', async () => {
+		const input = `export default function App() @{
+	<style>
+		.demo {
+			color red;
+		}
+	</style>
+}`;
+		const options = { useTabs: true, singleQuote: true };
+		const result = await format(input, options);
+
+		expect(result).toBeWithNewline(input);
+		expect(await format(result, options)).toBe(result);
+	});
+
 	it('formats setup statements before the TSRX return', async () => {
 		const input = `function Counter(){let count=track(0);const increment=()=>count++;return <button onClick={increment}>{count}</button>}`;
 		const expected = `function Counter() {
@@ -326,6 +401,51 @@ const items=[1,2,3];
 		expect(result).toBeWithNewline(expected);
 	});
 
+	it('keeps a lone binary expression child inline when it fits', async () => {
+		const input = `export function App() @{
+  <h2>{'Count: ' + count}</h2>
+}`;
+		const expected = `export function App() @{
+  <h2>{'Count: ' + count}</h2>
+}`;
+
+		const result = await format(input, { singleQuote: true });
+		expect(result).toBeWithNewline(expected);
+	});
+
+	it('indents a lone binary expression child when it wraps', async () => {
+		const input = `export function App() @{
+  <h2>{firstLongIdentifier + secondLongIdentifier + thirdLongIdentifier}</h2>
+}`;
+		const expected = `export function App() @{
+  <h2>
+    {firstLongIdentifier +
+      secondLongIdentifier +
+      thirdLongIdentifier}
+  </h2>
+}`;
+
+		const result = await format(input, { printWidth: 40 });
+		expect(result).toBeWithNewline(expected);
+	});
+
+	it('indents a lone binary expression child after wrapped attributes', async () => {
+		const input = `export function App() @{
+  <h2 firstLongAttributeName={firstLongAttributeValue} secondLongAttributeName={secondLongAttributeValue}>{a + b}</h2>
+}`;
+		const expected = `export function App() @{
+  <h2
+    firstLongAttributeName={firstLongAttributeValue}
+    secondLongAttributeName={secondLongAttributeValue}
+  >
+    {a + b}
+  </h2>
+}`;
+
+		const result = await format(input, { printWidth: 50 });
+		expect(result).toBeWithNewline(expected);
+	});
+
 	it('preserves authored multiline whitespace around a single JSXText child', async () => {
 		const input = `function Foo() @{
   @if (props.onRemove) {
@@ -5360,9 +5480,7 @@ const foo = <><Bar {...props} /></>;`;
 			const expected = `export function Test() {
   const a = 1
   const b = 2
-  <div>
-    {a + b}
-  </div>
+  <div>{a + b}</div>
 }`;
 			const result = await format(input, { singleQuote: true, semi: false });
 			expect(result).toBeWithNewline(expected);
@@ -5377,9 +5495,7 @@ const foo = <><Bar {...props} /></>;`;
 			const expected = `export function Test() {
   const a = 1;
   const b = 2;
-  <div>
-    {a + b}
-  </div>
+  <div>{a + b}</div>
 }`;
 			const result = await format(input, { singleQuote: true, semi: true });
 			expect(result).toBeWithNewline(expected);