custom: load Vue components from arbitrary location

nicegui/elements/custom.py

@@ -1,4 +1,5 @@
 import justpy as jp
+import os.path
 from .element import Element
 
 class CustomView(jp.JustpyBaseComponent):
@@ -17,9 +18,11 @@ class CustomView(jp.JustpyBaseComponent):
         self.allowed_events = ['onAdd']
         self.initialize(temp=False, onAdd=self.onAdd)
 
-    def add_to_page(self, wp: jp.WebPage):
+    def add_page(self, wp: jp.WebPage):
 
-        wp.add_component(self)
+        jp.component_file_list += ['file?path=' + os.path.realpath(__file__).replace('.py', '.js')]
+
+        super().add_page(wp)
 
     def react(self, _):
 

nicegui/elements/joystick.py

@@ -1,4 +1,5 @@
 import justpy as jp
+import os.path
 from .element import Element
 
 class JoystickView(jp.JustpyBaseComponent):
@@ -19,7 +20,13 @@ class JoystickView(jp.JustpyBaseComponent):
 
     def add_page(self, wp: jp.WebPage):
 
-        wp.head_html += '<script src="https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js"></script>'
+        marker = '<!--' + self.__module__ + '-->\n'
+        if marker not in wp.head_html:
+            wp.head_html += marker
+            wp.head_html += '<script src="https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js"></script>\n'
+
+        jp.component_file_list += ['file?path=' + os.path.realpath(__file__).replace('.py', '.js')]
+
         super().add_page(wp)
 
     def react(self, _):

nicegui/elements/three.py

@@ -1,4 +1,5 @@
 import justpy as jp
+import os.path
 from .element import Element
 
 class ThreeView(jp.JustpyBaseComponent):
@@ -19,8 +20,14 @@ class ThreeView(jp.JustpyBaseComponent):
 
     def add_page(self, wp: jp.WebPage):
 
-        wp.head_html += '<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script>'
-        wp.head_html += '<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/controls/OrbitControls.js"></script>'
+        marker = '<!--' + self.__module__ + '-->\n'
+        if marker not in wp.head_html:
+            wp.head_html += marker
+            wp.head_html += '<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script>\n'
+            wp.head_html += '<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/controls/OrbitControls.js"></script>\n'
+
+        jp.component_file_list += ['file?path=' + os.path.realpath(__file__).replace('.py', '.js')]
+
         super().add_page(wp)
 
     def react(self, _):

nicegui/nicegui.py

@@ -21,10 +21,17 @@ if not inspect.stack()[-2].filename.endswith('spawn.py'):
     uvicorn.run('nicegui:app', host='0.0.0.0', port=80, lifespan='on', reload=True)
     sys.exit()
 
+@jp.SetRoute('/file')
+def get_file(request):
+    wp = jp.WebPage()
+    with open(request.query_params.get('path')) as f:
+        wp.html = f.read()
+    return wp
+
 wp = jp.QuasarPage(delete_flag=False, title='NiceGUI', favicon='favicon.png')
 wp.tailwind = True  # use Tailwind classes instead of Quasars
 wp.css = HtmlFormatter().get_style_defs('.codehilite')
-wp.head_html = '<script>confirm = () => true;</script>'  # avoid confirmation dialog for reload
+wp.head_html += '<script>confirm = () => true;</script>\n'  # avoid confirmation dialog for reload
 
 main = jp.Div(a=wp, classes='q-ma-md column items-start', style='row-gap: 1em')
 main.add_page(wp)

nicegui/static/templates/main.html

@@ -1,5 +1,5 @@
 {% for file_name in options.component_file_list %}
-    <script src={{ url_for(options.static_name, path=file_name) }}></script>
+    <script src="{{ file_name }}"></script>
 {% endfor %}
 
 <script>
@@ -300,4 +300,4 @@
         }
     });
 
-</script>
+</script>