ElementaryAlpine: Reactive web apps with Swift

import Elementary
import ElementaryAlpine

struct CounterPage: HTMLDocument {
    var head: some HTML {
        meta(.charset(.utf8))
        title("Counter")
        setupAlpine()
    }
    var body: some HTML {
        main(.class("container")) {
            div(.x.data("{ count: 0 }"), .class("counter")) {
                button(.x.on("click", "count--")) { "−" }
                span(.x.text("count")) { "0" }
                button(.x.on("click", "count++")) { "+" }
                button(.x.on("click", "count = 0"), .x.show("count > 0")) { "Reset" }
            }
        }
    }
}

// swift-tools-version: 6.0
import PackageDescription

let package = Package(
    name: "MyApp",
    dependencies: [
        .package(url: "https://github.com/elementary-swift/elementary-alpine", from: "0.3.0"),
    ],
    targets: [
        .target(
            name: "App",
            dependencies: [
                .product(name: "ElementaryAlpine", package: "elementary-alpine"),
            ]
        ),
    ]
)

.product(name: "ElementaryAlpinePlugins", package: "elementary-alpine"),

// first-class support for all AlpineJS directives
div(.x.data("{ count: 0 }"), .class("counter")) {
    button(.x.on("click", "count++")) { "Increment" }
    span(.x.text("count")) { "0" }
}

// bind attributes reactively
input(.x.bind("placeholder", "text"), .type(.text))

// bind class with object syntax
div(.x.bindClass("{ 'hidden': !open }"))

// bind style with object syntax
div(.x.bindStyle("{ color: 'red' }"))

// event modifiers (passed as a modifiers array)
form(.x.on("submit", "...", modifiers: [.prevent])) {
    button { "Submit" }
}

// keyboard modifiers
input(.x.on("keyup", "submit()", modifiers: [.enter]))

// debounce / throttle (ms)
input(.x.on("input", "fetchResults()", modifiers: [.debounce(500)]))

// two-way binding
input(.x.model("search"))

// model with modifiers
input(.x.model("search", modifiers: [.number, .debounce(300)]))

// loops (semantic name for x-for)
template(.x.loop("item in items")) {
    li(.x.text("item")) { "" }
}

// conditional rendering (semantic name for x-if)
template(.x.when("open")) {
    div { "Content" }
}

// transitions with modifiers
div(.x.show("open"), .x.transition(modifiers: [.scale(80), .origin(.top)])) {
    "Content"
}

import ElementaryAlpine

// In your head:
registerGlobal(.data, on: "dropdown") {
    "() => ({ open: false, toggle() { this.open = !this.open } })"
}
registerGlobal(.store, on: "notifications") {
    "{ items: [] }"
}
registerGlobal(.bind, on: "myButton") {
    "() => ({ type: 'button' })"
}

var head: some HTML {
    meta(.charset(.utf8))
    setupAlpine()
}

var head: some HTML {
    meta(.charset(.utf8))
    setupAlpine(plugins: [.mask, .focus, .morph])
}

setupAlpine(version: "3.14.0", plugins: [.focus])

var head: some HTML {
    meta(.charset(.utf8))
    script(.src("https://cdn.jsdelivr.net/npm/alpinejs@3.15.12/dist/cdn.min.js"), .defer) {}
}

.executableTarget(
    name: "App",
    // ...
    resources: [
        .copy("Public")
    ]
)

var head: some HTML {
    meta(.charset(.utf8))
    script(.src("/alpine.min.js"), .defer) {}
}

// x-show
.x.show("open", modifiers: [.important])              // → x-show.important="open"

// x-on
.x.on("click", "...", modifiers: [.prevent, .stop])  // → x-on:click.prevent.stop="..."
.x.on("keyup", "...", modifiers: [.enter])            // → x-on:keyup.enter="..."
.x.on("input", "...", modifiers: [.debounce(500)])    // → x-on:input.debounce.500ms="..."
.x.on("click", "...", modifiers: [.selfTarget])       // → x-on:click.self="..."

// x-model
.x.model("search", modifiers: [.number, .change, .blur, .enter])

// x-transition
.x.transition(modifiers: [.opacity])
.x.transition(modifiers: [.scale(80), .origin(.topRight)])
.x.transition(modifiers: [.duration(500), .delay(50)])

// $dispatch — dispatch a custom event
button(.x.on("click", "$dispatch('notify')")) { "Notify" }

// $store — access a global store
div(.x.text("$store.user.name"))

// $refs — reference an element by key
input(.x.ref("myInput"), .type(.text))
button(.x.on("click", "$refs.myInput.focus()")) { "Focus" }

// $watch — reactively watch a property
div(.x.setup("count = 0; $watch('count', value => console.log(value))"))

