added vapor example (#3)

* added vapor example

* CI names

.github/workflows/ci-examples.yaml

@@ -7,23 +7,41 @@ on:
     branches: [main]
   workflow_dispatch:
 
-defaults:
-  run:
-    working-directory: ./Examples/HummingbirdDemo
-
 jobs:
-  ci:
-    name: Build Examples
+  hummingbird:
+    name: Build Hummingbird Example
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./Examples/HummingbirdDemo
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/cache@v4
+        with:
+          path: .build
+          key: ${{ runner.os }}-spm-hummingbird-${{ hashFiles('**/Package.resolved') }}
+          restore-keys: |
+            ${{ runner.os }}-spm-hummingbird
+
+      - name: Build
+        run: swift build
+
+  vapor:
+    name: Build Vapor Example
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./Examples/VaporDemo
     steps:
       - uses: actions/checkout@v4
 
       - uses: actions/cache@v4
         with:
           path: .build
-          key: ${{ runner.os }}-spm-${{ hashFiles('**/Package.resolved') }}
+          key: ${{ runner.os }}-spm-vapor-${{ hashFiles('**/Package.resolved') }}
           restore-keys: |
-            ${{ runner.os }}-spm-
+            ${{ runner.os }}-spm-vapor
 
       - name: Build
         run: swift build

Examples/VaporDemo/.gitignore

@@ -0,0 +1,5 @@
+/.build
+xcuserdata/
+DerivedData/
+.vscode
+Package.resolved

Examples/VaporDemo/Package.swift

@@ -0,0 +1,28 @@
+// swift-tools-version: 5.10
+import PackageDescription
+
+let package = Package(
+    name: "HummingbirdDemo",
+    platforms: [
+        .macOS(.v14),
+    ],
+    products: [
+        .executable(name: "App", targets: ["App"]),
+    ],
+    dependencies: [
+        .package(url: "https://github.com/vapor/vapor", from: "4.102.0"),
+        .package(path: "../../"),
+    ],
+    targets: [
+        .executableTarget(
+            name: "App",
+            dependencies: [
+                .product(name: "Vapor", package: "vapor"),
+                .product(name: "ElementaryHTMX", package: "elementary-htmx"),
+            ],
+            resources: [
+                .copy("Public"),
+            ]
+        ),
+    ]
+)

Examples/VaporDemo/README.md

@@ -0,0 +1,32 @@
+# ElementaryHTMX + Vapor Demo
+
+## Running the example
+
+Run the app and open http://localhost:8080 in the browser
+
+```sh
+swift run App
+```
+
+## Dev mode with auto-reload on save
+
+The `swift-dev` script auto-reloads open browser tabs on source file changes.
+
+It is using [watchexec](https://github.com/watchexec/watchexec) and [browsersync](https://browsersync.io/).
+
+### Install required tools
+
+Use homebrew and npm to install the following (tested on macOS):
+
+```sh
+npm install -g browser-sync
+brew install watchexec
+```
+
+### Run app in watch-mode
+
+This will watch all swift files in the demo package, build on-demand, and re-sync the browser page
+
+```sh
+swift dev
+```

Examples/VaporDemo/Sources/App/App.swift

@@ -0,0 +1,17 @@
+import Vapor
+
+@main
+struct App {
+    static func main() async throws {
+        let app = try await Application.make()
+        try app.middleware.use(FileMiddleware(bundle: .module))
+
+        addRoutes(to: app)
+
+        #if DEBUG
+            app.lifecycle.use(BrowserSyncHandler())
+        #endif
+
+        try await app.execute()
+    }
+}

Examples/VaporDemo/Sources/App/BrowserSync.swift

@@ -0,0 +1,17 @@
+import Foundation
+import Vapor
+
+#if DEBUG
+    struct BrowserSyncHandler: LifecycleHandler {
+        func didBoot(_: Application) throws {
+            let p = Process()
+            p.executableURL = URL(string: "file:///bin/sh")
+            p.arguments = ["-c", "browser-sync reload"]
+            do {
+                try p.run()
+            } catch {
+                print("Could not auto-reload: \(error)")
+            }
+        }
+    }
+#endif

Examples/VaporDemo/Sources/App/Elementary+Vapor.swift

@@ -0,0 +1,16 @@
+import Elementary
+import Vapor
+
+struct HTMLResponse<Content: HTML> {
+    @HTMLBuilder var content: Content
+}
+
+extension HTMLResponse: Vapor.AsyncResponseEncodable {
+    func encodeResponse(for request: Request) async throws -> Response {
+        Response(
+            status: .ok,
+            headers: ["Content-Type": "text/html"],
+            body: .init(string: content.render())
+        )
+    }
+}

Examples/VaporDemo/Sources/App/Routes.swift

@@ -0,0 +1,18 @@
+import Elementary
+import Vapor
+
+func addRoutes(to app: Application) {
+    app.get("") { _ in
+        HTMLResponse {
+            MainPage()
+        }
+    }
+
+    app.get("result") { request in
+        let x = try request.query.get(Int.self, at: "x")
+        let y = try request.query.get(Int.self, at: "y")
+        return HTMLResponse {
+            ResultView(x: x, y: y)
+        }
+    }
+}

Examples/VaporDemo/Sources/App/Views.swift

@@ -0,0 +1,45 @@
+import Elementary
+import ElementaryHTMX
+
+struct MainPage: HTMLDocument {
+    var title: String { "Vapor + Elementary + HTMX" }
+
+    var head: some HTML {
+        meta(.charset(.utf8))
+        script(.src("/htmx.min.js")) {}
+    }
+
+    var body: some HTML {
+        header {
+            h2 { "Vapor + Elementary + HTMX" }
+        }
+        main {
+            div {
+                // example of using hx-target and hx-swap
+                form(.hx.get("/result"), .hx.target("#result"), .hx.swap(.innerHTML)) {
+                    div(.class("grid")) {
+                        input(.type(.number), .name("x"), .value("1"), .required)
+                        span { " + " }
+                        input(.type(.number), .name("y"), .value("2"), .required)
+                        input(.type(.submit), .value("Calculate"))
+                    }
+                }
+            }
+            div(.id("result")) {
+                p { i { "Result will be calculated on the server" } }
+            }
+        }
+    }
+}
+
+struct ResultView: HTML {
+    let x: Int
+    let y: Int
+
+    var content: some HTML {
+        p {
+            "\(x) + \(y) = "
+            b { "\(x + y)" }
+        }
+    }
+}

Examples/VaporDemo/swift-dev

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+touch .build/browser-dev-sync
+browser-sync start -p localhost:8080 &
+
+watchexec -w Sources -e .swift -r 'swift build --product App && touch .build/browser-dev-sync' &
+watchexec -w .build/browser-dev-sync --ignore-nothing -r '.build/debug/App'