make vue dependency pluggable; allow for other frontend frameworks to be easily integrated

[sandeep-gh]

It would be nice to have options for other browser end frameworks to be easily integrated with justpy. I am currently using svelte with justpy. The changes are not too many. I am noting them down here for later reference. Here is patch that enables me to integrate Svelte. Maybe we can make these parts configurable:

diff --git a/jpcore/template.py b/jpcore/template.py
index 64ac95d..a35e331 100644
--- a/jpcore/template.py
+++ b/jpcore/template.py
@@ -59,7 +59,7 @@ class Context:
         """
         generate the html lines for justpy to work 
         """
-        html=self.as_script_src("justpy_core")
+        html="" #self.as_script_src("justpy_core")
         html+=f"""{indent}<script>
 {indent}  var page_id = {self.page_id_js};
 {indent}  var use_websockets = {self.use_websockets_js};
@@ -67,7 +67,7 @@ class Context:
 """
         html+=self.as_javascript_constructor(indent+"  ")
         html+=f"\n{indent}</script>\n{self.as_script_srcs(indent)}"
-        html+=f"{indent}<script>\n{self.as_javascript_setup(indent)}\n{indent}</script>\n"
+        #html+=f"{indent}<script>\n{self.as_javascript_setup(indent)}\n{indent}</script>\n"
         return html

     def as_script_src(self,file_name:str,indent:str="  "):
@@ -81,17 +81,6 @@ class Context:
         srcs = ""
         for file_name in [
             "event_handler",
-            "html_component",
-            "quasar_component",
-            "chartjp",
-            "aggrid",
-            "iframejp",
-            "deckgl",
-            "altairjp",
-            "plotlyjp",
-            "bokehjp",
-            "katexjp",
-            "editorjp",
         ]:
             srcs +=self.as_script_src(file_name,indent)
         return srcs
@@ -114,21 +103,22 @@ class Context:
         static_resources_url = self.get_url_for("static")
         if static_resources_url is None:
             static_resources_url = "/"
-        javascript = f"""let justpy_core=new JustpyCore(
-            this, // window
-            {self.page_id_js}, // page_id
-            '{self.title_js}', // title
-            '{self.use_websockets_js}', // use_websockets
-            '{self.redirect_js}', // redirect
-            '{self.display_url_js}', // display_url
-            {page_ready}, // page_ready
-            {result_ready}, // result_ready     
-            {reload_interval_ms}, // reload_interval
-            {self.page_options.events},  // events
-            '{static_resources_url}',  // static_resources_url
-            {debug}   // debug
-        );"""
-        javascript = textwrap.indent(javascript, indent)
+        javascript = ""    
+        # javascript = f"""let justpy_core=new JustpyCore(
+        #     this, // window
+        #     {self.page_id_js}, // page_id
+        #     '{self.title_js}', // title
+        #     '{self.use_websockets_js}', // use_websockets
+        #     '{self.redirect_js}', // redirect
+        #     '{self.display_url_js}', // display_url
+        #     {page_ready}, // page_ready
+        #     {result_ready}, // result_ready     
+        #     {reload_interval_ms}, // reload_interval
+        #     {self.page_options.events},  // events
+        #     '{static_resources_url}',  // static_resources_url
+        #     {debug}   // debug
+        # );"""
+        # javascript = textwrap.indent(javascript, indent)
         return javascript

If looks good then I can build a patch and submit.

[elimintz]

Interesting. How do you make a Vue application work in Svelte? You encapsulate all the JavaScript including the Vue library with Svelte code and compile it?

[sandeep-gh]

I am not using Vue application. Basically, I take the jpComponents and pass it through a Svelte function, which recursively renders all the html components. The key feature of svelte that allowed to build this is called svelte:element (https://svelte.dev/tutorial/svelte-element). Basically, you can at run time render a html component. There are still some kinks with some htmlcomponents like select and svg. But the svelte team is pretty responsive and do take note of the issues.

[elimintz]

How do you handle the Quasar components? Or plots? If I understand correctly, it is not just a matter of writing a wrapper. You rewrote https://github.com/justpy-org/justpy/blob/master/justpy/templates/js/html_component.js ? It is a Vue component. What do you use instead?

[falkoschindler]

@sandeep-gh I didn't know Svelte, but it looks interesting. Being able to plug and play the frontend framework would definitely be nice. But I just wonder what would be the motivation behind changing it. Isn't one advantage of using JustPy that you don't need to bother about the frontend implementation? Are there performance aspects or other technical considerations?

[sandeep-gh]

@elimintz yes, I rewrote the html_components.js. It is not a Vue component. Its a Svelte component that works similarly, It walks through the justpyComponent json and recursively instantiate itself. The code can be found here (https://github.com/sandeep-gh/justpy/blob/with_svelte/justpy/templates/js/svelte/src/Htmlcomponent.svelte). I am not supporting Quasar (or other libraries) at the moment. I found Quasar to be bit sluggish for my needs.

[sandeep-gh]

@falkoschindler There are certainly technical differences between Vue and Svelte but I am not certain about them w.r.t to Justpy use case. In general, you would expect Svelte to be faster than Vue because Svelte is pre-compiled to raw javascript while in Vue all rendering is done via library calls. But in Justpy use case, all components are generated dynamically, so not sure which one is better in terms of raw performance.

My inclination for Svelte same as that for Justpy. Svelte code seemed way more straightforward then Vue code. I wasn't able make much headway with Vue even after going over docs/etc.

[sandeep-gh]

Need to build/run the tests.

[sandeep-gh]

why am i getting workflow complete with no jobs: https://github.com/justpy-org/justpy/pull/545/checks for the build/test checks ?

[WolfgangFahl]

see #685