What’s the best way to derive values from props?

[gabrielvincent]

In React it's very common to do something like:

function MyComponent() {
    const world = "World";
    return <span>Hello {world}</span>
}

My mental model for writing components is that a component is a function with its own context. But this is not valid with Templ:

templ MyComponent() {
    world := "World"
    <span>Hello {world}</span>

}

This makes it more difficult to derive values from props. I can't do this, for example:

templ OrdersList(orders []Order) {
    totalValue := 0
    for _, order := range orders {
        totalValue += order.Value
    }

    <span>Total: ${ strconv.Itoa(totalValue) }</span>
    <ul>
        for _, order := range orders {
            <li>{order.OrderNumber}</li>
        }
    </ul>
}

What is the most ergonomic way to derive values from props?

[gabrielvincent]

After trying a few different things, I think this is a pattern I can work with:

Define a templ component that will do the rendering:

type OrdersListProps struct {
	orders     []Order
	totalValue int
}

templ RenderOrdersList(props OrdersListProps) {
	<span>Total: ${ strconv.Itoa(props.totalValue) }</span>
	<ul>
		for _, order := range props.orders {
			<li>{ order.OrderNumber }</li>
		}
	</ul>
}

The actual component, the one we will import in other components, is a regular function. Because it returns a templ.Component, the import syntax can be used with it.

// This is a regular function
func OrdersList(orders []Order) templ.Component {
	totalValue := 0
	for _, order := range orders {
		totalValue += order.Value
	}
	return RenderOrdersList(OrdersListProps{orders, totalValue})
}

templ OrdersPage() {
	<h1>Orders</h1>
	// We can use the import syntax here!
	@OrdersList(ctx.Value("orders").([]Order))
}

Any thoughts on this approach?

[joerdav]

I like that this separates logic from the template itself, very nice approach.

Depending on your preferences you could also in this example just use a function to transform your model:

// This is a regular function
func totalValue(orders []Order) int {
	totalValue := 0
	for _, order := range orders {
		totalValue += order.Value
	}
	return totalValue
}

templ OrdersPage(orders []Order) {
    <span>Total: ${ strconv.Itoa(totalValue(orders)) }</span>
    <ul>
        for _, order := range orders {
            <li>{order.OrderNumber}</li>
        }
    </ul>
}

There is also this issue which may make things easier for you once resolved: #109

[gabrielvincent]

That's what I've been doing up until now. I started looking for alternatives to that because I thought "ok, what if I need to use the value I'm deriving from this prop in multiple places in my component"? In that case, I didn't want to recompute the value. Take this silly component for an example:

func getFullName(firstName string, lastName string) {
    return firstName + " " + lastName
}

templ FullNameComponent(firstName string, lastName string) {
    Hello, {firstName}! You full name is { getFullName(firstName, lastName) } and I won't ever get tired of saying that it is { getFullName(firstName, lastName) }. I could go all day long telling anyone who's interested that your full name is { getFullName(firstName, lastName) }. Btw, did you know that your full name is { getFullName(firstName, lastName) }?
}

In this case, recomputing the full name won't have a huge impact in performance, but what if we start working with functions a little heavier? Then computing it only once and reusing that value would be the best option.

Nice to see that this is being discussed already!

[AlexanderArvidsson]

Another alternative approach is to abuse if statements:

func sumTotalValue(orders []Order) int {
	totalValue := 0
	for _, order := range orders {
		totalValue += order.Value
	}
	return totalValue
}

templ OrdersList(orders []Order) {
    if totalValue := sumTotalValue(orders); true {
        <span>Total: ${ strconv.Itoa(totalValue) }</span>
        <ul>
            for _, order := range orders {
                <li>{order.OrderNumber}</li>
            }
        </ul>
        <div>And again: ${ strconv.Itoa(totalValue) }</div>
    }
}

Not the most fun to work with, but it works. I would much appreciate support for defining variables in template functions, but I understand being hesitant to introduce logic into the templates.
I've been avoiding adding logic in my templates and instead passing view models to my templates.
Do the calculations in Go, pass the full view model, with everything needed for templating, into the template.

[gabrielvincent]

Yes, the abuse of if statements can be a good workaround for simple components, but for more complex cases, I wouldn't want to nest sections of a component too deeply just so I can have some sort of support for variables. I think the view models solution is the bast for me so far.