Page MenuHomePhabricator

[explorer] Format askama HTML templates using djlint instead of prettier
ClosedPublic

Authored by tobias_ruck on Aug 19 2024, 23:11.

Details

Summary

Currently, the HTML templates are very hard to work with as prettier's "html" formatter breaks the logic of askama macros / control flow.

By using "djlint" (from Django) instead of prettier, we get formatting that's much more readable, especially {% match %} blocks are now indented by their logical structure. We use the jinja profile as that one is extremely similar to askama.

There's some massaging applied still to make it more readable, but overall the formatter is doing a great job already.

One downside is that the principles behind HTML formatting of djlint differs quite a bit with prettiers, so we get a lot of unneeded style changes, but the advantages of having proper, consistent and automatic formatting are much greater

Test Plan
  1. pip install djlint
  2. If wanted, run djlint ./explorer-server/templates --profile=jinja --reformat --custom-blocks=match,for --ignore-blocks=call --format-js --max-line-length=80 and double-check it outputs "0 files were updated."
  3. Run the explorer, check if each page is still rendered correctly (e.g. the tx 99d965ef70ac5c620906b72d7900721aea35295bf613aefe9f7ef91c83039a71)

Diff Detail

Repository
rABC Bitcoin ABC
Branch
explorer-fix-template-formatting
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 30032
Build 59598: Build Diff
Build 59597: arc lint + arc unit

Event Timeline

I agree that it looks a lot more readable like this, and everything looks good to me. I'm just wondering whether applying markdown formatting to html files makes sense in the first place. Does it add anything useful vs just disabling prettier altogether for this project?

I tried adding a .prettierignore file to web/explorer with a explorer-server/templates line, but it does not seem to have any effect, prettier still messes up the html files in this directory. So not sure how to what I suggested.

use djlint to lint explorer templates

tobias_ruck retitled this revision from [explorer] Fix formatting of askama HTML templates to [explorer] Format askama HTML templates using djlint instead of prettier.Aug 20 2024, 12:07
tobias_ruck edited the summary of this revision. (Show Details)
tobias_ruck edited the test plan for this revision. (Show Details)
tobias_ruck edited the test plan for this revision. (Show Details)

OK. It requires python >= 3.8, which is fine. I added a suggestion about an alternative way to pass the input data to stdin, your pick.

Benchmark:
Before this diff

$ time arc lint --everything
real	3m58,138s
user	18m14,198s
sys	3m54,032s

With this diff

$ time arc lint --everything
real	4m32,932s
user	18m19,843s
sys	3m54,285s

Not sure if the real time is significant, my computer is running other stuff at the same time.

And

$ time djlint web/explorer/explorer-server/templates --profile=jinja --reformat --custom-blocks=match,for --ignore-blocks=call --format-js --max-line-length=80
real	0m2,835s
user	0m7,609s
sys	0m0,292s
arcanist/linter/DjlintLinter.php
80–82 ↗(On Diff #49288)

Possible alternative solution, in one of the previous iterations of FlyntLinter: overloading buildFutures

https://reviews.bitcoinabc.org/D13231?vs=38278&id=38914#toc

This revision is now accepted and ready to land.Aug 20 2024, 14:35
tobias_ruck edited the test plan for this revision. (Show Details)

fix missing =