? swift-web-page-ui (SwepUI)

Swift Version: 5.1 Swift Package Manager Swift Package Manager

SwepUI is an experimental project that intend to mimic SwiftUI functionality on the web using Swep. As of now it only has the reusability and encapsulation of the SwiftUI Views. But it missing a lot of features that SwiftUI has. For example: Modifiers, Layout, etc.

Examples

import SwepUI

struct TextWithRandomColor: View {
  let text: String
  init(_ text: String) {
    self.text = text
  }
  var body: some View {
    Div(text)
      .color(.rgb(Int.random(in: 0...255), Int.random(in: 0...255), Int.random(in: 0...255)))
  }
}

struct ContentView: View {
  var body: some View {
    Div {
      TextWithRandomColor("Content View")
    }
    .flexGrow(1)
    .display(.flex)
    .flexDirection(.column)
    .alignItems(.center)
    .justifyContent(.center)
    .width(100%)
    .height(100%)
  }
}

struct RootView<Content: View>: View {
  let content: Content

  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  var body: some View {
    Div(content)
      .display(.flex)
      .flexDirection(.column)
      .width(100%)
      .height(100%)
      .padding(.px(16))
  }
}

struct HeaderView: View {
  var body: some View {
    Div {
      Spacer()
      TextWithRandomColor("Item 1")
      Spacer()
      TextWithRandomColor("Item 2")
      Spacer()
      TextWithRandomColor("Item 3")
      Spacer()
    }
    .display(.flex)
    .flexDirection(.row)
    .alignItems(.center)
    .justifyContent(.center)
    .width(100%)
  }
}

struct FooterView: View {
  var body: some View {
    Div("A footer view ?")
      .display(.flex)
      .flexDirection(.row)
      .alignItems(.center)
      .justifyContent(.center)
      .width(100%)
  }
}

// Now we can use all the previously defined views..
let doc = Document {
  Html {
    Head {
      Title("Hello, SwepUI!")
      Meta(viewport: .width(.deviceWidth), .initialScale(1))
      Style {
        Selector("*,*::before,*::after") {
          Margin(.px(0))
          Padding(.px(0))
          BoxSizing(.borderBox)
        }
      }
    }
    Body {
      RootView {
        HeaderView()
        ContentView()
        FooterView()
      }
    }
    .display(.flex)
    .alignItems(.stretch)
    .justifyContent(.center)
    .height(.vh(100))
    .width(.vw(100))
  }
}

let contents = doc.debugRender().data(using: .utf8)
FileManager.default.createFile(atPath: "swepui.html", contents: contents)

Checkout the swepui.html to see the result.

Todo

  • Mimic SwiftUI Encapsulation
  • Being able to interact with the View style from outside its body as following: MyCustomView().style(.backgroundColor(.red))
  • Mimic SwiftUI Modifiers
  • Mimic SwiftUI Layout

Installation

Swift Package Manager (SPM)

If you want to use swift-web-page-ui in a project that uses SPM, it’s as simple as adding a dependencies clause to your Package.swift:

dependencies: [
  .package(url: "https://github.com/alja7dali/swift-web-page-ui.git", from: "0.0.1")
]

From there you can add SwepUI as target dependencies.

let SwepUI: Target.Dependency = .product(name: "SwepUI", package: "swift-web-page-ui")
...
targets: [
  .target(name: "yourProject", dependencies: [SwepUI]),
]

License

All modules are released under the MIT license. See LICENSE for details.

GitHub

View Github