Is it possible to have static parts (parts that are not manipulated by the live view engine) dynamicaly generated in an leex coponent

Hello Felas,

I have been using a live component to present some data of a structure.
The structure includes a field that is suppose to be a link that I am using to render it’s content transformed dynamicaly using javascript/jquery as an Svg inside a div. The problem is that as soon as the rendering completes although I am able to see the rendered content after a second or so the rendered content (the svg) is being erased.
My assumption is that the the live view engine is tracking the changes of the file and as the svg is dynamically placed inside it just does not include it with the next rendering of the view .

Is my assuption correct ?
Is there any clean way to just come around my problem ? Or am I using the live view component all wrong ?

Have a look at this note in the docs regarding SVG support.

Without knowing more of what your LiveComponent does, the docs have this to say on the matter (same page as previous link):

You should also avoid using stateful components to provide abstract DOM components. As a guideline, a good LiveComponent encapsulates application concerns and not DOM functionality. For example, if you have a page that shows products for sale, you can encapsulate the rendering of each of those products in a component. This component may have many buttons and events within it. On the opposite side, do not write a component that is simply encapsulating generic DOM components.

1 Like

Yes, that’s how LiveView behaves. You need to keep what you are going to render in memory. The good news is that LiveView does change tracking. For example, suppose you are generating QR Code for Two-factor authentication (2FA). The QR Code in SVG is expensive to keep in memory (a couple Kbs) but you only need to keep the 2FA secret in your state and in your template you do this:

<%= generate_qrcode(@secret) %>

Because of change tracking, if the secret doesn’t change, you won’t generate a new qrcode either.

Alternatively, you can use phx-update=“ignore” so we don’t modify the contents of the div even if an empty container is sent from LiveView.

1 Like

Thank you, for me the svg generation is indeed application concern but since I am using a third party library to generate and then inject it inside an html element I cannot somehow let the template in advance know about it.
I am sorry if I am being cryptic but I am just not sure I am allowed to share deatils regarding exaclty what is it that I am doing.

Thank you for your help,
The generating process itself is in the magnitude of seconds for me so, phx-update=“ignore” is the way to go.
I am not sure how I missed it in the documentation but I am really thankfoul for you saved my day.