Comments (5)
@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.
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.
Hi @ddouglas. Thank you for raising this issue!
Basically, it's because rendering a group of Node
s 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.
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.
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)
- Fragments HOT 6
- Links? HOT 1
- Why g.Map doesn't also do g.Group? HOT 2
- Generics g.Map performance HOT 7
- Use Custom attributes & alpine js HOT 3
- component specific css and js HOT 6
- Use with tinygo HOT 3
- Merge multiple occurrences of the `class` attribute HOT 5
- Proposal: Re-export packages with shorter names (g, h, c) HOT 3
- Inline if with nil pointer HOT 7
- Add lib to awesome Go HOT 1
- Remove fmt.Stringer support? HOT 1
- Handling internationalization HOT 8
- trigger an error on duplicate attributes HOT 3
- Make Group renderable
- Proposal to Add String Rendering Method to Node Interface HOT 5
- HTML -> gomponents converter tool HOT 2
- Label can be an attribute as well HOT 2
- Missing list attribute HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gomponents.