From 3b7dceab897709fe8243c605adea90ee771c49ff Mon Sep 17 00:00:00 2001
From: Markus Wüstenberg
Date: Wed, 5 May 2021 09:03:16 +0200
Subject: 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 `…` or `Something something something
`. 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.---
components/documents.go | 2 +-
examples/simple/simple.go | 2 +-
html/elements.go | 120 +++++++++++++++++++++++-----------------------
html/elements_test.go | 72 ++++++++++++----------------
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`, name, name), n)
- })
- }
-}
--
cgit 1.4.1