templ fmt: unexpected formatting result.

[a-h]

templ fmt: unexpected formatting result.

[a-h]

It's formatted that way because span is an inline element:

<p>This is <span>inline</span></o>

If you used <div> instead, I'd expect it to introduce a new line.

[joerdav]

I think most HTML formatters attempt to limit line length in cases like this.

I wanted to use prettier as an example here but it did something arguably worse:

(replaced all braces with quotes to make it valid HTML)

<div>
  <p class="%= templ.Classes(invalid()) %">"%= msg %"</p>
  <form action="%= action %" method="post">
    <span class="%= templ.Classes(cell()) %"
      ><input type="text" value="%= t.name %" name="name"
    /></span>
    <span class="%= templ.Classes(cell()) %"
      ><input type="text" value="%= t.description %" name="description"
    /></span>
    <span class="%= templ.Classes(cell()) %"
      >Done?
      <input
        type="checkbox"
        value="true"
        name="status"
        checked?="%= t.status %"
    /></span>
    <span class="%= templ.Classes(cell()) %"
      ><input type="submit" value="Submit"
    /></span>
  </form>
</div>

[a-h]

I see your point. It would look nicer to have the <span> elements broken up.

[joerdav]

I think my expectation of what would happen was just wrong, having it all on one line is a valid approach.

Potentially better?? Is what html-tidy.org does, but also arguably not too readable still.

<div>
    <p class="%= templ.Classes(invalid()) %">"%= msg %"</p>

    <form action="%=%20action%20%" method="post">
      <span class="%= templ.Classes(cell()) %"><input type="text"
      value="%= t.name %" name="name"></span> <span class=
      "%= templ.Classes(cell()) %"><input type="text" value=
      "%= t.description %" name="description"></span> <span class=
      "%= templ.Classes(cell()) %">Done? <input type="checkbox"
      value="true" name="status"></span> <span class=
      "%= templ.Classes(cell()) %"><input type="submit" value=
      "Submit"></span>
    </form>
  </div>

[a-h]

Just testing this, because I made a few updates to the formatting in v2 syntax.

The input...

package testrawelements

templ form(action string, t todo, msg string) {
        <div>
                <p class={ templ.Classes(invalid()) }>{ msg }</p>
                <form action={ action } method="post">
                    <span class={ templ.Classes(cell()) }><input type="text" value={ t.name } name="name"/></span>
                    <span class={ templ.Classes(cell()) }><input type="text" value={ t.description } name="description"/></span>
                    <span class={ templ.Classes(cell()) }>Done? <input type="checkbox" value="true" name="status" checked?={ t.status }/></span> 
                    <span class={ templ.Classes(cell()) }><input type="submit" value="Submit"/></span>
                </form>
        </div>
}

With <span> elements, they all get put onto one line.

package testrawelements

templ form(action string, t todo, msg string) {
	<div>
		<p class={ templ.Classes(invalid()) }>{ msg }</p>
		<form action={ action } method="post"><span class={ templ.Classes(cell()) }><input type="text" value={ t.name } name="name"/></span><span class={ templ.Classes(cell()) }><input type="text" value={ t.description } name="description"/></span><span class={ templ.Classes(cell()) }>Done? <input type="checkbox" value="true" name="status" checked?={ t.status }/></span><span class={ templ.Classes(cell()) }><input type="submit" value="Submit"/></span></form>
	</div>
}

But if I convert the <span> elements to <div> elements it comes out perfect.

package testrawelements

templ form(action string, t todo, msg string) {
	<div>
		<p class={ templ.Classes(invalid()) }>{ msg }</p>
		<form action={ action } method="post">
			<div class={ templ.Classes(cell()) }><input type="text" value={ t.name } name="name"/></div>
			<div class={ templ.Classes(cell()) }><input type="text" value={ t.description } name="description"/></div>
			<div class={ templ.Classes(cell()) }>Done? <input type="checkbox" value="true" name="status" checked?={ t.status }/></div>
			<div class={ templ.Classes(cell()) }><input type="submit" value="Submit"/></div>
		</form>
	</div>
}

I think the formatting makes sense, since in the output, block elements start a new line, whereas inline don't. I'll close this, feel free to re-open it if you think there's more to do.