Fix attributes using optional chaining not formatting correctly (#384)

* fix(embed): Format shorthand and spread attributes with optional accesors properly

* chore: changeset

.changeset/mean-planets-deliver.md

@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': patch
+---
+
+Fix attributes using optional chaining not formatting correctly

src/printer/embed.ts

@@ -8,6 +8,7 @@ import {
 	closingBracketReplace,
 	dotReplace,
 	inferParserByTypeAttribute,
+	interrogationReplace,
 	isNodeWithChildren,
 	isTagLikeNode,
 	isTextNode,
@@ -85,6 +86,7 @@ export const embed = ((path: AstPath, options: Options) => {
 					doc = doc.replaceAll(closingBracketReplace, '}');
 					doc = doc.replaceAll(atSignReplace, '@');
 					doc = doc.replaceAll(dotReplace, '.');
+					doc = doc.replaceAll(interrogationReplace, '?');
 				}
 
 				return doc;
@@ -268,12 +270,19 @@ function makeNodeJSXCompatible<T>(node: any): T {
 			attr.name = openingBracketReplace + attr.name + closingBracketReplace;
 		}
 
-		if (attr.name.includes('@')) {
-			attr.name = attr.name.replaceAll('@', atSignReplace);
-		}
+		// For spreads, we don't need to do anything because it should already be JSX compatible
+		if (attr.kind !== 'spread') {
+			if (attr.name.includes('@')) {
+				attr.name = attr.name.replaceAll('@', atSignReplace);
+			}
 
-		if (attr.name.includes('.')) {
-			attr.name = attr.name.replaceAll('.', dotReplace);
+			if (attr.name.includes('.')) {
+				attr.name = attr.name.replaceAll('.', dotReplace);
+			}
+
+			if (attr.name.includes('?')) {
+				attr.name = attr.name.replaceAll('?', interrogationReplace);
+			}
 		}
 
 		return attr;

src/printer/utils.ts

@@ -24,6 +24,7 @@ export const openingBracketReplace = '_Pé';
 export const closingBracketReplace = 'èP_';
 export const atSignReplace = 'ΩP_';
 export const dotReplace = 'ωP_';
+export const interrogationReplace = 'ΔP_';
 
 export function isInlineElement(path: AstPath, opts: ParserOptions, node: anyNode): boolean {
 	return node && node.type === 'element' && !isBlockElement(node, opts) && !isPreTagContent(path);

test/fixtures/other/non-jsx-compatible-characters/input.astro

@@ -18,3 +18,17 @@
 
 
 	blah</div>}
+
+	{arr.map(() =>
+
+
+		<button {...object?.data} />)}
+
+
+		{() => <button
+			{object?.something}></button>}
+
+
+			{
+	<div something={object?.somethingelse}></div>
+}

test/fixtures/other/non-jsx-compatible-characters/output.astro

@@ -3,3 +3,9 @@
 {(<div do.do={0}>Astro!</div>)}
 
 {true && <div x-on:click.stop.prevent="console.log('yay');">blah</div>}
+
+{arr.map(() => <button {...object?.data} />)}
+
+{() => <button {object?.something} />}
+
+{(<div something={object?.somethingelse} />)}