Why can't a group be rendered?

[ddouglas]

Why can't a group be rendered?

[markuswustenberg]

@ddouglas I'm glad you found a solution. I'm an HTMX fan myself, so maybe there's room for some helpers over at https://github.com/maragudk/gomponents-htmx 😊 . Let me know if you think of something.

[ddouglas]

An alternative that i'd also be excited about is to export the group type and it's children attribute so that we can use Group func programmatically and then access the underlying children to do the rendering ourselves

[markuswustenberg]

Hi @ddouglas. Thank you for raising this issue!

Basically, it's because rendering a group of Nodes without a parent element can be nonsensical, such as rendering attributes outside an element. Thus, a group could be rendered to class="foo"><span></span> or something like that, which I didn't want to support. In this way, the rendering is always handled inside the parent element, but the Node interface still needs to be satisfied. Perhaps it would make sense to lax this restriction to only panic on root-level attributes. I'll have to think about the consequences of that though.

I don't know about exporting it, I really like to keep the core API surface area minimal. Would you be able to achieve something similar with nested div elements or similar?

[ddouglas]

Thanks for clearing this up. That makes sense.

Unfortunately, wrapping it in a div violates the requirements of performing an out of band swap has each id that needs to be swapped must be a top level element, but returning multiple "top level" elements that aren't wrapped by a div still satisfies this contract:

<!-- This is okay -->
<div id="a">
</div>
<div id="b">
</div>

<!-- This is not -->
<div>
   <div id="a">
   </div>
   <div id="b">
   </div>
</div>

Regardless, we (i) don't expect you to make sweeping changes to the lib because HTMX is picking up steam this year. Thank you for this awesome lib.

[eduardolat]

I ran into exactly the same problem when trying to make pagination with HTMX, I made a help function for whoever needs it

package components

import (
	"bytes"

	"github.com/maragudk/gomponents"
)

// RenderableGroup renders a group of nodes without a parent element.
//
// This is because gomponents.Group() cannot be directly rendered and
// needs to be wrapped in a parent element.
func RenderableGroup(children []gomponents.Node) gomponents.Node {
	buf := bytes.Buffer{}
	for _, child := range children {
		err := child.Render(&buf)
		if err != nil {
			return gomponents.Raw("Error rendering group")
		}
	}
	return gomponents.Raw(buf.String())
}

And the tests:

package components

import (
	"bytes"
	"testing"

	"github.com/maragudk/gomponents"
	"github.com/maragudk/gomponents/html"
	"github.com/stretchr/testify/assert"
)

func TestRenderableGroupRenderer(t *testing.T) {
	t.Run("renders a group of string nodes without a parent element", func(t *testing.T) {
		gotRenderer := RenderableGroup([]gomponents.Node{
			gomponents.Text("foo"),
			gomponents.Text("bar"),
		})

		got := bytes.Buffer{}
		err := gotRenderer.Render(&got)
		assert.NoError(t, err)

		expected := "foobar"

		assert.Equal(t, expected, got.String())
	})

	t.Run("renders a group of tag nodes without a parent element", func(t *testing.T) {
		gotRenderer := RenderableGroup([]gomponents.Node{
			html.Span(
				gomponents.Text("foo"),
			),
			html.P(
				gomponents.Text("bar"),
			),
		})

		got := bytes.Buffer{}
		err := gotRenderer.Render(&got)
		assert.NoError(t, err)

		expected := `<span>foo</span><p>bar</p>`

		assert.Equal(t, expected, got.String())
	})
}