generator: Spread under attribute

[iamajoe]

There is a case where you might want to have a spread on an attribute.
Example:

<button class={ []string{"foo"}... }>Button</button>

This error comes in if i use this:

missing ',' in composite literal

If I generate like this instead:

<button class={ []string{"foo"}[0] }>Button</button>

Creates:

var templ_7745c5c3_Var2 = []any{[]string{"foo"}[0]}

Looking at the generation, it seems that supporting spread operator shouldn't be a problem. Some kind of parsing issue?!

[alehechka]

I think for this case, using strings.Join from the standard library would likely be the simpler option to support the result you're looking for.

<button class={ strings.Join([]string{"foo"}, " ") }>Button</button>

[iamajoe]

For that specific case yes but the problem appeared when i was trying to use templ.CSSClass on TemplUI. It would be possible to create a join in there but probably better to support the go spread syntax since there might exist other similar cases. In my opinion of course.

[joerdav]

@iamajoe Would the CSSClasses function work?

<button class={ templ.CSSClasses([]any{"foo"}...) }>Button</button>

This should work for slices of not only strings.

[iamajoe]

@iamajoe Would the CSSClasses function work?

<button class={ templ.CSSClasses([]any{"foo"}...) }>Button</button>

This should work for slices of not only strings.

Hm. I haven't tried. I will take a look. Still not the best solution in my opinion since it is one more abstraction you need to know on top of the syntax but I understand the difficulty in implementing what I am talking about.

[joerdav]

On the contrary, I think this is one less abstraction to remember.

A spread inside curly braces is not something you would see in Go { []string{"foo"}... }. Spread really is only used to spread into a variadic function such as templ.CSSClasses([]any{"foo"}...).

Although I do understand this requires knowledge of a new function.

[iamajoe]

type Props struct {
  ClassNames []string
  CSS []templ.CSSClass
}
// ...
<div class={ props.ClassNames, templ.CSSClasses(props.CSS...) }></div>

And the error:

invalid use of ... in conversion to templ.CSSClasses

I could use templ.Classes but it cant do a conversion from []templ.CSSClass to []any for some reason.

For this to function I had to do this nastiness:

func convertCSSClassToClasses(css ...templ.CSSClass) templ.CSSClasses {
	var cssClasses []any = make([]any, len(css))
	for i, v := range css {
		cssClasses[i] = v.(any)
	}

	return templ.Classes(cssClasses...)
}

I guess templ.Classes could be a generic. i could work on that if you want.

[joerdav]

I wouldn't be opposed to classes being generic.

Another approach would be to just support []templ.CSSClass in the css processor https://github.com/a-h/templ/blob/main/runtime.go#L178

That way you could do:

<div class={ props.ClassNames, props.CSS }></div>

You wouldn't even have to spread.