all repos — gomponents @ 3b7dceab897709fe8243c605adea90ee771c49ff

HTML components in pure Go

Streamline HTML element API (#66) There were a lot of elements previously, like `Em`, `H1`, and a lot more, that took a string as the first argument previously. This was weird when you wanted to mix elements to output html like `<strong><em>…</em></strong>` or `<h1>Something <em>something</em> something</h1>`. gomponents is not an HTML validator, so I want people to be able to use elements however they please, also without text content. This also means that all elements now have the same API.

Markus Wüstenberg
commit

3b7dceab897709fe8243c605adea90ee771c49ff

parent

5d2f0f1b87aff69edf5b3a993afbb1ae2db946d0

4 files changed, 92 insertions(+), 104 deletions(-)

changed files
M components/documents.go → components/documents.go
@@ -23,7 +23,7 @@ HTML(g.If(p.Language != "", Lang(p.Language)),
 			Head(
 				Meta(Charset("utf-8")),
 				Meta(Name("viewport"), Content("width=device-width, initial-scale=1")),
-				TitleEl(p.Title),
+				TitleEl(g.Text(p.Title)),
 				g.If(p.Description != "", Meta(Name("description"), Content(p.Description))),
 				g.Group(p.Head),
 			),
M examples/simple/simple.go → examples/simple/simple.go
@@ -42,7 +42,7 @@ Navbar(p.path, []PageLink{
 				{Path: "/foo", Name: "Foo"},
 				{Path: "/bar", Name: "Bar"},
 			}),
-			H1(p.title),
+			H1(g.Text(p.title)),
 			P(g.Textf("Welcome to the page at %v.", p.path)),
 		},
 	})
M html/elements.go → html/elements.go
@@ -307,122 +307,122 @@ func Wbr(children ...g.Node) g.Node {
 	return g.El("wbr", children...)
 }
 
