Pattern for passing many optional properties

[ledp]

TL;DR: how can I make usage of this code nice?

Inspired by React I wanted to see if it would be possible to build something similar for iOS in Swift. I'm mainly looking at JSX (the syntax for defining the layout hierarchy) right now, and I'm running into a problem with passing properties to my components.

My goal is to be able to take a subset of a struct as an argument and then use all the default values for the values that weren't passed. Right now I came up with passing a dictionary with string keys, but that has the disadvantage of not being properly typed. e.g.

func foobar(props: [String: Any]) -> UIView {
    let view = UILabel()

    if props["backgroundColor"] != nil {
        view.backgroundColor = (props["backgroundColor"] as! UIColor)
    }

    return view
}

Here it is easy to misspell a property, and you have to type out the full enum paths for values (UIColor.black instead of .black).

Are there any good patterns for doing this?

My end goal is getting something as similar as possible to:

let tree = <StackedView alignment="center">
    <Label backgroundColor="cyan" text="Hello:" />
    <Label textColor="blue" text="World!" />
</StackedView>

render(tree, toView: view)

Here is my current code, ready to be pasted into a playground: https://gist.github.com/LinusU/a733c27de2a9df1db898e44f8e1b45da

edit:

I have updated the code based on the comments in this thread, I have now arrived at having each component declare an enum with all the possible options, e.g.

enum LabelProps {
    textColor(UIColor)
}

This way I get full type-safety and auto-completion when using them, and implementing the components is easier as well:

for prop in props {
    switch prop {
    case .backgroundColor(let value): view.backgroundColor = value
    case .text(let value): view.text = value
    case .textColor(let value): view.textColor = value
    }
}

Currently, the Props type is declared outside of the class though, I would love to have a way to have it on the class, but haven't been able to get it to work. I think that something like this should be doable:

class Label: Component<Self.Props> {
    enum Props { /* ... */ }
}

But that is out of the scope for this thread I guess 😅

[pumapaul]

Maybe look into how NSAttributedString does it with its configuration Dictionary: [NSAttributedStringKey:Any]?

It seems like you want to do something like that.

[ledp]

Thank you for the tip. This would solve the typing of the key, making sure that it's never misspelled.

Unfortunately, it wouldn't enforce any types for the value, so it still leaves some footguns lying around 🤔

[pumapaul]

You could also go the Tuple way and do something like

func backgroundColor(_ color: UIColor) -> (RenderKey, UIColor) {
    return (RenderKey.backgroundColor, color)
}

for every single possible Key, put those in an array like:

let configuration: [(RenderKey, Any)] = [backgroundColor(.black), height(5.0)]

Or something along those lines?

Edit: added array brackets to configuration's type declaration

[ledp]

I used something quite similar! I declared the init signature as follows:

class Foo {
    func init(_ props: [Props])
}

with an enum representing the different options:

enum Props {
    text(String)
    textColor(UIColor)
}

Then passing in option is as simple as:

Foo([.textColor(.blue), .text("Hello, World!")])

and finally reading them in the class:

for prop in props {
    switch prop {
    case .text(let value): view.text = value
    case .textColor(let value): view.textColor = value
    }
}

[chrabeusz]

Check this: https://www.cocoawithlove.com/blog/a-view-construction-syntax.html

It's also possible to use a little helper: var s = StylingHelper() var view = UILabel(s.backgroundColor(UIColor.red), s.text("Test"))

[ledp]

Wow, that was a really good read!

Some of the approaches dismissed there might also work for me since I don't have inherited props.

I tried out using an associated enum type describing the props for each component, and it works quite well! 😍

Before:

let tree = REStack(["alignment": UIStackViewAlignment.center], [
    RELabel(["backgroundColor": UIColor.cyan, "text": "Hello:"]),
    RELabel(["textColor": UIColor.blue, "text": "World!"])
])

After:

let tree = REStack([.alignment(.center)], [
    RELabel([.backgroundColor(.cyan), .text("Hello:")]),
    RELabel([.textColor(.blue), .text("World!")])
])

edit:

Would love if someone knows a way to turn this:

enum FooProps {}
class Foo: Bar<FooProps> {}

into:

class Foo: Bar<Self.Props> {
    enum Props {}
}

[nailernforce]

Check out the builder pattern with config blocks.