Replacing Preact

[pixelcmtd]

P/react makes us split components and their associated styles. There are also other reasons we might want to consider alternatives, like simpler code, but those are highly subjective.
This issue is supposed to be a kind of open thread for ideas/suggestions and experiments migrating to different front-end frameworks.

[pixelcmtd]

I've spent a while porting some components to Svelte and it hasn't been great. Code size has increased a bit, the style inlining is very nice, but it's not exactly TypeScript-native (fbff542) and still feels a bit tedious to use.
Imho the best way forward is to stick to Preact for now and look at Ripple later, as that's looking promising as well.

[pixelcmtd]

After loosing my mind again over the sub-optimal choices we have for reusable components in cmdesigns, I have come to a very annoying realization: Since we could do most of the common UI in Astro already, we'd just need the slightest bit of support for properly scoped event handlers for it to actually be bearable.

It feels increasingly weird that there is this "missing link" between pure HTML+CSS (and maybe entirely hand-written JS) and essentially building everything with a Frontend Framework. Since there is neither a way to put Astro components inside Framework components nor an ergonomic way of adding JS to Astro components, one will repeatedly question whether to build any "lower-level" (i.e. highly reusable) component in Astro itself.

There are a few paths we could take, the common element being that Preact is very likely to stay for more complex tasks:

• Try once again to rebuild simple things in Vanilla JS → No. That is still a bit more tedious than I can imagine living with.
• Use Alpine.js → It might be the best "missing link" there is.
• Use htmx → When trying to use it for Procens, it felt more like SPA without a Framework. That's a cool niche, but not what we need.
• Build something similar → I really don't need any more side-projects to waste my time with. But if we can find the MVP for being able to use Astro for very simple client-side interactivity, we might end up with another one of those 2KB libraries that are pretty nice in their respective niches.

[pixelcmtd]

One option I didn't really think of is using Web Components in Astro. It's very verbose and I'm not entirely sure whether it properly fits our use cases, but Web Components are widely supported, low overhead, and supported well enough in Astro. The Web Components API even gives us scoped JS for free!

I will try implementing the following components using Alpine and Web Components:

• Button
• Dialog
• Input
• Rewind
• ScreenshotButton

[pixelcmtd]

The results are in: Alpine.js, Web Components

• The missing JS scoping in Astro drove me mad to the point that I implemented it myself (AI-assisted) with some awful hacks.
• Simple components illustrate very well where Alpine's strengths lie: ClearButton and Rewind are only half the LoC.
• Inline JS can be a decent solution for anything that doesn't require ESM imports.
• Web Components are somewhat cumbersome to use, because Astro doesn't help.

In the Web Components branch I also reimplemented the whole KinkCheck→Category→Kink→Rater stack:

• It is practical to implement a readonly KinkCheck component (as used on the /internal/checks/[id] page) using only Astro components.
• The way we pass props introduces a lot of stale data-astro-cid-, doubling raw HTML size. I consider this to be a non-issue, as the compressed size stays identical.
• It would be possible to implement the rating colors in pure CSS using the currently unused data-rating attribute.

[CMJanina]

One data point: the Rewind page ended up with no JS interactivity at all, so #38 converted it to a pure Astro page (markup + scoped CSS, no Preact component). A good candidate for a framework-free page if we want to go that route.