struct components

[smithamax]

I've playing with using struct literals as components, and wondered if anyone is doing the same. Also is there any reason not to use this as a pattern

Example

package dev

import (
	"context"
	"io"
)

type field struct {
	Label    string
	Name     string
	Type     string
	Value    string
	Required bool
}

templ (f field) Component() {
	<label for={ f.Name }>{ f.Label }:</label>
	<br/>
	<input
		if f.Type != "" {
			type={ f.Type }
		}
		name={ f.Name }
		value={ f.Value }
		required?={ f.Required }
	/>
	<br/>
}

func (f field) Render(ctx context.Context, w io.Writer) error {
	return f.Component().Render(ctx, w)
}

Then

templ loginForm {
	<form action="/login" method="post">
		@field{Label: "Username", Name: "username", Required: true}
		@field{Label: "Password", Name: "password", Type: "password", Required: true}
		<button type="submit">Provision Reader</button>
	</form>
}

One downside is that it seems to break syntax highlighting in vscode 😆

[pharrisee]

What you've done is very similar to what @joerdav did here (excepting the constructor methods, which I also prefer):

#805

So I'd say you're on to something decent.

I use very similar patterns myself.

[smithamax]

Yeah I initially went with a constructor, but felt a bit verbose calling it with an object of almost the same name every time

[a-h]

Yes, this is totally legit. 😀

[Riu]

@smithamax yes, we are using - https://github.com/hanariu/hanariu

[smithamax]

Do you have examples, all the components I've looked at in hanariu use func constructors

[pharrisee]

I'm not sure if this is just me or not, but using the mechanism you specified above:

@field{Label: "Username", Name: "username", Required: true}

Makes it slightly difficult to use children, as it gives an error when compiling the templ code to Go:

@field{Label: "Username", Name: "username", Required: true} {
    <span>Hello World!</span>
}

I did manage to get around the issue by rewriting the code to look like this:

@(field{Label: "Username", Name: "username", Required: true}) {
    <span>Hello World!</span>
}

Which, whilst it works, looks all kinds of weird to me.

Can anyone else verify the error I see when the code looks like the below?

@field{Label: "Username", Name: "username", Required: true} {
    <span>Hello World!</span>
}

[smithamax]

Hadn't tired this, good to know. Yes I also get expected ';', found '{' when not wrapping in parens