[FEATURE] Format JSON and JS inside html attributes

[oliverhaas]

Prerequisites

• I've searched the issues
• I've read the docs

Feature Request

I occasionally encounter JSON and JS in html attributes, and currently djlint will just put all the code in a single line. I hate disabling the formatter for some blocks, and some templates became quite unreadable...

So, I gave the topic a shot to implement something which would format these kind of JSON/JS attributes. The PR already exists #1337 and I'm hoping for some feedback.

My implementation will turn this

<span x-init="date = new Date(); setTimeout(() => {  foo = false;}, 3000);"
              x-data='{ foo: true, baz:             false                   }'
              class="hs-tooltip-content"
              role="tooltip">{{ error }}</span>

into this

<span x-init="date = new Date();
              setTimeout(() => {
                  foo = false;
              }, 3000);"
      x-data='{
                  foo: true,
                  baz: false
              }'
      class="hs-tooltip-content"
      role="tooltip">{{ error }}</span>

Note that this is obviously a minimal example, and the minimal length and number of properties of the attribute's content when the new formatting will take place is configurable.

Issue #723 is related, since alpine js basically uses JS in html attributes. The default settings will actually cover alpine js attribute names (x-*).

Since the use of this feature is completely optional and disabled by default, it wouldn't hurt to merge the PR either such that more people can easily test it and give feedback. The PR could probably be cleaned up a bit, but overall everything I had in mind is there. Also, I'm using the already included jsbeautifier for JS and vanilla python for JSON formatting, mostly with the existing config options, so it's not a major change to the project.

[fgregg]

i explored this for a few hours today, and i think that this will be very hard to accomplish within djLint's current architecture.

djLint makes a very pragmatic architecture decision to operate on input files one line at a time. in order for that to work every html tag needs to be complete on a single line (i.e. have all it's attributes printed on one line).

however, whitespace can be semantic in javascript. here's the most pernicious class

fun = () => {
  const var = 1;
  // a silly little comment
  return var
}

if you flatten that into a single line

fun () => { const var = 1; // a silly little comment return var }

if we knew which values of attributes had javascript, we could make it work with the line-at-a-time architecture by escaping the newlines and then unescaping them later when we were ready to process the javascript blob.

however, that's not very easy when we are template.

<button onclick={% if condition %}"console.log('HOT')"{% else %}"console.log('COLD'){% endif %}>

in order to reliable parse the different parts of this out, you would basically need a lexer and parser.

And that's just a radically different architecture than what djLint has chosen to start with. @christopherpickering has plans on going the lexer/parser route for djLint 2.0. When those come to fruition, this type of feature could be made safe.

[oliverhaas]

I don't think you're correct with your conclusions, at least not in a practical sense.

Getting this to work in most cases, and then basically almost all cases, is certainly doable. I mean my approach works for json and javascript in attributes without template tags in them, and then yes, it gets certainly more difficult to increase compatibility...

Honestly, since JSON and JS can be part of django html templates anyway, I would even say that's a different issue/feature. I want to just use whatever formatters djlnt is using anyway, and this feature is is just "Use existing JSON/JS formatter in html attributes as well if it makes sense".

Feel free to aim higher for the lexer and parser approach. I would certainly love that approach to be made a reality in djlint.