README
¶
gomponents
gomponents are declarative view components in Go, that can render to HTML. gomponents aims to make it easy to build HTML pages of reusable components, without the use of a template language. Think server-side-rendered React, but without the virtual DOM and diffing.
The implementation is still incomplete, but usable. The API may change until version 1 is reached.
Check out the blog post gomponents: declarative view components in Go for background.
Usage
Get the library using go get:
go get -u github.com/maragudk/gomponents
Then do something like this:
package main
import (
"net/http"
g "github.com/maragudk/gomponents"
"github.com/maragudk/gomponents/attr"
"github.com/maragudk/gomponents/el"
)
func main() {
_ = http.ListenAndServe("localhost:8080", handler())
}
func handler() http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
page := Page("Hi!", r.URL.Path)
_ = g.Write(w, page)
}
}
func Page(title, path string) g.Node {
return el.Document(
el.HTML(
g.Attr("lang", "en"),
el.Head(
el.Title(title),
el.Style(g.Attr("type", "text/css"), g.Raw(".is-active{font-weight: bold}")),
),
el.Body(
Navbar(path),
el.H1(title),
el.P(g.Textf("Welcome to the page at %v.", path)),
),
),
)
}
func Navbar(path string) g.Node {
return g.El("nav",
el.A("/", attr.Classes{"is-active": path == "/"}, g.Text("Home")),
el.A("/about", attr.Classes{"is-active": path == "/about"}, g.Text("About")),
)
}
You could also use a page template to simplify your code a bit:
package main
import (
"net/http"
g "github.com/maragudk/gomponents"
"github.com/maragudk/gomponents/attr"
c "github.com/maragudk/gomponents/components"
"github.com/maragudk/gomponents/el"
)
func main() {
_ = http.ListenAndServe("localhost:8080", handler())
}
func handler() http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
page := Page("Hi!", r.URL.Path)
_ = g.Write(w, page)
}
}
func Page(title, path string) g.Node {
return c.HTML5(c.DocumentProps{
Title: title,
Language: "en",
Head: []g.Node{el.Style(g.Attr("type", "text/css"), g.Raw(".is-active{font-weight: bold}"))},
Body: []g.Node{
Navbar(path),
el.H1(title),
el.P(g.Textf("Welcome to the page at %v.", path)),
},
})
}
func Navbar(path string) g.Node {
return g.El("nav",
el.A("/", attr.Classes{"is-active": path == "/"}, g.Text("Home")),
el.A("/about", attr.Classes{"is-active": path == "/about"}, g.Text("About")),
)
}
For more complete examples, see the examples directory.
Documentation
¶
Overview ¶
Package gomponents provides declarative view components in Go, that can render to HTML. The primary interface is a Node, which has a single function Render, which should render the Node to a string. Furthermore, NodeFunc is a function which implements the Node interface by calling itself on Render. All DOM elements and attributes can be created by using the El and Attr functions. The package also provides a lot of convenience functions for creating elements and attributes with the most commonly used parameters. If they don't suffice, a fallback to El and Attr is always possible.
Index ¶
Constants ¶
const ( Outside = Placement(iota) Inside )
Variables ¶
This section is empty.
Functions ¶
Types ¶
type Node ¶
type Node interface {
Render() string
}
Node is a DOM node that can Render itself to a string representation.
type NodeFunc ¶
type NodeFunc func() string
NodeFunc is render function that is also a Node.
func El ¶
El creates an element DOM Node with a name and child Nodes. Use this if no convenience creator exists.
Source Files
Directories
¶
| Path | Synopsis |
|---|---|
|
Package attr provides shortcuts and helpers to common HTML attributes.
|
Package attr provides shortcuts and helpers to common HTML attributes. |
|
Package el provides shortcuts and helpers to common HTML elements.
|
Package el provides shortcuts and helpers to common HTML elements. |
|
examples
|
|