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 markus@maragu.dk
Wed, 05 May 2021 09:03:16 +0200
4 files changed, 92 insertions(+), 104 deletions(-)
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) - }) - } -}