portabletext / svelte-portabletext

Transform Portable Text content into Svelte components
svelte-portabletext.sanity.build
MIT License
65 stars 21 forks source link

Extraneous whitespace around comments #1

Open nonphoto opened 2 years ago

nonphoto commented 2 years ago

Svelte preserves whitespace inside regular tags. HTML comments are stripped out by the compiler, but the whitespace around them is not, causing the component output to have extraneous newlines. This is an issue with pre tags and white-space: pre or pre-line in CSS. We should remove the comments, or at least include the whitespace inside the comment delimiters.

hdoro commented 2 years ago

Hey Jonas, thank you for reporting! This is a known issue with Svelte's SSR preserving whitespace while DOM hydration correctly removes it - see issue n° 3168, which although closed hasn't been fixed.

I honestly don't know what approach to take, as manually removing the whitespace in our code is prone to error and makes the library code unreadable and hard to maintain. Also, we're using Prettier for automatic formatting, and it's set to format whitespace around the comments, not inside them.

All that said, I'm open to suggestions and am glad to hear your thoughts 😄

el-schneider commented 1 year ago

Hi there, is there any workaround for this? I'm running into this issue and especially with larger text the discrepancy between SSR and Client get's highly noticable.

kiosion commented 9 months ago

Would Svelte's preserveWhitespace compiler option help with this? If the removal is inconsistent, setting it to true might at least keep it consistent between SSR & Hydration