If you wish to make a end result builder in Swift, this text will enable you to take care of the commonest instances when making a DSL.
Swift
Swift end result builder fundamentals
The end result builder proposal (initially it was known as perform builders) was carried out in Swift 5.4. This function permits us to construct up a end result worth utilizing a sequence of elements. At first sight, you would possibly suppose, hey this appears like an array with a collection of components, besides the coma in between the objects, however nope, that is utterly totally different. However why is it good for us?
End result builder can be utilized to create fully new Area-Particular Languages (DSLs) inside Swift. Making a DSL has many benefits, since DSLs are normally tied to a particular downside, the syntax that you simply use to explain the language may be very light-weight, but highly effective and succesful. Since Swift DSLs are sort secure, it’s a lot safer to make use of one as an alternative of manually concatenate objects. Swift DSLs additionally permits us to make use of primary management flows inside these embedded micro-languages. 🤔
Let me provide you with an instance: you possibly can write HTML in Swift, you possibly can merely write out all of the tags and glue a bunch of String values collectively, however that would not be so secure, proper?
func buildWebpage(title: String, physique: String) -> String {
"""
<html>
<head>
<title>(title)</title>
</head>
<physique>
<h1>(title)</h1>
<h1>(physique)</h1>
</physique>
</html>
"""
}
let html = buildWebpage(title: "Lorem ipsum", physique: "dolor sit amet")
print(html)
We will all agree that that is ugly and the compiler will not enable you to detect the semantic points in any respect. Now if we change the next code with a DSL, we are going to vastly advantage of the Swift compiler options. Swift will give us sort security, so our code shall be much less error susceptible. A DSL can have many constraints and restrictions that’ll assist others to put in writing higher code. In our case the checklist of tags goes to be a predefined set of values, so you will not be capable of present a mistaken tag or miss the closing tag, in different phrases your DSL goes to be syntactically legitimate. After all you continue to can have logical errors, however that is at all times the case, it doesn’t matter what device you select. 🧠
import SwiftHtml
func buildWebpage(title: String, physique: String) -> String {
let doc = Doc(.unspecified) {
Html {
Head {
Title(title)
}
Physique {
H1(title)
P(physique)
}
}
}
return DocumentRenderer().render(doc)
}
As you possibly can see the snippet above appears far more Swifty and we have been additionally capable of take away the duplicate HTML closing tags from the code. We do not have to put in writing the characters in any respect and the compiler can sort examine all the things for us, so type-o accidents cannot occur. ✅
Earlier than you suppose that end result builders are simply syntactic sugar over underlying information sorts, I’ve to guarantee you that they’re way more advanced than this. It’s a particularly superior and highly effective function that you need to undoubtedly learn about.
You may create all types of end result builders, for instance I am utilizing them to construct validators, person interface components and format constraints. After all SGML (HTML, XML) and CSS can be an awesome use-case, however the checklist is countless. Let me present you methods to construct a easy end result builder.
Constructing a HTML tree construction
I’ll present you ways I created my SwiftHtml HTML DSL library, as a result of it was a enjoyable undertaking to work with and I’ve discovered lots about it, it is also going to switch the Leaf/Tau template in my future initiatives. The primary concept behind SwiftHtml was that I needed to comply with the HTML specs as carefully as attainable. So I’ve created a Node construction to symbolize a node contained in the doc tree.
public struct Node {
public enum `Sort` {
case commonplace
case remark
case empty
case group
}
public let sort: `Sort`
public let identify: String?
public let contents: String?
public init(sort: `Sort` = .commonplace,
identify: String? = nil,
contents: String? = nil) {
self.sort = sort
self.identify = identify
self.contents = contents
}
}
A node has 4 variants outlined by the Sort. A regular node will render as a normal HTML tag utilizing the identify and the contents. A remark will solely use the contents and empty tag will not have a closing tag and use the identify property as a tag identify. Lastly the group node shall be used to group collectively a number of nodes, it will not render something, it is only a grouping ingredient for different tags.
The trick in my resolution is that these Node objects solely include the visible illustration of a tag, however I’ve determined to separate the hierarchical relationship from this stage. That is why I truly launched a Tag class that may have a number of kids. In my earlier article I confirmed a number of methods to construct a tree construction utilizing Swift, I’ve experimented with all of the attainable options and my remaining alternative was to make use of reference sorts as an alternative of worth sorts. Do not hate me. 😅
open class Tag {
public var node: Node
public var kids: [Tag]
public init(_ node: Node, kids: [Tag] = []) {
self.node = node
self.kids = kids
}
}
Now that is how a Tag object appears like, it is fairly easy. It has an underlying node and a bunch of youngsters. It’s attainable to increase this tag and supply functionalities for all of the HTML tags, resembling the aptitude of including frequent attributes and I am additionally capable of create subclasses for the tags.
public remaining class Html: Tag {
public init(_ kids: [Tag]) {
tremendous.init(.init(sort: .commonplace, identify: "html", contents: nil), kids: kids)
}
}
public remaining class Head: Tag {
public init(_ kids: [Tag]) {
tremendous.init(.init(sort: .commonplace, identify: "head", contents: nil), kids: kids)
}
}
public remaining class Title: Tag {
public init(_ contents: String) {
tremendous.init(.init(sort: .commonplace, identify: "title", contents: contents))
}
}
public remaining class Physique: Tag {
public init(_ kids: [Tag]) {
tremendous.init(.init(sort: .commonplace, identify: "physique", contents: nil), kids: kids)
}
}
public remaining class H1: Tag {
public init(_ contents: String) {
tremendous.init(.init(sort: .commonplace, identify: "h1", contents: contents))
}
}
public remaining class P: Tag {
public init(_ contents: String) {
tremendous.init(.init(sort: .commonplace, identify: "p", contents: contents))
}
}
All proper, now we’re capable of initialize our Tag tree, however I warn you, it will look very awkward.
func buildWebpage(title: String, physique: String) -> Html {
Html([
Head([
Title(title),
]),
Physique([
H1(title),
P(body),
]),
])
}
It’s nonetheless not attainable to render the tree and the syntax isn’t so eye-catchy. It is time to make issues higher and we should always undoubtedly introduce some end result builders for good.
The anatomy of Swift end result builders
Now that we now have our information construction ready, we should always give attention to the DSL itself. Earlier than we dive in, I extremely advocate to rigorously learn the official proposal and watch this WWDC video about end result builders, since each assets are superb. 🤓
Constructing an array of components
The primary factor that I do not like about our earlier buildWebpage perform is that I’ve to consistently write brackets and comas, with a purpose to construct our construction. This may be simply eradicated by introducing a brand new end result builder for the Tag objects. We simply must mark an enum with the @resultBuilder attribute and supply a static buildBlock methodology with the given sort.
@resultBuilder
public enum TagBuilder {
public static func buildBlock(_ elements: Tag...) -> [Tag] {
elements
}
}
It will permit us to make use of a listing of elements within our DSL constructing blocks, however earlier than we might use it we even have to vary our particular HTML tag init strategies to reap the benefits of this newly created end result builder. Simply use a closure with the return sort that we wish to use and mark your entire perform argument with the @TagBuilder key phrase.
public remaining class Html: Tag {
public init(@TagBuilder _ builder: () -> [Tag]) {
tremendous.init(.init(sort: .commonplace, identify: "html", contents: nil), kids: builder())
}
}
public remaining class Head: Tag {
public init(@TagBuilder _ builder: () -> [Tag]) {
tremendous.init(.init(sort: .commonplace, identify: "head", contents: nil), kids: builder())
}
}
public remaining class Physique: Tag {
public init(@TagBuilder _ builder: () -> [Tag]) {
tremendous.init(.init(sort: .commonplace, identify: "physique", contents: nil), kids: builder())
}
}
Now we are able to refactor the construct webpage methodology since it might now use the underlying end result builder to assemble the constructing blocks primarily based on the elements. When you check out the introduction part contained in the proposal you may get a greater concept about what occurs beneath the hood.
func buildWebpage(title: String, physique: String) -> Html {
Html {
Head {
Title(title)
}
Physique {
H1(title)
P(physique)
}
}
}
let html = buildWebpage(title: "title", physique: "physique")
Anyway, it is fairly magical how we are able to rework our advanced array primarily based code into one thing clear and good by making the most of the Swift compiler. I really like this strategy, however there may be extra.
Optionals and additional construct blocks
If you wish to present if assist inside your DSL it’s important to implement some further strategies inside your end result builder object. Do that code, nevertheless it will not compile:
func buildWebpage(title: String, physique: String) -> Html {
Html {
Head {
Title(title)
}
Physique {
if title == "magic" {
H1(title)
P(physique)
}
}
}
}
The construct an elective end result with an if assertion we now have to consider what occurs right here. If the title is magic we wish to return an array of Tags, in any other case nil. So this could possibly be expressed as a [Tag]? sort however we at all times wish to have a bunch of [Tag] components, now that is simple.
@resultBuilder
public enum TagBuilder {
public static func buildBlock(_ elements: Tag...) -> [Tag] {
elements
}
public static func buildOptional(_ element: [Tag]?) -> [Tag] {
element ?? []
}
}
However wait, why is it not working? Properly, since we return an array of tags, however the outer Physique ingredient was anticipating Tag components one after one other, so a [Tag] array will not match our wants there. What can we do about this? Properly, we are able to introduce a brand new buildBlock methodology that may rework our [Tag]... values right into a plain Tag array. Let me present you actual this fast.
@resultBuilder
public enum TagBuilder {
public static func buildBlock(_ elements: Tag...) -> [Tag] {
elements
}
public static func buildBlock(_ elements: [Tag]...) -> [Tag] {
elements.flatMap { $0 }
}
public static func buildOptional(_ element: [Tag]?) -> [Tag] {
element ?? []
}
}
func buildWebpage(title: String, physique: String) -> Html {
Html {
Head {
Title(title)
}
Physique {
if title == "magic" {
H1("Good day")
P("World")
}
}
}
I hope it isn’t too sophisticated, nevertheless it’s all about constructing the right return sort for the underlying methodology. We needed to have simply an array of tags, however with the if assist we have ended up with a listing of tag arrays, that is why we now have to rework it again to a flattened array of tags with the brand new construct block. In order for you to check out a extra easy instance, you need to learn this publish. ☺️
If and else assist and both blocks
If blocks can return elective values, now what about if-else blocks? Properly, it is fairly an analogous strategy, we simply wish to return both the primary or the second array of tags.
@resultBuilder
public enum TagBuilder {
public static func buildBlock(_ elements: Tag...) -> [Tag] {
elements
}
public static func buildBlock(_ elements: [Tag]...) -> [Tag] {
elements.flatMap { $0 }
}
public static func buildOptional(_ element: [Tag]?) -> [Tag] {
element ?? []
}
public static func buildEither(first element: [Tag]) -> [Tag] {
element
}
public static func buildEither(second element: [Tag]) -> [Tag] {
element
}
}
func buildWebpage(title: String, physique: String) -> Html {
Html {
Head {
Title(title)
}
Physique {
if title == "magic" {
H1("Good day")
P("World")
}
else {
P(physique)
}
}
}
}
let html = buildWebpage(title: "title", physique: "physique")
As you possibly can see now we do not want further constructing blocks, since we have already coated the variadic Tag array subject with the elective assist. Now it’s attainable to put in writing if and else blocks inside our HTML DSL. Appears fairly good to this point, what’s subsequent? 🧐
Enabling for loops and maps by expressions
Think about that you’ve got a bunch of paragraphs within the physique that you simply’d like to make use of. Fairly simple, proper? Simply change the physique into an array of strings and use a for loop to rework them into P tags.
func buildWebpage(title: String, paragraphs: [String]) -> Html {
Html {
Head {
Title(title)
}
Physique {
H1(title)
for merchandise in paragraphs {
P(merchandise)
}
}
}
}
let html = buildWebpage(title: "title", paragraphs: ["a", "b", "c"])
Not so quick, what is the precise return sort right here and the way can we clear up the issue? After all the primary impression is that we’re returning a Tag, however in actuality we might like to have the ability to return a number of tags from a for loop, so it is a [Tag], ultimately, it will be an array of Tag arrays: [[Tag]].
The buildArray methodology can rework these array of tag arrays into Tag arrays, that is adequate to offer for assist, however we nonetheless want yet another methodology to have the ability to use it correctly. Now we have to construct an expression from a single Tag to show it into an array of tags. 🔖
@resultBuilder
public enum TagBuilder {
public static func buildBlock(_ elements: Tag...) -> [Tag] {
elements
}
public static func buildBlock(_ elements: [Tag]...) -> [Tag] {
elements.flatMap { $0 }
}
public static func buildEither(first element: [Tag]) -> [Tag] {
element
}
public static func buildEither(second element: [Tag]) -> [Tag] {
element
}
public static func buildOptional(_ element: [Tag]?) -> [Tag] {
element ?? []
}
public static func buildExpression(_ expression: Tag) -> [Tag] {
[expression]
}
public static func buildArray(_ elements: [[Tag]]) -> [Tag] {
elements.flatMap { $0 }
}
}
This fashion our for loop will work. The construct expression methodology may be very highly effective, it allows us to offer varied enter sorts and switch them into the info sort that we really want. I’ll present you yet another construct expression instance on this case to assist the map perform on an array of components. That is the ultimate end result builder:
@resultBuilder
public enum TagBuilder {
public static func buildBlock(_ elements: Tag...) -> [Tag] {
elements
}
public static func buildBlock(_ elements: [Tag]...) -> [Tag] {
elements.flatMap { $0 }
}
public static func buildEither(first element: [Tag]) -> [Tag] {
element
}
public static func buildEither(second element: [Tag]) -> [Tag] {
element
}
public static func buildOptional(_ element: [Tag]?) -> [Tag] {
element ?? []
}
public static func buildExpression(_ expression: Tag) -> [Tag] {
[expression]
}
public static func buildExpression(_ expression: [Tag]) -> [Tag] {
expression
}
public static func buildArray(_ elements: [[Tag]]) -> [Tag] {
elements.flatMap { $0 }
}
}
Now we are able to use maps as an alternative of for loops if we want useful strategies. 😍
func buildWebpage(title: String, paragraphs: [String]) -> Html {
Html {
Head {
Title(title)
}
Physique {
H1(title)
paragraphs.map { P($0) }
}
}
}
let html = buildWebpage(title: "title", paragraphs: ["a", "b", "c"])
That is how I used to be capable of create a DSL for my Tag hierarchy. Please be aware that I’d had some issues mistaken, this was the very first DSL that I’ve made, however to this point so good, it serves all my wants.
A easy HTML renderer
Earlier than we shut this text I might like to point out you ways I created my HTML doc renderer.
struct Renderer {
func render(tag: Tag, stage: Int = 0) -> String {
let indent = 4
let areas = String(repeating: " ", rely: stage * indent)
change tag.node.sort {
case .commonplace:
return areas + open(tag) + (tag.node.contents ?? "") + renderChildren(tag, stage: stage, areas: areas) + shut(tag)
case .remark:
return areas + "<!--" + (tag.node.contents ?? "") + "-->"
case .empty:
return areas + open(tag)
case .group:
return areas + (tag.node.contents ?? "") + renderChildren(tag, stage: stage, areas: areas)
}
}
personal func renderChildren(_ tag: Tag, stage: Int, areas: String) -> String {
var kids = tag.kids.map { render(tag: $0, stage: stage + 1) }.joined(separator: "n")
if !kids.isEmpty {
kids = "n" + kids + "n" + areas
}
return kids
}
personal func open(_ tag: Tag) -> String {
return "<" + tag.node.identify! + ">"
}
personal func shut(_ tag: Tag) -> String {
"</" + tag.node.identify! + ">"
}
}
As you possibly can see it is a fairly easy, but advanced struct. The open and shut strategies are simple, the fascinating half occurs within the render strategies. The very first render perform can render a tag utilizing the node sort. We simply change the kind and return the HTML worth in accordance with it. if the node is a normal or a bunch sort we additionally render the youngsters utilizing the identical methodology.
After all the ultimate implementation is a little more advanced, it includes HTML attributes, it helps minification and customized indentation stage, however for instructional functions this light-weight model is greater than sufficient. Here is the ultimate code snippet to render a HTML construction:
func buildWebpage(title: String, paragraphs: [String]) -> Html {
Html {
Head {
Title(title)
}
Physique {
H1(title)
paragraphs.map { P($0) }
}
}
}
let html = buildWebpage(title: "title", paragraphs: ["a", "b", "c"])
let output = Renderer().render(tag: html)
print(output)
If we examine this to our very first string primarily based resolution we are able to say that the distinction is large. Actually talking I used to be afraid of end result builders for a really very long time, I believed it is simply pointless complexity and we do not actually need them, however hey issues change, and I’ve additionally modified my thoughts about this function. Now I am unable to dwell with out end result builders and I really like the code that I can write by utilizing them. I actually hope that this text helped you to grasp them a bit higher. 🙏
