add wasm example

.github/workflows/deploy-example.yml

@@ -0,0 +1,66 @@
+name: Deploy examples to Pages
+
+on:
+  push:
+    branches: ["main"]
+    paths-ignore:
+      - "**/README.md"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    env:
+      SWIFT_VERSION: "6.3.0"
+      WASM_SDK_URL: https://download.swift.org/swift-6.3-release/wasm-sdk/swift-6.3-RELEASE/swift-6.3-RELEASE_wasm.artifactbundle.tar.gz
+      WASM_SDK_CHECKSUM: 9fa4016ee632c7e9e906608ec3b55cf13dfc4dff44e47574c5af58064dc33fd9
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: Examples/WasmExample/pnpm-lock.yaml
+      - uses: swift-actions/setup-swift@v3
+        with:
+          swift-version: ${{ env.SWIFT_VERSION }}
+          skip-verify-signature: true
+      - name: Install Swift WASM SDK
+        run: swift sdk install ${{ env.WASM_SDK_URL }} --checksum ${{ env.WASM_SDK_CHECKSUM }}
+      - name: Install wasm-opt
+        uses: phi-ag/setup-binaryen@v1
+        with:
+          version: "123"
+      - name: Install dependencies
+        working-directory: Examples/WasmExample
+        run: pnpm preinstall && pnpm install
+      - name: Build
+        working-directory: Examples/WasmExample
+        run: pnpm build --base=/elementary-flow/
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "Examples/WasmExample/dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

Examples/WasmExample/.gitignore

@@ -0,0 +1,5 @@
+.build
+.vscode
+dist
+node_modules
+.DS_Store

Examples/WasmExample/Package.swift

@@ -0,0 +1,23 @@
+// swift-tools-version:6.2
+import PackageDescription
+
+let package = Package(
+    name: "elementary-web-app",
+    platforms: [.macOS(.v26)],
+    dependencies: [
+        .package(url: "https://github.com/elementary-swift/elementary-ui.git", from: "0.1.0"),
+        .package(name: "elementary-flow", path: "../.."),
+    ],
+    targets: [
+        .executableTarget(
+            name: "WebApp",
+            dependencies: [
+                .product(name: "ElementaryUI", package: "elementary-ui"),
+                .product(name: "ElementaryFlow", package: "elementary-flow"),
+            ],
+            swiftSettings: [
+                .swiftLanguageMode(.v5)
+            ],
+        )
+    ]
+)

Examples/WasmExample/Sources/WebApp/App.swift

@@ -0,0 +1,9 @@
+import ElementaryUI
+
+@main
+struct App {
+    static func main() {
+        let app = Application(ContentView())
+        app.mount(in: .body)
+    }
+}

Examples/WasmExample/Sources/WebApp/ContentView.swift

@@ -0,0 +1,144 @@
+import ElementaryFlow
+import ElementaryUI
+
+@View
+struct ContentView {
+    @State var wisdom = Wisdom(initialQuoteCount: 3)
+
+    var body: some View {
+        FlexColumn(align: .center, gap: 16) {
+            TitleView()
+
+            FlexRow(justify: .center, gap: 8) {
+                Button(label: "Add Quote") {
+                    wisdom.addRandomQuote()
+                }
+
+                Button(label: "Shuffle") {
+                    wisdom.shuffle()
+                }
+            }
+
+            QuoteList()
+                .environment(wisdom)
+        }.style(.fontFamily(.systemUI))
+    }
+}
+
+@View
+struct TitleView {
+    var body: some View {
+        FlexColumn(align: .center, gap: 4) {
+            Heading("WISE WORDS")
+                .style(
+                    .fontSize(.em(2)),
+                    .color(.black),
+                    .fontWeight(.bold)
+                )
+
+            Paragraph {
+                "This is an demo of "
+                Link(text: "ElementaryFlow", url: "https://github.com/elementary-swift/elementary-flow")
+                "."
+            }.style(.fontSize(.em(1)))
+        }.style(.padding(t: 12, b: 8))
+    }
+}
+
+@View
+struct QuoteCard {
+    var quote: WiseQuote
+
+    var body: some View {
+        Block {
+            Paragraph(quote.text)
+                .style(.margin(y: 8))
+            Paragraph { i { "- \(quote.author)" } }
+                .style(
+                    .fontSize(12),
+                    .textAlign(.right)
+                )
+        }
+        .style(
+            .background(.white),
+            .fontFamily(.systemUI),
+            .borderWidth(1),
+            .padding(16),
+            .cursor(.pointer),
+        )
+        .style(
+            when: .hover,
+            .boxShadow(.shadow(y: 2, blur: 6, opacity: 0.12)),
+        )
+        .style(
+            when: .active,
+            .background(.cardActive)
+        )
+    }
+}
+
+@View
+struct QuoteList {
+    @Environment(Wisdom.self) var wisdom
+
+    var body: some View {
+        FlexColumn(gap: 8) {
+            ForEach(wisdom.quotes, key: { $0.id }) { quote in
+                QuoteCard(quote: quote)
+                    .transition(.fade)
+                    .onClick {
+                        wisdom.removeQuote(quote)
+                    }
+            }
+        }
+        .style(.width(.em(20)))
+        .animateContainerLayout()
+        .animation(.default, value: wisdom.quotes)
+    }
+}
+
+@View
+struct Button {
+    var label: String
+    var action: () -> Void
+
+    var body: some View {
+        button {
+            label
+        }.onClick {
+            action()
+        }.style(
+            .background(.buttonBackground),
+            .padding(y: 16, x: 16),
+            .borderWidth(1),
+            .borderRadius(8),
+            .cursor(.pointer),
+            .transition("background 0.15s, transform 0.1s")
+        )
+        .style(
+            when: .hover,
+            .boxShadow(.ring(1, color: .black)),
+        )
+        .style(
+            when: .active,
+            .background(.buttonActive),
+            .transform(.scale(0.98, 0.98))
+        )
+    }
+}
+
+@View
+struct Link {
+    var text: String
+    var url: String
+
+    var body: some View {
+        a(.href(url)) { text }
+    }
+}
+
+extension CSSColor {
+    static var buttonBackground: Self = "#FFDDAA"
+    static var buttonActive: Self = "#E0B060"
+    static var cardActive: Self = "#EEEEEE"
+}