An awesome Swift HTML DSL library using result builders.
import SwiftHtml let doc = Document(.html) { Html { Head { Title("Hello Swift HTML DSL") Meta().charset("utf-8") Meta().name(.viewport).content("width=device-width, initial-scale=1") Link(rel: .stylesheet).href("./css/style.css") } Body { Main { Div { Section { Img(src: "./images/swift.png", alt: "Swift Logo") .title("Picture of the Swift Logo") H1("Lorem ipsum") .class("red") P("Lorem ipsum dolor sit amet, consectetur adipiscing elit.") .class(["green", "blue"]) .spellcheck(false) } A("Download SwiftHtml now!") .href("https://github.com/binarybirds/swift-html/") .target(.blank) .download() Abbr("WTFPL") .title("Do What The Fuck You Want To Public License") } } .class("container") Script().src("./js/main.js").async() } } } let html = DocumentRenderer(minify: false, indent: 2).render(doc) print(html)You can simply use SwiftHtml as a dependency via the Swift Package Manager:
.package(url: "https://github.com/binarybirds/swift-html", from: "1.6.0"),Add the SwiftHtml product from the swift-html package as a dependency to your target:
.product(name: "SwiftHtml", package: "swift-html"),Import the framework:
import SwiftHtmlThat's it.
You can define your own custom tags by subclassing the Tag or EmptyTag class.
You can follow the same pattern if you take a look at the core tags.
open class Div: Tag { } // <div></div> - standard tag open class Br: EmptyTag { } // <br> - no closing tagBy default the name of the tag is automatically derived from the class name (lowercased), but you can also create your own tag type & name by overriding the createNode() class function.
open class LastBuildDate: Tag { open override class func createNode() -> Node { Node(type: .standard, name: "lastBuildDate") } } // <lastBuildDate></lastBuildDate> - standard tag with custom nameIt is also possible to create tags with altered content or default attributes.
open class Description: Tag { public init(_ contents: String) { super.init() setContents("<![CDATA[" + contents + "]]>") } } // <description><![CDATA[lorem ipsum]]></description> - content wrapped in CDATA open class Rss: Tag { public init(@TagBuilder _ builder: () -> Tag) { super.init(builder()) setAttributes([ .init(key: "version", value: "2.0"), ]) } } // <rss version="2.0">...</rss> - tag with a default attributeYou can set, add or delete the attributes of a given tag.
Leaf("example") // set (override) the current attributes .setAttributes([ .init(key: "a", value: "foo"), .init(key: "b", value: "bar"), .init(key: "c", value: "baz"), ]) // add a new attribute using a key & value .attribute("foo", "example") // add a new flag attribute (without a value) .flagAttribute("bar") // delete an attribute by using a key .deleteAttribute("b") // <leaf a="foo" c="baz" foo="example" bar></leaf>You can also manage the class atrribute through helper methods.
Span("foo") // set (override) class values .class("a", "b", "c") // add new class values .class(add: ["d", "e", "f"]) // add new class value if the condition is true .class(add: "b", true) /// remove multiple class values .class(remove: ["b", "c", "d"]) /// remove a class value if the condition is true .class(remove: "e", true) // <span class="a f"></span>You can create your own attribute modifier via an extension.
public extension Guid { func isPermalink(_ value: Bool = true) -> Self { attribute("isPermalink", String(value)) } }There are other built-in type-safe attribute modifiers available on tags.
You can come up with your own Tag composition system by introducing a new protocol.
protocol TagRepresentable { @TagBuilder func build() -> Tag } struct ListComponent: TagRepresentable { let items: [String] init(_ items: [String]) { self.items = items } func build() -> Tag { Ul { for item in items { Li(item) } } } } let tag = ListComponent(["a", "b", "c"]).build()This way it is also possible to extend the TagBuilder to support the new protocol.
extension TagBuilder { static func buildExpression(_ expression: Tag) -> Tag { expression } static func buildExpression(_ expression: TagRepresentable) -> Tag { expression.build() } }Sometimes you'll need extra parameters for the build function, so you have to call the build method by hand.
In those cases it is recommended to introduce a render function instead of using build.
let tag = WebIndexTemplate(ctx) { ListComponent(["a", "b", "c"]) .render(req) } .render(req)If you want to create a lightweight template engine for the Vapor web framework using SwiftHtml, you can see a working example inside the Feather CMS core repository.