svelte for justpy

[sandeep-gh]

Hello,

I am exploring the idea of incorporating Svelte (https://svelte.dev/). Its similar to Vue in many respects. I played around with Svelte just a little bit and i liked it. The language usage seemed simple and intuitive. I am not sure but it also might be tad more efficient than Vue. I was wondering if there is interest in community . If so, would really like to brainstorm the design/approach. At first step would probably do some basic proof-of-concept.

Thanks
-S

[elimintz]

I am not familiar with Svelte. The basic question is how to convert the dict the python part of justpy generates into elements in the browser. This is the Vue component that does this now: https://github.com/elimintz/justpy/blob/master/justpy/templates/js/html_component.js
You would need to write something like this for Svelte

[sandeep-gh]

Thank you for looking into this. Think I can handle the conversion. In Svelte the expression very similar to plain html so the translation should be straightforward. I am stuck currently getting the id of the html components. When does do these get set, if you happen to recall. Currently, when I print the id from the function convert_object_to_dict, it reports None.

[elimintz]

A component gets an id when it needs to referenced by the framework. For example, when there is an event associated with the component. Otherwise, it does not get an id. Print the result of converting any component with an associated event, and you will see it.

The translation is not that straightforward, because you have to render also all the children of any component, so the rendering function needs to be recursive. You need the equivalent of this I think: https://vuejs.org/v2/guide/render-function.html
You cannot just render html, you need a function that generates html.

[sandeep-gh]

Quite nice. Yes, the translation is recursive. Spend a fair deal trying to dechipering that. I am using jinja template macros to recursively generate the corresponding html/svelte code. Will share once it reaches something tangible (hopefully).

[elimintz]

Good luck. My gut feeling is that going for JavaScript rendering https://linguinecode.com/post/how-to-render-a-function-with-html-in-svelte would work better since if an event changes the dom, you do not want to run the svelte compile step. If you need to compile each time you handle an event, it will be highly inefficient