SwiftyHTMLBuilder

2.0.0

Swift DSL for writing HTML documents
yukiny0811/SwiftyHTMLBuilder

What's New

v2.0.0

2024-02-01T16:13:11Z

Release v2.0.0

  • Write your HTML with SwiftUI-like structure (vstack, hstack, zstack)
  • write css with autocomplete
  • Modularize views
  • Use loops (for) and conditional statements (if) to create views
  • Create responsive UI with MediaQuery class

For Detailed description, see README.

Sample Code for modularization

class MyCell: HTML {
    let count: Int
    init(count: Int) {
        self.count = count
    }
    var content: HTMLBlock {
        hstack(spaceBetween: true) {
            h3("cell")
            h3(String(count))
        }
        .width(400, unit: .px)
        .backgroundColor(.aliceblue)
    }
}

// using MyCell
vstack(spacing: "10px") {
    for i in 0..<10 {
        if i.isMultiple(of: 2) {
            MyCell(count: i).build()
        }
    }
}

SwiftyHTMLBuilder

Release Swift Compatibility Platform Compatibility License

Swift DSL for HTML documents

Key Features

SwiftUI-like Layouts

Use SwiftUI-like layout components such as VStack, HStack, and ZStack for HTML structure definition.

class MyBody: HTML {
    var content: HTMLBlock {
        body {
            h1("SwiftyHTMLBuilder")
            
            hstack(spacing: "100px") {
                p("hstack1")
                p("hstack1")
                p("hstack1")
            }
            .backgroundColor(.aliceblue)
            
            hstack(equalSpacing: true) {
                p("hstack2")
                p("hstack2")
                p("hstack2")
            }
            
            vstack(spacing: "10px") {
                p("vstack1")
                p("vstack2")
                p("vstack3")
            }
            .backgroundColor(.aliceblue)
            
            zstack(vAlign: .center, hAlign: .center) {
                img(src: "image.png")
                    .width(300, unit: .px)
                vstack(spacing: "0px") {
                    h2("Swifty")
                        .margin(0)
                    h2("HTML")
                        .margin(0)
                }
                .color(.white)
            }
        }
    }
}
image

Easy-To-Write MediaQuery

You can easily write responsive codes with MediaQuery class.

MediaQuery(.minWidth, value: "500px") {
    nav {
        hstack(spaceBetween: true) {
            h1("SwiftyHTMLBuilder")
            hstack(hAlign: .center, spacing: "10px") {
                a(href: "https://github.com") { text("AAAAA") }
                a(href: "https://github.com") { text("BBBBB") }
                a(href: "https://github.com") { text("CCCCC") }
            }
        }
    }
    .backgroundColor(.aliceblue)
} falseContents: {
    nav {
        vstack(equalSpacing: true) {
            a(href: "https://github.com") { text("AAAAA") }
            a(href: "https://github.com") { text("BBBBB") }
            a(href: "https://github.com") { text("CCCCC") }
        }
        .width(100, unit: .vw)
        .backgroundColor(.aliceblue)
    }
    h1("SwiftyHTMLBuilder")
}
image

Autocomplete for Styling

Autocomplete for css, making it easier to apply CSS and other styling properties directly in your Swift code.

h2("HTML")
    .margin(0)
    .padding(0)
    .color(.red)
    .backgroundColor(r: 255, g: 0, b: 255)

Modularize views.

Organize your HTML code more effectively by dividing it into classes. This approach allows you to modularize HTML content, enabling the use of loops (for) and conditional statements (if) for HTML generation.

class MyCell: HTML {
    let count: Int
    init(count: Int) {
        self.count = count
    }
    var content: HTMLBlock {
        hstack(spaceBetween: true) {
            h3("cell")
            h3(String(count))
        }
        .width(400, unit: .px)
        .backgroundColor(.aliceblue)
    }
}

// using MyCell
vstack(spacing: "10px") {
    for i in 0..<10 {
        if i.isMultiple(of: 2) {
            MyCell(count: i).build()
        }
    }
}
image

Usage

HTML Document Template

class MyHtml: HTML {
    var content: HTMLBlock {
        document {
            doctype()
            html {
                head {
                    meta(charset: .utf8)
                    title("SwiftyHTMLBuilder Example")
                }
                body {
                    h1("SwiftyHTMLBuilder")
                }
            }
        }
    }
}

Xcode Project Setup

Create new Xcode project for Command Line Tools (macOS), nad add this package via Swift Package Manager.

For your convenience, setup your project with following steps.

  1. Edit your Scheme and append new environment variable MY_ROOT
image
  1. Create new Post-action for Run. This will make Xcode to open index.html everytime you run the project.
image
  1. Organize your project directory structure
image
  1. Create URL object for outputPath (to index.html)
import Foundation
import SwiftyHTMLBuilder

let projectRootPath = ProcessInfo.processInfo.environment["MY_ROOT"]!
let outputPath = URL(string: projectRootPath)!
    .appending(path: "Output")
    .appending(path: "index.html")
    .absoluteString
  1. Write your HTML
class MyHTML: HTML {
    var content: HTMLBlock {
        ...
    }
}
  1. Compile your swift code to HTML code.
let compiled = MyHtml().compile()
  1. Write to index.html
try! compiled.write(toFile: outputPath, atomically: true, encoding: .utf8)

Convert HTML to HTMLBlock

Use .build() to convert.

class MyHtml: HTML {
    var content: HTMLBlock {
        document {
            doctype()
            html {
                MyHead().build()
                MyBody().build()
            }
        }
    }
}

Use Undefined css, attribute, or HTML components

Because not all components are covered in this package, you may need to manually write css, attribute, or HTML components. Contributions are welcome.

img(src: "image.png")
    .css("z-index", "1")
    .attr("width", "300px")

// use text() to write raw HTML code
text("<style> * { padding: 0; margin: 0; } </style>")

Covered Features

HTML Tags

  • html
  • head
  • body
  • a
  • br
  • div
  • doctype
  • footer
  • f1
  • f2
  • f3
  • f4
  • f5
  • f6
  • header
  • img
  • link
  • meta
  • nav
  • p
  • section
  • span
  • title
  • text (original)
  • empty (original)
  • group (original)
  • document (original)
  • vstack (original)
  • hstack (original)
  • zstack (original)

CSS Styles

  • background-color
  • color
  • width
  • height
  • padding
  • margin
  • position

Description

  • Swift Tools 5.7.0
View More Packages from this Author

Dependencies

Last updated: Mon May 20 2024 10:21:09 GMT-0900 (Hawaii-Aleutian Daylight Time)