Giter Site home page Giter Site logo

Comments (5)

markuswustenberg avatar markuswustenberg commented on June 16, 2024 1

@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.

from gomponents.

ddouglas avatar ddouglas commented on June 16, 2024

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

from gomponents.

markuswustenberg avatar markuswustenberg commented on June 16, 2024

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?

from gomponents.

ddouglas avatar ddouglas commented on June 16, 2024

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.

from gomponents.

eduardolat avatar eduardolat commented on June 16, 2024

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())
	})
}

from gomponents.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.