about summary refs log tree commit diff stats
diff options
context:
space:
mode:
authorMarkus Wüstenberg2021-05-05 09:03:16 +0200
committerGitHub2021-05-05 09:03:16 +0200
commit3b7dceab897709fe8243c605adea90ee771c49ff (patch)
tree78e5fd6151111dca6f60e9e365c79b897e0c4bca
parent5d2f0f1b87aff69edf5b3a993afbb1ae2db946d0 (diff)
downloadgomponents-3b7dceab897709fe8243c605adea90ee771c49ff.tar.lz
gomponents-3b7dceab897709fe8243c605adea90ee771c49ff.tar.zst
gomponents-3b7dceab897709fe8243c605adea90ee771c49ff.zip
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.
-rw-r--r--components/documents.go2
-rw-r--r--examples/simple/simple.go2
-rw-r--r--html/elements.go120
-rw-r--r--html/elements_test.go72
4 files changed, 92 insertions, 104 deletions
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))
 }
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)
-		})
-	}
-}