superchris
Live-templates - connect a front-end template to a LiveState phoenix channel
live-templates is a library that allows you to drop a template into a static html website that will be connected to a LiveState phoenix channel on the backend. It eliminates the need to develop a custom element (or any other javascript) to build simple LiveState based applications. This is the very first release, so it’s early times, but it is far enough along to prove that the idea is viable and get deployed examples working. I’d love community feedback. This obviously overlaps with LiveView, but uses a somewhat different approach which makes it likely a better fit for cases such as static html websites or PWAs.
Most Liked
superchris
New version shipped as 0.4.0. Notably additions include:
- Upgraded to Sprae 9.0.1
- Declarative event sending eg
<button :sendclick="foo">instead of<button :onclick="sendEvent('foo'"> - Fully worked CRUD example
Next goal: client side navigation.
superchris
Those are interesting thoughts. I’m definitely a fan of Lit, but my goal with LiveState and by extension, live-templates is to keep as close as I can to web standards and avoid coupling to any particular implementation (eg Lit) as much as I can. This influenced my thoughts on template implementation as well. Though they are still developing, there are a couple of standards, template instantiation and DOM parts, that are making their way through the standards process and which the template library I chose is based on. This should make it pretty straightforward to swap out if I needed to, and to ditch altogether if templating makes it all the way into the browser.
As far as what you are talking about with heex rendering into lit element templates, this sounds a bit like the idea I was exploring that initially led me to create LiveState in the first place. I initially attempted to get Liveview to render into a custom element. I got some basic examples working with a greatly hacked version of Liveview, but it quickly became clear that it would require something close to a rewrite of Liveview for it to work. In a way, if you squint really hard, you can think of live-template as the very beginning of a possible reimagining or reimplemenation of Liveview, though it is much too soon to say how far it will get.
All that said though, I would absolutely welcome contributions. It is also quite possible I didn’t understand all your ideas, and sometimes seeing things in code makes is easier (at least for me) to grok than words.
superchris
Oh, and on the subject of PWA: on the next examples I plan to build is a PWA, I’ll add that to the README when I do.
chasers
@superchris this is very cool!
superchris
This was my first thought as well, but unfortunately it doesn’t quite turn out to be as simple as that. What I set out to do (and others have as well) is to allow an html author to define their own template in html. In order for this to work, you need to somehow grab the template out of html and evaluate it. This would require you dynamically build a template literal at runtime, which is sadly not a thing AFAIK.
As I mentioned, others have been working on this, including Justin Fagnani one of the main Lit contributors. He came up with Stampino but it has not been maintained. My first template approach was to use a forked version of Stampino. I ran into an issue I thought was with Stampino that in the end was not really a Stampino issue at all, but I had switched to templize already and just kept rolling.
For additional context, here are the Template Instantiation and DOM Parts specs. I think its likely some version of these will emerge that will be the standards based solution, for now there are several “prollyfill” implementations worth checking out.