// $nextTick — wait for next DOM update
div(.x.setup("$nextTick(() => console.log('mounted')"))

// $el, $root, $data, $id — context accessors
div(.x.data("{ open: false }"), .x.text("$el.tagName"))

var head: some HTML {
    meta(.charset(.utf8))
    setupAlpine(plugins: [.mask, .focus, .morph])
}

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Static pattern — wildcards: 9 (numeric), a (alpha), * (any)
input(.xMask.pattern("99/99/9999"), .x.model("date"))
input(.xMask.pattern("(999) 999-9999"), .x.model("phone"))

// Dynamic mask — expression receives $input
input(.xMask.dynamic("$money($input)"), .x.model("amount"))

// Dynamic mask — function reference
input(.xMask.dynamic("creditCardMask"), .x.model("card"))

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Trigger when the element enters the viewport
div(.xIntersect.intersect("shown = true")) {
    "I'm in the viewport!"
}

// Trigger only the first time
div(.xIntersect.intersect("loaded = true", modifiers: [.once])) {
    "..."
}

// Trigger when at least half of the element is visible
div(.xIntersect.intersect("loaded = true", modifiers: [.half])) {
    "..."
}

// Trigger when the whole element is visible
div(.xIntersect.intersect("loaded = true", modifiers: [.full])) {
    "..."
}

// Custom threshold (0–100, percentage of element visible)
div(.xIntersect.intersect("loaded = true", modifiers: [.threshold(50)])) {
    "..."
}

// Expand the viewport boundary (CSS-margin syntax)
div(.xIntersect.intersect("loaded = true", modifiers: [.margin("200px")])) {
    "..."
}

// Trigger on enter (alias of x-intersect)
div(.xIntersect.enter("shown = true")) { "..." }

// Trigger on leave
div(.xIntersect.leave("shown = false")) { "..." }

// Chained modifiers
div(.xIntersect.intersect("loaded = true", modifiers: [.threshold(50), .full])) {
    "..."
}

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Track an element's size
div(.xResize.resize("width = $width; height = $height")) {
    p(.x.text("'Width: ' + width + 'px'")) { "" }
    p(.x.text("'Height: ' + height + 'px'")) { "" }
}

// Track the entire document
div(.xResize.resize("width = $width; height = $height", modifiers: [.document])) { ... }

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Persist a counter to localStorage
div(.x.data("{ count: $persist(0) }")) {
    button(.x.on("click", "count++")) { "Increment" }
    span(.x.text("count")) { "" }
}

// Use a custom localStorage key
div(.x.data("{ count: $persist(0).as('my-count') }")) {
    button(.x.on("click", "count++")) { "Increment" }
    span(.x.text("count")) { "" }
}

// Use sessionStorage instead (cleared when the tab closes)
div(.x.data("{ count: $persist(0).using(sessionStorage) }")) {
    button(.x.on("click", "count++")) { "Increment" }
    span(.x.text("count")) { "" }
}

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Trap focus inside an element while `open` is true
div(.x.data("{ open: false }")) {
    button(.x.on("click", "open = true")) { "Open Dialog" }
    span(.x.show("open"), .xFocus.trap("open")) {
        p { "..." }
        input(.type(.text), .placeholder("Some input..."))
        input(.type(.text), .placeholder("Some other input..."))
        button(.x.on("click", "open = false")) { "Close Dialog" }
    }
}

// Hide all other elements from screen readers while trapped
div(.xFocus.trap("open", modifiers: [.inert])) { ... }

// Disable page scroll while trapped
div(.xFocus.trap("open", modifiers: [.noscroll])) { ... }

// Don't return focus to the previous element on untrap
div(.xFocus.trap("open", modifiers: [.noreturn])) { ... }

// Don't auto-focus the first focusable element on trap
div(.xFocus.trap("open", modifiers: [.noautofocus])) { ... }

// Chained modifiers
div(.xFocus.trap("open", modifiers: [.inert, .noscroll, .noreturn])) { ... }

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Basic collapse (works with x-show)
p(.x.show("expanded"), .xCollapse.collapse()) {
    "..."
}

// Custom duration (ms)
p(.x.show("expanded"), .xCollapse.collapse(modifiers: [.duration(1000)])) {
    "..."
}

// Minimum collapsed height (px) — useful for "cut-off" instead of full hide
p(.x.show("expanded"), .xCollapse.collapse(modifiers: [.min(50)])) {
    "..."
}

// Chained modifiers
p(.x.show("expanded"), .xCollapse.collapse(modifiers: [.duration(500), .min(50)])) {
    "..."
}

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Anchor below the button (default positioning)
div(.x.data("{ open: false }")) {
    button(.x.ref("button"), .x.on("click", "open = ! open")) { "Toggle" }
    div(.x.show("open"), .xAnchor.anchor("$refs.button")) {
        "Dropdown content"
    }
}

