LiveView Native Weekly Update #2

Ironically I didn’t even make it a single week with the “weekly” update. Week +/- 2 days is the new social contract.

This week we continued the effort of refactoring the internals of the swift client. Anil has a branch to rewrite the modifier implementation. We’re close to the point where we can just grind through adding all modifiers into the Swift client.

One area we really need to focus on is how to represent the more complex SwiftUI modifiers. For example, this is a completely legal SwiftUI modifier:

.background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom))

Currently, we have modifiers being represented in the markup as attribute/value pairs. Anil’s branch ☝️ has additional functionality that will decode the value if it can be a JSON object. This allows us to pass in a few arguments to the modifier as key/value pairs. However, those more complex nested statements will be difficult to capture. And I’m afraid I already know the answer but am not a big fan of how it looks. There was a suggestion on how to represent the above with an XML-like markup:

<text>
  <modifiers>
    <background>
      <LinearGradient>
        <option:gradient>
          <Gradient>
            <option:colors>
              <Color.red />
              <Color.blue />
            </option:colors>
            <option.startPoint>.top</option.startPoint>
            <option.endPoint>.bottom</option.endPoint>
          </Gradient>
        </option:gradient>
      </LinearGradient>
    </background>
  </modifiers>
  Welcome!
</text>

And I have to agree that this would work but I’d really like to avoid this if we can. The ergonomics of writing out opening and closing markup tags are going to just drive people nuts.

I have been trying to punt on the idea of a CSS-like file but this may actually be the way to go. Let’s say we had the following:

<style type="swiftui/modifiers">
  .welcome-text {
    background: {
      LinearGradient: {
        gradient: Gradient {
          colors: [
            Color.red
            Color.blue
          ],
          startPoint: .top
          endPoint: .bottom
        }
      }
    }
  }
</style>

<text class="welcome-text">Welcome!</text>

This of course would require a parser as this is not legal CSS syntax and we’d have to make major changes to how we are currently extracting and applying modifiers. However, this does have the benefit of allowing us to build stylesheets and we can re-use common styles.

If anyone has some ideas on how we can best apply modifiers I’m open to hearing it. See everyone next week!