Need suggestion to cover client side javascript for liveview

I also use Javascript hooks for such interactions. Indeed, it has some complexity.

Recently, I am thinking to investigate LiveSvelte for this particular part, however, I have not experimented yet.

I’ve been using AlpineJS with success. There are few integration issues that occurred post LV 0.20.1 but one can work around them.

Could you name some of these problems please?

Unfortunately, there is a bit of a learning curve, especially for Elixir developer when customizing!!

If I do it pure with hook I think I am going to taste XSS and after 10 or 12 big component I am going to be dived deep inside black hole

I use ReactJS and Nextjs myself.

Sometimes it happens that the Alpine data in a LiveComponent does not get initialized, so you need to have a simple hook initializing it yourself.

In certain cases, you even need to do this on updates (not just on mounted), or otherwise the JS code crashes. Having to do this on updates may be an issue for in such cases (and I am talking about really complex components e.g. LiveComponents within a stream within LiveComponents within a stream, ..) the data that gets initialized this way with your hook also gets reset.

Personally, I have managed to circumvent all the issues and the app is working really well in a staging environment (AWS/Kubernetes) and overall, I am satisfied with AlpineJS despite those issues with the integration.

Also, I have agreed with an AlpineJS library developer to check a demo of mine once LV 1.0 final is out, so we can at least understand if it’s really a LV issue or an Alpine issue and if possible to make them work smoothly again.

Could you share some components that you are using Alpine with LiveView hook? if it is possible?

Update

Why you did not use something like svelte that has less size in bundle size? is there any reason?

What XSS issues were you experiencing in your hooks implementation?

Can’t share the components. It’s a proprietary platform. But here’s what I do..

const InitAlpine = {
  mounted() {
    Alpine.initTree( this.el);
  },
  updated() {
    Alpine.initTree( this.el);
  }
};

or

const InitAlpineMounted = {
  mounted() {
    Alpine.initTree( this.el);
  }
};

An item LiveComponent

<div
  id={@id} phx-hook={@mutation == :insert && "InitAlpineMounted"} 
  ..
  x-data=".."
  x-init=".."
>
  ..
</div>

I use Alpine and not svelte because it was given to me as a requirement and at the time I started using it neither myself nor the client were aware of a viable LV-svelte integration (still not sure if there was one).

It is not about LiveView, I was talking about pure js that I want to create and connect to liveview

2 safe functions can be an unacceptable vulnerable

We’ve had good success using Custom Elements AKA Web Components as a means for integrating client JS with LiveView. We’ve put out LiveElements as a library to make this process easier.