// Anchor below-right of the button
div(.x.show("open"), .xAnchor.anchor("$refs.button", modifiers: [.bottomStart])) {
    "Dropdown content"
}

// Use fixed positioning (escapes overflow:hidden containers)
div(.x.show("open"), .xAnchor.anchor("$refs.button", modifiers: [.fixed])) {
    "Dropdown content"
}

// Add an offset (px)
div(.x.show("open"), .xAnchor.anchor("$refs.button", modifiers: [.offset(10)])) {
    "Dropdown content"
}

// Prevent auto-flip when there's no room below
div(.x.show("open"), .xAnchor.anchor("$refs.button", modifiers: [.noflip])) {
    "Dropdown content"
}

// Apply positioning yourself via $anchor.x/$anchor.y in x-bind:style
div(
    .x.show("open"),
    .xAnchor.anchor("$refs.button", modifiers: [.noStyle]),
    .x.bindStyle("{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }")
) {
    "Dropdown content"
}

// Anchor to an element by id
div(.x.show("open"), .xAnchor.anchor("document.getElementById('trigger')")) {
    "Dropdown content"
}

import Elementary
import ElementaryAlpine
import ElementaryAlpinePlugins

// Basic sortable list
ul(.xSort.sort) {
    li(.xSort.item("1")) { "foo" }
    li(.xSort.item("2")) { "bar" }
    li(.xSort.item("3")) { "baz" }
}

// Sort with a handler that runs on every reorder
ul(.xSort.sort("alert($item + ' - ' + $position)")) {
    li(.xSort.item("1")) { "foo" }
    li(.xSort.item("2")) { "bar" }
    li(.xSort.item("3")) { "baz" }
}

// Group sortable lists — items can be dragged between lists with the same group
ul(.xSort.sort("handle"), .xSort.group("todos")) {
    li(.xSort.item("1")) { "foo" }
    li(.xSort.item("2")) { "bar" }
    li(.xSort.item("3")) { "baz" }
}

ol(.xSort.sort("handle"), .xSort.group("todos")) {
    li(.xSort.item("4")) { "foo" }
    li(.xSort.item("5")) { "bar" }
    li(.xSort.item("6")) { "baz" }
}

// Drag handles — only the handle initiates drag
ul(.xSort.sort) {
    li(.xSort.item("1")) {
        span(.xSort.handle) { " - " }
        "foo"
    }
    li(.xSort.item("2")) {
        span(.xSort.handle) { " - " }
        "bar"
    }
}

// Ignore elements — buttons inside items stay clickable
ul(.xSort.sort) {
    li(.xSort.item("1")) {
        "foo"
        button(.xSort.ignore) { "Edit" }
    }
}

// Show a ghost of the dragged element instead of an empty space
ul(.xSort.sort(modifiers: [.ghost])) {
    li(.xSort.item("1")) { "foo" }
    li(.xSort.item("2")) { "bar" }
}

// Pass custom SortableJS options
ul(.xSort.sort, .xSort.config("{ animation: 0 }")) {
    li(.xSort.item("1")) { "foo" }
}

setupMorph(
    trigger: "#refresh-btn",
    target: "#user-card",
    event: "click"
) {
    div(.x.data("{ name: 'Updated' }")) {
        h2 { "Updated content" }
    }
}

// In your body, place markers around the content you want to update:
// <!--list-start-->
// <li>item</li>
// <!--list-end-->

setupMorphBetween(
    trigger: "#refresh",
    startMarker: "<!--list-start-->",
    endMarker: "<!--list-end-->",
    event: "click"
) {
    li { "new item" }
}

setupMorph(
    trigger: "#list-refresh",
    target: "#list",
    event: "click"
) {
    .updating { "console.log('updating', el)" }
    .key { "(el) => el.id" }
    .lookahead()
} returning: {
    ul { li { "item" } }
}

setupMorph(
    trigger: "#refresh-btn",
    target: "#list",
    event: "click"
) {
    "const html = await fetch('/api/list').then(r => r.text())"
} returning: {
    div { "default" }
}

setupMorph(
    trigger: "#refresh-btn",
    target: "#list",
    event: "click"
) {
    .updating { "console.log('updating', el)" }
    .key { "(el) => el.id" }
    .lookahead()
} jsCommand: {
    "const html = await fetch('/api/list').then(r => r.text())"
} returning: {
    div { "default" }
}

setupMorph(target: "#content") {
    div { "initial content" }
}

setupMorphBetween(
    startMarker: "<!--start-->",
    endMarker: "<!--end-->"
) {
    li { "initial" }
}