Repository: maragudk/gomponents
Pull request #66 (2021-05-04 14:10:30)

Streamline HTML element API
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.

codecov[bot]: # [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/66?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) Report
> Merging [#66](https://codecov.io/gh/maragudk/gomponents/pull/66?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) (6ceaba2) into [master](https://codecov.io/gh/maragudk/gomponents/commit/5d2f0f1b87aff69edf5b3a993afbb1ae2db946d0?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) (5d2f0f1) will **not change** coverage.
> The diff coverage is `100.00%`.

> :exclamation: Current head 6ceaba2 differs from pull request most recent head a42ead1. Consider uploading reports for the commit a42ead1 to get more accurate results
[![Impacted file tree graph](https://codecov.io/gh/maragudk/gomponents/pull/66/graphs/tree.svg?width=650&height=150&src=pr&token=JYN032TYAC&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk)](https://codecov.io/gh/maragudk/gomponents/pull/66?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk)

```diff
@@            Coverage Diff            @@
##            master       #66   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            6         6           
  Lines          244       244           
=========================================
  Hits           244       244           
```


| [Impacted Files](https://codecov.io/gh/maragudk/gomponents/pull/66?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) | Coverage Δ | |
|---|---|---|
| [components/documents.go](https://codecov.io/gh/maragudk/gomponents/pull/66/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk#diff-Y29tcG9uZW50cy9kb2N1bWVudHMuZ28=) | `100.00% <100.00%> (ø)` | |
| [html/elements.go](https://codecov.io/gh/maragudk/gomponents/pull/66/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk#diff-aHRtbC9lbGVtZW50cy5nbw==) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/maragudk/gomponents/pull/66?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/66?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk). Last update [5d2f0f1...a42ead1](https://codecov.io/gh/maragudk/gomponents/pull/66?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk).


Patch:
diff --git a/components/documents.go b/components/documents.go
index b9ab085..c7d8f8d 100644
--- a/components/documents.go
+++ b/components/documents.go
@@ -23,7 +23,7 @@ func HTML5(p HTML5Props) g.Node {
 			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),
 			),
diff --git a/examples/simple/simple.go b/examples/simple/simple.go
index a6877f5..93aa28f 100644
--- a/examples/simple/simple.go
+++ b/examples/simple/simple.go
@@ -42,7 +42,7 @@ func Page(p props) g.Node {
 				{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)),
 		},
 	})
diff --git a/html/elements.go b/html/elements.go
index ff6240b..918f6bd 100644
--- a/html/elements.go
+++ b/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))
 }


Test patch:
diff --git a/html/elements_test.go b/html/elements_test.go
index 83742c4..a85312c 100644
--- a/html/elements_test.go
+++ b/html/elements_test.go
@@ -30,36 +30,55 @@ func TestDoctype(t *testing.T) {
 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 @@ func TestSimpleElements(t *testing.T) {
 		"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 @@ func TestSimpleElements(t *testing.T) {
 		"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 @@ func TestSimpleVoidKindElements(t *testing.T) {
 		})
 	}
 }
-
-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)
-		})
-	}
-}