The Crystal Programming Language Forum

Celestite v0.1.2 - a drop-in view layer w/ support for Vue & Svelte components

Hey everyone - @bcardiff suggested I post here to share a project I’ve been working on the past few months (super super MVP - barely alpha stage):

Celestite is a glue framework that enables you to use Vue & Svelte components as your view layer in a Crystal MVC application. Currently built for Amber, but in theory should work with Lucky, Kemal, etc. The idea is that you focus purely on writing the components, and Celestite handles the server & client-side rendering (So no need for intermediate .ECR templates.)

I’m a self-taught dev, so apologies for any crap code, but this is a WIP and any PRs, thoughts, bugs, ideas, etc. would be hugely appreciated!

Currently working on an example project, and as soon as that’s done I’ll share to give a bit more detail. But the README covers a lot.

Thanks!
–Noah

7 Likes

Great readme! It was great at this stage to find what it provides before how to install it.

Knowing if a component does not requiere mounting on the client-side is something you needed to code or Vue and Svelte provides that from the result of the SSR in a way you can use it?

Thanks man!

What you’re asking about is what the frameworks refer to as client-side hydration – SSR gives the initial component + state, then the client mounts and picks up where it left off. Thankfully I didn’t have to write that from scratch – both Vue and Svelte offer that in slightly different ways. Vue requires a bit more glue code (though they discuss it at length in their SSR rendering guide and basically give a roadmap) and Svelte handles it via the Sapper project, which honestly is a lifesaver here – it does about 95% of the heavy lifting.

1 Like