Conditional attributes not working as expected with "if {} else if {}"

[BlackMael]

I have the following template

package ifelseif

templ render(d data) {
	<!-- Treats the if else if... -->
	<div
		if d.IsTrue() {
			class="true"
		} else if true || d.IsTrue() {
			class="also true"
		}
	>
		{ "If {} Else If {}" }
	</div>
	<!-- ...as if it was a simple if followed by a separate if -->
	<div
		if d.IsTrue() {
			class="true"
		} 
		if true || d.IsTrue() {
			class="also true"
		}
	>
		{ "If {} 'else' If {}" }
	</div>
}

It doesn't handle the else if as expected.

It treats the code as if it were two distinct if statements with a static else string between them.

The generated code for the first div looks as follows.

		if d.IsTrue() {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"true\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" else")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		if true || d.IsTrue() {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"also true\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}

Rendered looks like this

<!-- Treats the if else if... -->
<div class="true" else="" class="also true">
 If {} Else If {}
</div>

If expecting the class attribute to appear only once and definitely no else attribute.

Is this something temple generate is likely to handle or should I just extract out the logic into a function?

NOTE: This test example is only making a single attribute conditional at a time but the goal is to have any number of attributes within the execution block.

For example..

templ render(d data) {
	<div
		if d.IsTrue() {
			class="block max-w-40"
                        data-result="win" 
		} else if true || d.IsTrue() {
			class="block w-full"
		}
	>
		{ "Some random output" }
	</div>

Another note... Just to complicate things, the whole conditional attributes are also within a for loop.

Another contrived example..

templ render(d data) {
	for _, item := range d.Collection {
		<div
			if item.IsTrue() {
				class="block max-w-40"
	                        data-result="win" 
			} else if true || item.IsTrue() {
				class="block w-full"
			}
		>
			{ item.Name }
		</div>
	}
}

So it seems my plan to extract the logic into a func return templ.Attributes fails too since it is in the middle of a for loop

templ render(d data) {
	for _, item := range d.Collection {
		<div { getAttr(item)... }>
			{ item.Name }
		</div>
	}
}

func getAttr(item DataItem) templ.Attributes {
	// Keeping it simple
	if item.IsTrue() {
		return templ.Attributes{
			"class": "block",
			"data-result": "win",
		}
	} else {
		return templ.Attributes{
			"class": "block w-full",
		}
	}
}

My next trick is to extract the div into its own templ component so the conditional attributes are no longer directly within the for loop.

[BlackMael]

I have taken a crack at adding the functionality of handling an else if in Conditional Attributes.

For example.

package ifelseif

templ render(d data) {
	<!-- if block should be used -->
	<div
		if true {
			class="t1-if-block"
		}
	>
		{ "if" }
	</div>
	<!-- else block should be used -->
	<div
		if d.IsTrue() {
			class="t4-if-block"
		} else {
			class="t4-else-block"
		}
	>
		{ "if else" }
	</div>
	<!-- else if block should be used -->
	<div
		if d.IsTrue() {
			class="t2-if-block"
		} else if true || d.IsTrue() {
			class="t2-else-if-block"
		}
	>
		{ "if else if" }
	</div>
	<!-- else block should be used -->
	<div
		if d.IsTrue() {
			class="t3-if-block"
		} else if d.IsTrue() {
			class="t3-else-if-block"
		} else {
			class="t3-else-block"
		}
	>
		{ "if else if else" }
	</div>
}

With my hacked version generates the following Go code...

// Code generated by templ - DO NOT EDIT.

// templ: version: v0.2.756
package ifelseif

//lint:file-ignore SA4006 This context is only used if a nested component is present.

import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"

func render(d data) templ.Component {
	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
		if !templ_7745c5c3_IsBuffer {
			defer func() {
				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
				if templ_7745c5c3_Err == nil {
					templ_7745c5c3_Err = templ_7745c5c3_BufErr
				}
			}()
		}
		ctx = templ.InitializeContext(ctx)
		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
		if templ_7745c5c3_Var1 == nil {
			templ_7745c5c3_Var1 = templ.NopComponent
		}
		ctx = templ.ClearChildren(ctx)
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- if block should be used --><div")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		if true {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t1-if-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var2 string
		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs("if")
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `template.templ`, Line: 10, Col: 8}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><!-- else block should be used --><div")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		if d.IsTrue() {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t4-if-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		} else {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t4-else-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var3 string
		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("if else")
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `template.templ`, Line: 20, Col: 13}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><!-- else if block should be used --><div")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		if d.IsTrue() {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t2-if-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		} else if true || d.IsTrue() {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t2-else-if-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var4 string
		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("if else if")
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `template.templ`, Line: 30, Col: 16}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><!-- else block should be used --><div")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		if d.IsTrue() {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t3-if-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		} else if d.IsTrue() {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t3-else-if-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		} else {
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"t3-else-block\"")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var5 string
		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("if else if else")
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `template.templ`, Line: 42, Col: 21}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return templ_7745c5c3_Err
	})
}

var _ = templruntime.GeneratedTemplate

I'm going to test it out on my little side project but so far it is looking promising. It seems to be getting all the ifs, else ifs and elses in the right spots now.

templ fmt doesn't seem to be broken either, but still a bit of testing to do.

I'm very new to Go, and there was one func that I didn't truly understand... copyAttributes in the generator.go file.

func copyAttributes(attr []parser.Attribute) []parser.Attribute {
	o := make([]parser.Attribute, len(attr))
	for i, a := range attr {
		if c, ok := a.(parser.ConditionalAttribute); ok {
			c.Then = copyAttributes(c.Then)
			c.ElseIfs = copyElseIfs(c.ElseIfs)
			c.Else = copyAttributes(c.Else)
			o[i] = c
			continue
		}
		o[i] = a
	}
	return o
}

func copyElseIfs(attr []parser.ElseIfAttribute) []parser.ElseIfAttribute {
	clone := make([]parser.ElseIfAttribute, len(attr))
	copy(clone, attr)
	for _, c := range clone {
		c.Then = copyAttributes(c.Then)
	}
	return clone
}

Since I added the ElseIfs field to track the Attributes for each found else if, I wasn't sure how to properly clone the Attribute array with the extra field. There is probably a better way to define the ElseIfAttribute to fit more in like an ConditionalAttribute.

type ConditionalAttribute struct {
	Expression Expression
	Then       []Attribute
	ElseIfs    []ElseIfAttribute
	Else       []Attribute
}

type ElseIfAttribute struct {
	Expression Expression
	Then       []Attribute
}