custom: extract base class for custom views

custom_test.py

@@ -2,9 +2,9 @@
 from nicegui import ui
 
 with ui.card():
-    custom = ui.custom(on_change=lambda number: label.set_text(f'Custom value: {number}'))
+    example = ui.custom_example(on_change=lambda number: label.set_text(f'Custom value: {number}'))
 
-ui.button('Add 100', on_click=lambda: custom.add(100))
+ui.button('Add 100', on_click=lambda: example.add(100))
 
 label = ui.label()
 

nicegui/elements/custom.py

@@ -1,54 +0,0 @@
-import justpy as jp
-import os.path
-from .element import Element
-
-class CustomView(jp.JustpyBaseComponent):
-
-    vue_type = 'custom'
-
-    def __init__(self, on_change):
-
-        self.pages = {}
-        self.classes = ''
-        self.options = jp.Dict(value=0)
-
-        self.on_change = on_change
-
-        super().__init__()
-        self.allowed_events = ['onAdd']
-        self.initialize(temp=False, onAdd=self.onAdd)
-
-    def add_page(self, wp: jp.WebPage):
-
-        jp.component_file_list += ['file?path=' + os.path.realpath(__file__).replace('.py', '.js')]
-
-        super().add_page(wp)
-
-    def react(self, _):
-
-        pass
-
-    def convert_object_to_dict(self):
-
-        return {
-            'vue_type': self.vue_type,
-            'id': self.id,
-            'show': True,
-            'options': self.options,
-        }
-
-    def onAdd(self, msg):
-
-        self.options.value += msg.number
-        self.on_change(self.options.value)
-
-class Custom(Element):
-
-    def __init__(self, *, on_change):
-
-        super().__init__(CustomView(on_change))
-
-    def add(self, number: str):
-
-        self.view.options.value += number
-        self.view.on_change(self.view.options.value)

nicegui/elements/custom.js → nicegui/elements/custom_example.js

@@ -1,7 +1,7 @@
-Vue.component("custom", {
+Vue.component("custom_example", {
   template: `
   <button v-bind:id="jp_props.id">
-    <strong>Custom component</strong><br/>
+    <strong>Custom example component</strong><br/>
     Value = {{jp_props.options.value}}<br/>
     Click to add 1!
     </button>`,

nicegui/elements/custom_example.py

@@ -0,0 +1,32 @@
+import os.path
+from .custom_view import CustomView
+from .element import Element
+
+class CustomExampleView(CustomView):
+
+    vue_type = 'custom_example'
+    vue_filepath = os.path.realpath(__file__).replace('.py', '.js')
+
+    def __init__(self, on_change):
+
+        self.on_change = on_change
+
+        super().__init__(value=0)
+        self.allowed_events = ['onAdd']
+        self.initialize(temp=False, onAdd=self.handle_add)
+
+    def handle_add(self, msg):
+
+        self.options.value += msg.number
+        self.on_change(self.options.value)
+
+class CustomExample(Element):
+
+    def __init__(self, *, on_change):
+
+        super().__init__(CustomExampleView(on_change))
+
+    def add(self, number: str):
+
+        self.view.options.value += number
+        self.view.on_change(self.view.options.value)

nicegui/elements/custom_view.py

@@ -0,0 +1,41 @@
+import justpy as jp
+
+class CustomView(jp.JustpyBaseComponent):
+
+    vue_dependencies = []
+
+    def __init__(self, **options):
+
+        self.pages = {}
+        self.classes = ''
+        self.options = jp.Dict(**options)
+
+        super().__init__()
+
+        self.initialize(temp=False)
+
+    def add_page(self, wp: jp.WebPage):
+
+        marker = '<!--' + self.__module__ + '-->\n'
+        if marker not in wp.head_html:
+            wp.head_html += marker
+            for dependency in self.vue_dependencies:
+                wp.head_html += f'<script src="{dependency}"></script>\n'
+
+        if self.vue_filepath not in jp.component_file_list:
+            jp.component_file_list += ['file?path=' + self.vue_filepath]
+
+        super().add_page(wp)
+
+    def react(self, _):
+
+        pass
+
+    def convert_object_to_dict(self):
+
+        return {
+            'vue_type': self.vue_type,
+            'id': self.id,
+            'show': True,
+            'options': self.options,
+        }

nicegui/elements/joystick.py

@@ -1,47 +1,23 @@
-import justpy as jp
 import os.path
+from .custom_view import CustomView
 from .element import Element
 
-class JoystickView(jp.JustpyBaseComponent):
+class JoystickView(CustomView):
 
     vue_type = 'joystick'
+    vue_filepath = os.path.realpath(__file__).replace('.py', '.js')
+    vue_dependencies = [
+        'https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js',
+    ]
 
     def __init__(self, on_move):
 
-        self.pages = {}
-        self.classes = ''
-        self.options = jp.Dict()
-
         self.on_move = on_move
 
         super().__init__()
         self.allowed_events = ['onMove']
         self.initialize(temp=False, onMove=self.handle_move)
 
-    def add_page(self, wp: jp.WebPage):
-
-        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, _):
-
-        pass
-
-    def convert_object_to_dict(self):
-
-        return {
-            'vue_type': self.vue_type,
-            'id': self.id,
-            'show': True,
-            'options': self.options,
-        }
-
     def handle_move(self, msg):
 
         self.on_move(msg.data)

nicegui/elements/three.py

@@ -1,48 +1,24 @@
-import justpy as jp
 import os.path
+from .custom_view import CustomView
 from .element import Element
 
-class ThreeView(jp.JustpyBaseComponent):
+class ThreeView(CustomView):
 
     vue_type = 'three'
+    vue_filepath = os.path.realpath(__file__).replace('.py', '.js')
+    vue_dependencies = [
+        'https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js',
+        'https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/controls/OrbitControls.js',
+    ]
 
     def __init__(self, on_click):
 
-        self.pages = {}
-        self.classes = ''
-        self.options = jp.Dict(camera_z=4)
-
         self.on_click = on_click
 
-        super().__init__()
+        super().__init__(camera_z=4)
         self.allowed_events = ['onClick']
         self.initialize(temp=False, onClick=self.handle_click)
 
-    def add_page(self, wp: jp.WebPage):
-
-        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, _):
-
-        pass
-
-    def convert_object_to_dict(self):
-
-        return {
-            'vue_type': self.vue_type,
-            'id': self.id,
-            'show': True,
-            'options': self.options,
-        }
-
     def handle_click(self, msg):
 
         self.on_click(msg.objects)

nicegui/ui.py

@@ -2,7 +2,7 @@ class Ui:
 
     from .elements.button import Button as button
     from .elements.checkbox import Checkbox as checkbox
-    from .elements.custom import Custom as custom
+    from .elements.custom_example import CustomExample as custom_example
     from .elements.icon import Icon as icon
     from .elements.input import Input as input
     from .elements.joystick import Joystick as joystick