new line causing spaces to appear inconsistently

[patheticGeek]

Astro Info

Astro                    v5.0.0-beta.12
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Consider the following code:

<div>
	{arr.map((i, idx) => 
	<>
		-
		{i.title}
		{idx}
		a
		{idx ===arr.length-1 ? '' : ' '} 
	</>
	)}
</div>

It produces produces the following result:

- casdsad0 a - 127391 a - nsan98h92 a

On new line it is adding undesireable spaces b/w jsx and character boundaries but not between jsx and jsx

What's the expected result?

Ideally, there should be no spaces in the above as it should get compressed to

<div>{arr.map((i, idx) => <>-{i.title}{idx}a{idx ===arr.length-1 ? '' : ' '}</>)}</div>

and should get rendered as:

-casdsad0a -127391a -nsan98h92a

But it is not doing that

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gwdsqj?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

I feel this is somewhat expected because Astro's syntax even with JSX-like syntax is still closer to HTML in practice, it's like an HTML templating language. So the different new-line & whitespace rules matches with the HTML behaviour like what's shown here.

[patheticGeek]

but if you think html only has text/nodes not js boundaries in between, and here the spacing is inconsistently applied. it is there between text & jsx but not jsx and jsx or text & text

Also a lot of people use formatters and the formatter automatically makes the spacing decisions for you so ideally it should get minified and new line shouldnt count as a space in this scenario unless explicitly added with {' '}. or there can be a suggested config for formatter or docs so people dont shoot themselves in foot

--- Our case spfc. things

i am having a lot of issues as this behavior is very unexpected and not like any other jsx syntax, so having a hard time porting code to astro as we have a ton of this kind of components and this adds so much work in porting.

this also has raised some points in our codebase where we just choose making a react component for that one place we couldn't figure how to get consistent spacing with this behavior

[Truimo]

I also encountered a similar problem.

<p>
    A
    <span>B</span>
    C
</p>

In jsx, they should have no spaces, ABC
but in astro, A B C

I migrated from Next.js and this caused me trouble.
It would be nice to have a configuration option to choose which parsing behavior to use.

#8496 withastro/compiler#999

[ematipico]

In jsx, they should have no spaces, ABC
but in astro, A B C

But Astro isn't JSX, that's the whole point. Astro should follow HTML. Astro isn't JSX.

[Truimo]

But Astro isn't JSX, that's the whole point. Astro should follow HTML. Astro isn't JSX.

Okay, JSX-like Expressions, that's misleading.