HTML comments are being stripped from output

ghost commented 2 years ago

Describe the bug

It seems that HTML comments are being stripped from output. This is problematic when using tools that rely on HTML comments as directives.

Reproduction

Add HTML comment to Svelte component.
View DOM in browser.
Comment is gone.

Logs

No response

System Info

macOS

Severity

blocking all usage of svelte

Prinzhorn commented 2 years ago

This is problematic when using tools that rely on HTML comments as directives.

I'm curious what tools you are referring to. Can you give an example?

stephane-vanraes commented 2 years ago

Do the comments also get stripped away if you add preserveComments: true to the compilerOptions in your configuration ?

ghost commented 2 years ago

An common example would be Microsoft's conditional comments, but there are also CMS tools that make use of comments. I'm working on a project that needs access to comments in the output HTML.

Personally, I think a framework should leave your HTML intact where at all possible. You have to jump through some hoops with React too, which isn't much fun: https://stackoverflow.com/questions/40381851/insert-html-comments-in-react.

ghost commented 2 years ago

I'll try the setting, @stephane-vanraes. Thanks.

Prinzhorn commented 2 years ago

An common example would be Microsoft's conditional comments

They probably belong hard coded to the <head> or something? Or why do you need to generate them dynamically using JavaScript? I also don't think Svelte supports IE 9

but there are also CMS tools that make use of comments

I'm sill curious for an actual example and why this is a problem with Svelte?

I'm working on a project that needs access to comments in the output HTML.

Svelte is a compiler that turns the HTML-like components into JavaScript. Not sure what "output HTML" you are referring to.

You have to jump through some hoops with React too, which isn't much fun: https://stackoverflow.com/questions/40381851/insert-html-comments-in-react.

Works in Svelte identical:

<script>
    let name = 'world';
</script>

{@html '<!--Hello-->'}
<h1>Hello {name}!</h1>

https://svelte.dev/repl/d6f3f01f53ec4c8bb7b1dd05291e3a16?version=3.43.1

Selection_987

I'll try the setting, @stephane-vanraes. Thanks.

The setting is for SSR only according to the docs.

ghost commented 2 years ago

Aha, the `{@html ''} syntax looks like a reasonable workaround, thank you. It's a shame that this doesn't happen automatically when the parser encounters an html comment.

Prinzhorn commented 2 years ago

It's a shame that this doesn't happen automatically when the parser encounters an html comment.

It reduces bundle size and improves performance and virtually nobody needs them.

I'm still very curious if you can explain your use-case as I haven't encountered this ever. The last time I had to use comments was with Knockout and it's been a while.

ghost commented 2 years ago

I can't share my use case just yet as it's not ready for public consumption, but I believe CouchCMS used html comments to annotate documents.

Regardless of my personal use case, from a user perspective, a Svelte file looks like HTML — shouldn't it behave like HTML? HTML comments are a core part of writing HTML, so it's jarring as a user when they are stripped from he output. I agree that having an option to strip them from output is useful, but an alternative syntax for those would be preferred, much like how Sass — and soon Atsro — use // for striped comments.

ghost commented 2 years ago

Just realised that the {@html ''} syntax also outputs  and  comments. Is there any way to disable this, as it can litter the DOM.

Conduitry commented 2 years ago

That was introduced in #4444 so unless you have a suggested way to handle hydration of {@html} expressions without that, no.

ghost commented 2 years ago

@Conduitry That makes sense. I would opt for making comments a first class citizen that get parsed, that way hydration could work as expected due to a comment nodes existence.

aqandrew commented 2 years ago

I'm still very curious if you can explain your use-case as I haven't encountered this ever.

I'm interested in adding HTML comments to Svelte output too. My use case is using SvelteKit to statically generate HTML emails.

Not sure what "output HTML" you are referring to.

In my case, the output HTML would be the HTML files added to the build folder with @sveltejs/adapter-static.

Since some styles are Outlook-specific, it's necessary to nest those styles in comments like this:

<!--[if mso]>
  <style>
    /* Outlook styles go here */
  </style>
<![endif]-->

(see GitHub's email design system)

The {@html ''} workaround works for me, in a component like this. Thank you!

{@html '<!--[if mso]>'}
<slot />
{@html '<![endif]-->'}

ghost commented 2 years ago

I'd like to add that it can be helpful during development to keep comments when using CSS utility libraries (Tailwind, for example), the downside of such libraries is that when looking at complex markup there are no identifying class names. It would be nice to retain comments during development but stripped for production.

TechAkayy commented 2 years ago

We are also having a tooling integration (work-in-progress) that relies on comments during development (not production). Would be great to preserve comments like in Vue.js (where I came from, Vue.js preserves comments by default during development and not in production).

If comments are not preserved, I was wondering what preserveComments: true is for? Does it have a different purpose? Can anyone clarify please.

sveltejs / svelte