In/dedentation is sometimes incorrect when multiple tags are on the same line

[jacklinke]

Really impressed with this package!

I noticed that in some of my longer templates in which I have sloppily at times had variations on <div><div> or </div><div> or </div></div> in the same line, things can get a bit weird. It's still valid html, but it's not pretty, and seems to trip djhtml up just a bit.

For instance, this minimal example:

{% block css %}
{% endblock css %}{% block content %}
<div class="row">
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
<div class="btn">
</div></div>
</div><div>
<div class="custom-control custom-switch">
<input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
</div>
<form class="form-inline">
<div class="custom-control custom-switch">
<input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
</div>
</form>
</div>
{% endblock content %}

I would expect something like this where the final div and {% endblock %} are fully left-justified:

{% block css %}
{% endblock css %}{% block content %}
<div class="row">
    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
        <div class="btn">
    </div></div>
</div><div>
    <div class="custom-control custom-switch">
        <input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
    </div>
    <form class="form-inline">
        <div class="custom-control custom-switch">
            <input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
        </div>
    </form>
</div>
{% endblock content %}

Or maybe this in a perfect world (though I suspect this would take a LOT more work to achieve via djhtml)

{% block css %}
{% endblock css %}
{% block content %}
<div class="row">
    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
        <div class="btn">
        </div>
    </div>
</div>
<div>
    <div class="custom-control custom-switch">
        <input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
    </div>
    <form class="form-inline">
        <div class="custom-control custom-switch">
            <input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
        </div>
    </form>
</div>
{% endblock content %}

But the actual output is this:

{% block css %}
{% endblock css %}{% block content %}
<div class="row">
    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
        <div class="btn">
    </div></div>
</div><div>
    <div class="custom-control custom-switch">
        <input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
        </div>
        <form class="form-inline">
            <div class="custom-control custom-switch">
                <input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
                </div>
            </form>
        </div>
    {% endblock content %}

I wish I were good enough with parsing/formatting to submit a PR, but hopefully this is at least helpful input.

[JaapJoris]

Hi there, and first of all thanks for trying this out. We've just started this project and we'd love to improve it further. Feedback such as yours is invaluable!

As for now, DJHTML is only adding/removing spaces. It won't change anything else, so it won't change this:

{% endblock css %}{% block content %}
<div class="row">
...

to this

{% endblock css %}
{% block content %}
    <div class="row">
        ...

Because that would require splitting an existing line into two lines. However, I think the expected output for this snippet should be the following, which according to your bug report it's not:

{% endblock css %}{% block content %}
    <div class="row">
        ...

I will look into this and publish an update shortly!

[jacklinke]

@JaapJoris Yeah, that would be an improvement!

I will definitely be keeping an eye on progress of this package. It's looking great!

[JaapJoris]

I have improved the indenting algorithm in the latest version. Your example now results in the following output:

{% block css %}
{% endblock css %}{% block content %}
    <div class="row">
        <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
            <div class="btn">
            </div></div>
    </div><div>
        <div class="custom-control custom-switch">
            <input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
        </div>
        <form class="form-inline">
            <div class="custom-control custom-switch">
                <input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
            </div>
        </form>
    </div>
{% endblock content %}

Without adding extra newlines, I believe this is the "most" correct this template could get. Do you agree?

[jacklinke]

Looks great!

[JaapJoris]

Awesome! If you have any other suggestions, feel free to open more issues!