Svelte: Bug: "<!-- -->"does not work inside script tag

[xmeta]

Version

3.5.1

Reproduction Link

https://svelte.dev/repl/f1472198f68b43329eaf373047c9a9f6?version=3.5.1

Steps to reproduce

1. Use <!-- --> inside script tag

````html

````

What is expected?

No error

https://jsfiddle.net/c3205wua/

What is actually happening?

Unexpected token (2:0)

Note

you can check validation of this code.

• https://html5.validator.nu/
• http://esprima.org/demo/validate.html

See also https://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.3.2

[izznatsir]

As far as I knew, the area between script tag is only for javascript codes, which means to write a comment line you should use // instead of <!-- -->. Because, comment tag that you use is an html syntax not a javascript syntax.

[Conduitry]

<!-- --> inside <script> tags is valid syntax in certain situations. The issue body has more information about this. That said, this is an obscure and obsolete part of the HTML spec, and aligning with this is extremely low priority.

[mrkishi]

The only estree-compatible parser that has support for ecmascript's web browser annex that I know of is Meriyah, by the way.

[js2me]

As I think inside the <script></script> tag should be contains only JavaScript syntax otherwise it will be the same error as with <!-- -->

[raydaly]

Use case about script tag in svelte strings. A twitter api will return a string of html to embed in an HTML page. See "Embed from Twitter.com" at https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview.html to see how to get a sample string. Svelte breaks with this string. let str = "

or

a = '

ok can i sleep now

— Steven Rich (@dataeditor) July 17, 2019

'

or

b = ''

[ryburn52]

Presumably related ?

<div    class="dd"
         style="color:red" 
        >
    Correct behavior
</div>

The above works as expected.
However....

<div    class="dd" 
<!--         style="color:red" -->
    >
    Incorrect behavior... as extra > is displayed
</div>

...the above fails.

REPL gives an error -

Failed to execute 'setAttribute' on 'Element': ' comments within an active script tag would be invalid javascript. But that's not what my use case was. Instead i was trying to comment the entire script block.

<!--<style type="text/scss">
     button {
         color: $something
     }
</style>-->

the issue i had though was this block was still being executed due the regex used to selected the style and script tags.

In saying that i would also expect line by line comments to work if you also comment the open and closing tags like this.

<!--<style type="text/scss">-->
<!--     button {-->
<!--         color: $something-->
<!--     }-->
<!--</style>-->

I tend to have my IDE default to line comments as you can uncomment individual lines with ease

[ryburn52]

Could we just strip comments before compiling?

[tanhauhau]

Yea it is indeed a bug for preprocessor. It work fine without preprocessor