Twig tag entry failure in JavaScript context

Created September 26, 2023 00:25

Hello, in the past few releases (and using the new UI), typing Twig tags have been broken in the JavaScript context. For example, in a .twig file, with the following code, typing the double curly brace `{{` symbol for a Twig tag within the backticks will make PhpStorm insert the closing double curly brace at the end of the if statement. Please see the attached video showing the annoying behavior.

<script>
    ((window, document) => {
        if (window.confirm('Are you sure?')) {
            window.fetch(``)
        }
    })(window, document);
</script>

Upload id: 2023_09_26_zkYDMabwDbHHPE62nhbmSP (file: phpstorm twig js.mp4)

Please prevent this (new-ish) behavior. Thank you.

3 comments

Eugene Morozov

Created September 26, 2023 12:46

This is not a new behavior; I checked that in 2020.1.4, and we already inserted the closing delimiter automatically in this context there.
Could you please elaborate on why this is an issue?
Since it's a Twig file, it makes sense that you want to use the delimiters more often than you want to use double braces.

Update 1: I just noticed that in your screencast, PhpStorm inserts a single closing brace and not two of them. I can't reproduce this behavior locally.
Also, in your issue description, you specified that it's double closing braces that get inserted.

Update 2: Ah, I see. This is because you use a scratch and not a real file.

I assume that your report is mostly about how it works in real files, not in scratches, right?
What would be the solution you suggest, then? Not to insert closing delimiters when not in pure HTML context?

Swalker

Created September 26, 2023 17:44

Thank you for reviewing this issue. This problem happens in real files too--I only used a scratch file to isolate the demonstration of the issue. If you'll please watch the video again, the problem is that the closing double curly brace is getting inserted into the wrong place.

The expectation is that when typing `{{` within the backticks of JavaScript string interpolation, I would expect PhpStorm to create:

if (window.confirm('Are you sure?')) {
  window.fetch(`{{ }}`) // curly braces close in this line
}

But instead, what it does is close the closing brace of the if statement.

if (window.confirm('Are you sure?')) {
  window.fetch(`{{}`) // note that only one curly brace is closing here
}} // note that this is where the curly brace is closing improperly

This behavior only happens with the backtick ` string interpolation, not with the single quote ' or double quote string " markers. When using the following, the curly brace closing behavior is correct.

window.fetch('{{ }}') // this closes correctly
window.fetch("{{ }}") // this closes correctly
window.fetch(`{{}`) // this closes the outer if

I hope this clarifies the issue. I've attached a longer video showing the erroneous behavior.

Upload id: 2023_09_26_8gUXxTmDSP541Z1LJasMxd (file: phpstorm twig js brace closing.mp4)

Eugene Morozov

Created September 27, 2023 16:15

Ah, thank you! Code around the snippet seems to affect the bug, which is why it wasn't reproducible for me.
I've extracted this as WI-74491. Thank you for reporting!

Please sign in to leave a comment.