AlpineJS + Elementary

[amirsaam]

I really love the Swift-ish syntax of Elementary and Elementary-HTMX, in my research for the best stack to be used along side Vapor, I found that since HTMX is mostly for talking with server in HTML, but many things do not need this interaction but still many divs need to become reactive and JS-devs made a good solution for it as you may encounter it too, the AlpineJS, it may be big request but it may help the ecosystem to make Vapor+Elementary (with HTMX & AlpineJS) to become more reactive and dynamic web stack.

[amirsaam]

This way I do think we can utilise UI libraries like Pines that are based on Alpine and Tailwind and do not need server-side JS rendering like React libraries.

[sliemeobn]

my intention with elementary was to create the bare-bones package that can then be extended or built upon in other packages (ie: build your own component library on top)

it would be fantastic to see people experimenting how to create nice, bundled up libraries with batteries-included components!

[amirsaam]

Surely, we don't need to have recreate Pines in Swift (I think?), only if we have AlpineJS package just like HTMX of what you did, Pines is an import and use library with div classes but it needs Alpine tags to run.

[sliemeobn]

I totally agree and I am on the same mission!
alpine is a great little tool to throw in the mix for light-weight client-side interactivity.

what I am looking into for my own project is using web component libraries, and shoelace looks really nice.
I think rendering out the "big page" with server-side swift, using HTMX for laser-focused server interactions, and shoelace (or web components in general) can get you all the way for a lot of web apps.

also, I have it on my list to tinker with an elementary-based reactive DOM package that runs as WASM in the browser, but that is no small task...

[amirsaam]

TBH it's my first time hearing about Shoelace, and doesn't it a React library (based on what I've read on their website)? Are you take apart your front and back containers and creating each on their own isolated container?
If yes my proposal was to have Vapor as backend the frontend on same container with this stack cuz looks like they can be on same container cuz of no server-side JS rendering unlike React frameworks.

[sliemeobn]

shoelace has nothing to do with React, it's pre-packaged components that in any HTML page (using web components).
a bit like if you took a snippet of Pines and packaged it up in a nice custom HTML tag.

[amirsaam]

Oh, the "Framework" section draw my attention that's why I thought it's a React thing, interesting.
Me myself am a more Radix appreciator that's why I like Pine more.

[amirsaam]

VATHe Stack: Vapor+Alpine+Tailwind+HTMX (fenced area, in which the small cattle is herded together for the night (lol))
or
HATHe Stack: Hummingbird+Alpine+Tailwind+HTMX (third-person singular simple present indicative of [have])

(the lowercase "e" stands for "Elementary")

[sliemeobn]

I'm more of a hummingbird guy myself, but sure ; )

[amirsaam]

haha, it could be any first word ;)

[amirsaam]

No AlpineElementary?

[amirsaam]

sorry amir, I hate to disappoint, but I have nothing to give you at the moment : (

there is nothing for you to be sorry about mate, you've done a great favour so far

I'd start with something like this (see below)

thanks for sharing it, i'll try to be part of this once we got a stable internet connection in iran since if you know what's going on around here 😅

[sliemeobn]

oh my... all the best to you. I hope the suffering and misery will end as soon as possible : (

[amirsaam]

@sliemeobn ElementaryAlpine 💃
If you accept, I would like to give the ownership to Elementary.

[sliemeobn]

look cool, thanks!
I'll take a closer look later this week. maybe we could set up a "elementary-swift-community" org or similar.
but at the moment I don't have the bandwidth to onboard this, sorry

[amirsaam]

no pressure buddy, it was just an idea 😅
also i plan to make a Pines UI after Alpine, it would be nice to have a community org, indeed.

[balthild]

Alpine is rather simple and is easy to implement in elementary. Here's a snippet:

extension HTMLAttribute {
	/// A namespace for Alpine.js attributes.
	/// See the [Alpine.js docs](https://alpinejs.dev) for more information.
	public enum x {}
}

extension HTMLAttribute.x {
	@inlinable
	public static func data(_ expr: String) -> HTMLAttribute {
		.init(name: "x-data", value: expr)
	}

	@inlinable
	public static func bind(_ name: String, _ expr: String) -> HTMLAttribute {
		.init(name: "x-bind:\(name)", value: expr)
	}

	@inlinable
	public static func on(_ event: String, _ expr: String) -> HTMLAttribute {
		.init(name: "x-on:\(event)", value: expr)
	}

	@inlinable
	public static func text(_ expr: String) -> HTMLAttribute {
		.init(name: "x-text", value: expr)
	}

	@inlinable
	public static func html(_ expr: String) -> HTMLAttribute {
		.init(name: "x-html", value: expr)
	}

	@inlinable
	public static func model(_ expr: String) -> HTMLAttribute {
		.init(name: "x-model", value: expr)
	}

	@inlinable
	public static func modelable(_ expr: String) -> HTMLAttribute {
		.init(name: "x-modelable", value: expr)
	}

	@inlinable
	public static func show(_ expr: String) -> HTMLAttribute {
		.init(name: "x-show", value: expr)
	}

	@inlinable
	public static func transition(_ expr: String) -> HTMLAttribute {
		.init(name: "x-transition", value: expr)
	}

	@inlinable
	public static func `for`(_ expr: String) -> HTMLAttribute {
		.init(name: "x-for", value: expr)
	}

	@inlinable
	public static func `if`(_ expr: String) -> HTMLAttribute {
		.init(name: "x-if", value: expr)
	}

	@inlinable
	public static func `init`(_ expr: String) -> HTMLAttribute {
		.init(name: "x-init", value: expr)
	}

	@inlinable
	public static func effect(_ expr: String) -> HTMLAttribute {
		.init(name: "x-effect", value: expr)
	}

	@inlinable
	public static func ref(_ expr: String) -> HTMLAttribute {
		.init(name: "x-ref", value: expr)
	}

	@inlinable
	public static func id(_ expr: String) -> HTMLAttribute {
		.init(name: "x-id", value: expr)
	}

	@inlinable
	public static func teleport(_ expr: String) -> HTMLAttribute {
		.init(name: "x-teleport", value: expr)
	}

	@inlinable
	public static var cloak: HTMLAttribute {
		.init(name: "x-cloak", value: nil)
	}

	@inlinable
	public static var ignore: HTMLAttribute {
		.init(name: "x-ignore", value: nil)
	}
}

[amirsaam]

you can already check out my implementation that I've mentioned before here https://github.com/amirsaam/elementary-alpine