-func Abbr(text string, children ...g.Node) g.Node {
-	return g.El("abbr", g.Text(text), g.Group(children))
+func Abbr(children ...g.Node) g.Node {
+	return g.El("abbr", g.Group(children))
 }
 
-func B(text string, children ...g.Node) g.Node {
-	return g.El("b", g.Text(text), g.Group(children))
+func B(children ...g.Node) g.Node {
+	return g.El("b", g.Group(children))
 }
 
-func Caption(text string, children ...g.Node) g.Node {
-	return g.El("caption", g.Text(text), g.Group(children))
+func Caption(children ...g.Node) g.Node {
+	return g.El("caption", g.Group(children))
 }
 
-func Dd(text string, children ...g.Node) g.Node {
-	return g.El("dd", g.Text(text), g.Group(children))
+func Dd(children ...g.Node) g.Node {
+	return g.El("dd", g.Group(children))
 }
 
-func Del(text string, children ...g.Node) g.Node {
-	return g.El("del", g.Text(text), g.Group(children))
+func Del(children ...g.Node) g.Node {
+	return g.El("del", g.Group(children))
 }
 
-func Dfn(text string, children ...g.Node) g.Node {
-	return g.El("dfn", g.Text(text), g.Group(children))
+func Dfn(children ...g.Node) g.Node {
+	return g.El("dfn", g.Group(children))
 }
 
-func Dt(text string, children ...g.Node) g.Node {
-	return g.El("dt", g.Text(text), g.Group(children))
+func Dt(children ...g.Node) g.Node {
+	return g.El("dt", g.Group(children))
 }
 
-func Em(text string, children ...g.Node) g.Node {
-	return g.El("em", g.Text(text), g.Group(children))
+func Em(children ...g.Node) g.Node {
+	return g.El("em", g.Group(children))
 }
 
-func FigCaption(text string, children ...g.Node) g.Node {
-	return g.El("figcaption", g.Text(text), g.Group(children))
+func FigCaption(children ...g.Node) g.Node {
+	return g.El("figcaption", g.Group(children))
 }
 
-func H1(text string, children ...g.Node) g.Node {
-	return g.El("h1", g.Text(text), g.Group(children))
+func H1(children ...g.Node) g.Node {
+	return g.El("h1", g.Group(children))
 }
 
-func H2(text string, children ...g.Node) g.Node {
-	return g.El("h2", g.Text(text), g.Group(children))
+func H2(children ...g.Node) g.Node {
+	return g.El("h2", g.Group(children))
 }
 
-func H3(text string, children ...g.Node) g.Node {
-	return g.El("h3", g.Text(text), g.Group(children))
+func H3(children ...g.Node) g.Node {
+	return g.El("h3", g.Group(children))
 }
 
-func H4(text string, children ...g.Node) g.Node {
-	return g.El("h4", g.Text(text), g.Group(children))
+func H4(children ...g.Node) g.Node {
+	return g.El("h4", g.Group(children))
 }
 
-func H5(text string, children ...g.Node) g.Node {
-	return g.El("h5", g.Text(text), g.Group(children))
+func H5(children ...g.Node) g.Node {
+	return g.El("h5", g.Group(children))
 }
 
-func H6(text string, children ...g.Node) g.Node {
-	return g.El("h6", g.Text(text), g.Group(children))
+func H6(children ...g.Node) g.Node {
+	return g.El("h6", g.Group(children))
 }
 
-func I(text string, children ...g.Node) g.Node {
-	return g.El("i", g.Text(text), g.Group(children))
+func I(children ...g.Node) g.Node {
+	return g.El("i", g.Group(children))
 }
 
-func Ins(text string, children ...g.Node) g.Node {
-	return g.El("ins", g.Text(text), g.Group(children))
+func Ins(children ...g.Node) g.Node {
+	return g.El("ins", g.Group(children))
 }
 
-func Kbd(text string, children ...g.Node) g.Node {
-	return g.El("kbd", g.Text(text), g.Group(children))
+func Kbd(children ...g.Node) g.Node {
+	return g.El("kbd", g.Group(children))
 }
 
-func Mark(text string, children ...g.Node) g.Node {
-	return g.El("mark", g.Text(text), g.Group(children))
+func Mark(children ...g.Node) g.Node {
+	return g.El("mark", g.Group(children))
 }
 
-func Q(text string, children ...g.Node) g.Node {
-	return g.El("q", g.Text(text), g.Group(children))
+func Q(children ...g.Node) g.Node {
+	return g.El("q", g.Group(children))
 }
 
-func S(text string, children ...g.Node) g.Node {
-	return g.El("s", g.Text(text), g.Group(children))
+func S(children ...g.Node) g.Node {
+	return g.El("s", g.Group(children))
 }
 
-func Samp(text string, children ...g.Node) g.Node {
-	return g.El("samp", g.Text(text), g.Group(children))
+func Samp(children ...g.Node) g.Node {
+	return g.El("samp", g.Group(children))
 }
 
-func Small(text string, children ...g.Node) g.Node {
-	return g.El("small", g.Text(text), g.Group(children))
+func Small(children ...g.Node) g.Node {
+	return g.El("small", g.Group(children))
 }
 
-func Strong(text string, children ...g.Node) g.Node {
-	return g.El("strong", g.Text(text), g.Group(children))
+func Strong(children ...g.Node) g.Node {
+	return g.El("strong", g.Group(children))
 }
 
-func Sub(text string, children ...g.Node) g.Node {
-	return g.El("sub", g.Text(text), g.Group(children))
+func Sub(children ...g.Node) g.Node {
+	return g.El("sub", g.Group(children))
 }
 
-func Sup(text string, children ...g.Node) g.Node {
-	return g.El("sup", g.Text(text), g.Group(children))
+func Sup(children ...g.Node) g.Node {
+	return g.El("sup", g.Group(children))
 }
 
-func Time(text string, children ...g.Node) g.Node {
-	return g.El("time", g.Text(text), g.Group(children))
+func Time(children ...g.Node) g.Node {
+	return g.El("time", g.Group(children))
 }
 
-func TitleEl(title string, children ...g.Node) g.Node {
-	return g.El("title", g.Text(title), g.Group(children))
+func TitleEl(children ...g.Node) g.Node {
+	return g.El("title", g.Group(children))
 }
 
-func U(text string, children ...g.Node) g.Node {
-	return g.El("u", g.Text(text), g.Group(children))
+func U(children ...g.Node) g.Node {
+	return g.El("u", g.Group(children))
 }
 
-func Var(text string, children ...g.Node) g.Node {
-	return g.El("var", g.Text(text), g.Group(children))
+func Var(children ...g.Node) g.Node {
+	return g.El("var", g.Group(children))
 }
M html/elements_test.go → html/elements_test.go
@@ -30,36 +30,55 @@
 func TestSimpleElements(t *testing.T) {
 	cases := map[string]func(...g.Node) g.Node{
 		"a":          A,
+		"abbr":       Abbr,
 		"address":    Address,
 		"article":    Article,
 		"aside":      Aside,
 		"audio":      Audio,
+		"b":          B,
 		"blockquote": BlockQuote,
 		"body":       Body,
 		"button":     Button,
 		"canvas":     Canvas,
+		"caption":    Caption,
 		"cite":       Cite,
 		"code":       Code,
 		"colgroup":   ColGroup,
 		"data":       DataEl,
 		"datalist":   DataList,
+		"dd":         Dd,
+		"del":        Del,
 		"details":    Details,
+		"dfn":        Dfn,
 		"dialog":     Dialog,
 		"div":        Div,
 		"dl":         Dl,
+		"dt":         Dt,
+		"em":         Em,
 		"fieldset":   FieldSet,
+		"figcaption": FigCaption,
 		"figure":     Figure,
 		"footer":     Footer,
 		"form":       FormEl,
+		"h1":         H1,
+		"h2":         H2,
+		"h3":         H3,
+		"h4":         H4,
+		"h5":         H5,
+		"h6":         H6,
 		"head":       Head,
 		"header":     Header,
 		"hgroup":     HGroup,
 		"html":       HTML,
+		"i":          I,
 		"iframe":     IFrame,
+		"ins":        Ins,
+		"kbd":        Kbd,
 		"label":      Label,
 		"legend":     Legend,
 		"li":         Li,
 		"main":       Main,
+		"mark":       Mark,
 		"menu":       Menu,
 		"meter":      Meter,
 		"nav":        Nav,

@@ -72,12 +91,19 @@ "p":          P,
 		"picture":    Picture,
 		"pre":        Pre,
 		"progress":   Progress,
+		"q":          Q,
+		"s":          S,
+		"samp":       Samp,
 		"script":     Script,
 		"section":    Section,
 		"select":     Select,
+		"small":      Small,
 		"span":       Span,
+		"strong":     Strong,
 		"style":      StyleEl,
+		"sub":        Sub,
 		"summary":    Summary,
+		"sup":        Sup,
 		"svg":        SVG,
 		"table":      Table,
 		"tbody":      TBody,

@@ -86,8 +112,12 @@ "textarea":   Textarea,
 		"tfoot":      TFoot,
 		"th":         Th,
 		"thead":      THead,
+		"time":       Time,
+		"title":      TitleEl,
 		"tr":         Tr,
+		"u":          U,
 		"ul":         Ul,
+		"var":        Var,
 	}
 
 	for name, fn := range cases {

@@ -122,45 +152,3 @@ assert.Equal(t, fmt.Sprintf(`<%v id="hat">`, name), n)
 		})
 	}
 }
-
-func TestTextElements(t *testing.T) {
-	cases := map[string]func(string, ...g.Node) g.Node{
-		"abbr":       Abbr,
-		"b":          B,
-		"caption":    Caption,
-		"dd":         Dd,
-		"del":        Del,
-		"dfn":        Dfn,
-		"dt":         Dt,
-		"em":         Em,
-		"figcaption": FigCaption,
-		"h1":         H1,
-		"h2":         H2,
-		"h3":         H3,
-		"h4":         H4,
-		"h5":         H5,
-		"h6":         H6,
-		"i":          I,
-		"ins":        Ins,
-		"kbd":        Kbd,
-		"mark":       Mark,
-		"q":          Q,
-		"s":          S,
-		"samp":       Samp,
-		"small":      Small,
-		"strong":     Strong,
-		"sub":        Sub,
-		"sup":        Sup,
-		"time":       Time,
-		"title":      TitleEl,
-		"u":          U,
-		"var":        Var,
-	}
-
-	for name, fn := range cases {
-		t.Run(fmt.Sprintf("should output %v", name), func(t *testing.T) {
-			n := fn("hat", g.Attr("id", "hat"))
-			assert.Equal(t, fmt.Sprintf(`<%v id="hat">hat</%v>`, name, name), n)
-		})
-	}
-}