fmt: preserve spacing in templates to allow for organizing code

[andradei]

They are useful to organize HTML tags, but the formatter removes all empty lines.

Example:

This

templ Form() {
	<a href="event/new">
		+ Create
	</a>

	<form method="post" action="/event/new">
		<label for="title">Title</label>
		<input id="title" name="title" type="text" required class="border rounded-lg block"/>

		<label for="date">Title</label>
		<input id="date" name="date" type="date" required class="border rounded-lg"/>

		<button type="submit">Create</button>
	</form>
}

becomes

templ Form() {
	<a href="event/new">
		+ Create
	</a>
	<form method="post" action="/event/new">
		<label for="title">Title</label>
		<input id="title" name="title" type="text" required class="border rounded-lg block"/>
		<label for="date">Title</label>
		<input id="date" name="date" type="date" required class="border rounded-lg"/>
		<button type="submit">Create</button>
	</form>
}

It would be great if at least 1 blank line was kept on those situations.

Environment

• macOS 14.2.1
• templ 0.2.476
• go1.21.5 darwin/arm64
• VSCode 1.85.1

[axispx]

+1 It would help with the readability of the code when I'm working with a div soup 😄

[joerdav]

I've set this as needs decision, I personally don't have any reservations against this, open to other opinions.

[dropwhile]

I ran into this issue as well, and the default formatting was a bit unexpected. I too would prefer newline preservation.

Perhaps it could be an option, similar to how the vscode html formatter has the "HTML>Format: Preserve New Lines" toggle (which I believe is enabled by default)?

This would allow people the option for either, and help prevent code churn for those that are fine with the existing formatting.

[andradei]

I think the solution is rather simple:
If a dev wrote empty lines that gofmt would preserve, it's safe to assume they expect to keep them after save. If the don't like them, they'd be writing .templ files without those empty lines. Making the formatter similar to gofmt would keep things consistent and meet already set expectations and all cases/tastes are covered.

[joerdav]

What about if duplicate new lines were removed?

<div />


<div />

formats to:

<div />

<div />

[a-h]

I think the goal of a formatter is to be consistent, but by retaining whitespace, you end up with oddities.

templ Form() {
	<a href="event/new">
		+ Create
	</a>

	<form method="post" action="/event/new">
		<label for="title">Title</label>

		<input id="title" name="title" type="text" required class="border rounded-lg block"/>

		<label for="date">Title</label>
		<input id="date" name="date" type="date" required class="border rounded-lg"/>

		<button type="submit">Create</button>

	</form>
}

Would we want to leave that as-is? There's two pairs of label/input, but they're not grouped. And there's an extra line at the end that doesn't add any value.

I think that if we're adding line breaks to show logical grouping, then we're actually missing a HTML element that makes that grouping explicit.

For example, the Hypermedia book groups with a <p> tag (see https://hypermedia.systems/a-web-1-0-application/).

        <p>
            <label for="first_name">First Name</label>
            <input name="first_name" id="first_name" type="text" placeholder="First Name" value="{{ contact.first or '' }}">
            <span class="error">{{ contact.errors['first'] }}</span>
        </p>
        <p>
            <label for="last_name">Last Name</label>
            <input name="last_name" id="last_name" type="text" placeholder="Last Name" value="{{ contact.last or '' }}">
            <span class="error">{{ contact.errors['last'] }}</span>
        </p>
        <p>
            <label for="phone">Phone</label>
            <input name="phone" id="phone" type="text" placeholder="Phone" value="{{ contact.phone or '' }}">
            <span class="error">{{ contact.errors['phone'] }}</span>
        </p>

I introduced a formatter into templ because in my commercial work, developers write HTML in all sorts of tortured ways, with some adding loads of pointless whitespace, others putting every attribute on a newline etc. etc.

I'm up for making the change to not remove extra whitespace if there's broad support, but if a silent majority are happy (or don't care), then I'd like to keep it, since there's value in the consistency that removing non-essential whitespace brings.

[andradei]

Thanks for being willing to make changes and for explaining the abuses to HTML files people make on your experience... I'm glad I don't run into that often.

It would be quite the lengthy task to have a formatter for sane grouping. Imagine taking into account every possible combination of HTML tags that can be grouped.

Would we want to leave that as-is?

I agree with @joerdav and have a strong opinion that "yes," keep it as is with one small change: respect 1 blank line but remove any subsequent ones.

developers write HTML in all sorts of tortured ways, with some adding loads of pointless whitespace, others putting every attribute on a newline etc. etc.

I kind of agree with the pointless whitespaces. But attributes on newlines could be allowed after some arbitrary number (like 5 attributes) or if one line would result in a certain length (maybe 80).

---

I'd propose this ticket takes care of the whitespace formatting only and another issue is created for attribute formatting, tag grouping, etc., if those things are worth discussing.

[joeyak]

It would be nice if it were an option for the formatter. I like how it compacts everything, but tbh it wouldn't be bad if it followed gofmt and preserved spaces as long as it's consistent.

[leaanthony]

+1 for this!
It would be really great if we could disable the formatter, so that Render just output the rendered template as is. This would work really well for testing, especially snapshot testing.

[joerdav]

@leaanthony I think the conversation here is mainly talking about the templ fmt command, rather than how the HTML comes out at the end. If you'd like to discuss more then it could be worth a new issue, though for snapshot testing I'd recommend just formatting the HTML after rendering, using something like https://github.com/a-h/htmlformat this is what we do in the templ tests!

[leaanthony]

Oh perfect! Thank you for replying 🙏 Also, what a fantastic project! 🚀