Is it possible to check if a component received children?

[gabrielvincent]

I need to check if the component has received children so I can conditionally render some thing. This is my use case. I want to set a attribute with different values depending on the value of children.

templ LazyComponent(lazyID string) {
	{{
	status := "loading"
	if children != nil {
		status = "loaded"
	}
	}}
	<div
		data-lazy-id={ lazyID }
		data-lazy-status={ status }
	>
		{ children... }
	</div>
}

[joerdav]

Hi, sorry it's not immediately obvious!

You can access the children of a component without rendering using templ.GetChildren(ctx), you can nil check that.

[gabrielvincent]

I did try that as I found that method searching the _templ.go file. However, checking for nil against getChildren(ctx) always return false.

For example, this:

templ LazyComponent(lazyID string) {
  {{
  ch := templ.GetChildren(ctx)
  fmt.Println("--- is children nil? ", ch == nil)
  }}
  <div
    data-lazy-id={ lazyID }
  >
    { children... }
  </div>
}

templ Facts(facts []string) {
  if facts == nil {
        // No children
    @LazyComponent("facts")
  } else {
        // Yes children
    @LazyComponent("facts") {
      <ul id="facts-list" class="w-full flex flex-col gap-2">
        if facts != nil {
          for idx, fact := range facts {
            @Fact(fact, idx+1)
          }
        }
      </ul>
    }
  }
}


templ Index() {
  @layout() {
    <div class="p-8">
      <h1 class="mb-4 font-bold text-3xl">Cat Facts</h1>
      @Facts(nil)
    </div>
  }
}

When Index is rendered, I see the log --- is children nil? false. But since in Index I render the Facts component passing nil to it, my expectation was that I'd see --- is children nil? true.

[gabrielvincent]

@joerdav I created a minimal repo where this can be reproduced.

There are only two relevant source files in it.

components/compoents.templ

package components

templ Component() {
    {{
    ch := templ.GetChildren(ctx)
    hasChildren := ch != nil
    var text string
    if hasChildren {
        text = "I have children! Here they are:"
    } else {
        text = "I don't have children."
    }
    }}
    <p>{ text }</p>
    <div>
        { children... }
    </div>
}

templ Index() {
    <h1>Childless</h1>
    @Component()
    <h1>Childful</h1>
    @Component() {
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
    }
}

main.go

package main

import (
    components "children/components"
    "context"
    "os"
)

func main() {
    ctx := context.Background()
    components.Index().Render(ctx, os.Stdout)
}

Running this code, I get the following HTML:

<h1>Childless</h1>
<p>I have children! Here they are:</p>
<div></div>

<h1>Childful</h1>
<p>I have children! Here they are:</p>
<div>
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

As you can see, even though the first instance of Component doesn't include children, templ.GetChildren returns a non-nil value and the message "I have children! Here they are:" is displayed. Am I missing something here? Should I open an issue with this?

[joerdav]

Ah you are correct, my mistake! At the start of each template the children are extracted and cleared so that templates rendered within don't recieve the children too.

I think we would have to make a change to support this. Currently, children are stored in an arbitrarily named variable in the generated code. Potentially the answer is to create another case where we reserve a variable name for templ to use similar to ctx how it isn't passed in but is accessible. This could be a breaking change though, what are your thoughts on this @a-h ?