[BUG] [Formatter] Jinja variable within a <script> tag

[davidbgk]

• I'm on the latest version of djLint
• I've searched the issues
• I've read the docs

System Info

• OS: macOS Ventura
• Python 3.11.2
• djlint, version 1.25.0
• Jinja2

Issue

First time user, I tried to reformat a template containing that code:

<script id="search-index" type="application/json">
  {{ search_index }}
</script>

And it always produces:

  <script id="search-index" type="application/json">
    {
      {
        search_index
      }
    }
  </script>

Whatever the kind of ignoring comment I put around that part of the HTML (which is probably another bug(?).

How To Reproduce

The command I use is the following:

djlint templates --profile=jinja --reformat --format-css --indent-css 2 --format-js --indent-js 2 --indent 2

I tried with or without the script's attributes (id and type) and there is no difference.

Hope it helps! (and I can provide more details on demand)

[welcome]

Thanks for opening your first issue here!

[christopherpickering]

hey @davidbgk the js formatter is from jsbeautify and does not support template syntax yet. You'll hve to run w/out the --format-js flag to make that work.

does that help?

[davidbgk]

@christopherpickering oh I get it, thanks! I do confirm that it doesn't try to reformat the block if I remove the --format-js option.

I'm still wondering why ignoring that whole HTML block leads to its evaluation though 🤔 that would have come handy for my case.

Feel free to close the issue if you think it's not a real problem given that the main issue is explained!

[christopherpickering]

Hmm if you tried to ignore the block in djlint, it should have ignored it. Can you put the code you tried, and I will take a look deeper.

[davidbgk]

I tried that one and other combinations ({# djlint:off #} and {{ /* djlint:off */ }}) without any success:

  <!-- djlint:off -->
  <script id="search-index" type="application/json">{{ search_index }}</script>
  <!-- djlint:on -->

[Benik3]

Hello.
I can confirm this problem. As you mentioned, javascript is formatted by jsbeautifier.
I found that this settings works:

/* beautify preserve:start */
var foo = {{ bar }}
/* beautify preserve:end */

[christopherpickering]

It looks like the issue is that the --format-js tag is not checking to see if it is inside ignored code... I'll see about getting this fixed. Thanks!

[davidbgk]

I confirm the fix works for my case on the dev branch, thank you!

[christopherpickering]

🎉 This issue has been resolved in version 1.27.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[nexgen]

I'm currently using v1.28 of djlint but the problem still seems to work with javascript code.

/* beautify preserve:start */ --> Works
but other variation of djlint ignore like: {# djlint:off #} etc... is still not working.

[christopherpickering]

@nexgen please open a new issue with a code example.