TextureSwiftSupport

TextureSwiftSupport is a support library for Texture
It helps writing the code in Texture with Swift's power.

Requirements

Swiift 5.1+

The cases of usage in Production

• the products of eureka, Inc
  • Pairs for Japan
  • Pairs for Global

LayoutSpecBuilder (Using @_functionBuidler)

Swift5.1 has FunctionBuilder(it's not officially)
With this, we can write layout spec with no more commas. (It's like SwiftUI)

Plain

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {

  ASStackLayoutSpec(
    direction: .vertical,
    spacing: 0,
    justifyContent: .start,
    alignItems: .start,
    children: [
      textNode1,
      textNode2,
      textNode3,
    ]
  )
  
}

With LayoutSpecBuilder

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {

  LayoutSpec {
    VStackLayout {
      textNode1
      textNode2
      textNode3
    }
  }
  
}

More complicated

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    LayoutSpec {
        VStackLayout {
            HStackLayout {
                InsetLayout {
                    node1
                }
                InsetLayout {
                    node2
                }
            }
            node3
            HStackLayout {
                node4,
                node5,
                node6,
            }
        }
    }
}

SwiftUI-like Method Chain API

Inspiring from SwiftUI.

We can build a node hierarchy with the method chain.

For now, we have only a few methods. (e.g Padding, Overlay, Background)

textNode
  .padding([.vertical], padding: 4)
  .background(backgroundNode)

• About Function builders

  • Function builders is a feature in Swift Language.
    For example, SwiftUI uses it.

  • Implementation example

PropertyWrappers

• @_NodeLayout

It calls setNeedsLayout() automatically when wrappedValue changed. (⚠️ Experimental Feature) If we set any node to bodyNode, MyNode will relayout automatically.

final class MyNode: ASDisplayNode {

  @_NodeLayout bodyNode: ASDisplayNode?

  override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    LayoutSpec {
      VStackLayout {
        bodyNode
        ...
      }
    }
  }
}

Composition container

Composition container composes one or more nodes in the container node. It would be helpful when a node needs to adjust in specific use-cases.

Example

let myNode: MyNode = 

let paddedNode: PaddingNode<MyNode> = PaddingNode(
  padding: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
) {
  myNode
}

let myNode: MyNode = 
let gradientNode: MyGradientNode

let composedNode = BackgroundNode(
  child: { myNode },
  background: { gradientNode }
)

Shape display node

• ShapeLayerNode
  • Uses CALayer to draw
• ShapeRenderingNode
  • Uses CoreGraphics to draw

Author

Muukii [email protected]