withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
47.24k stars 2.51k forks source link

new line causing spaces to appear inconsistently #12554

Open patheticGeek opened 4 days ago

patheticGeek commented 4 days ago

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

bluwy commented 3 days ago

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 commented 3 days ago

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