Update for importmap and .vue file component support.

nicegui/dependencies.py

@@ -82,24 +82,30 @@ def generate_resources(prefix: str, elements: List[Element]) -> Tuple[str, str,
     js_imports = ''
     import_maps = {'imports': {}}
 
+    # Build the importmap structure for exposed libraries.
+    for key in libraries:
+        if key not in done and libraries[key]['expose']:
+            name = libraries[key]['name']
+            import_maps['imports'][name] = f'{prefix}/_nicegui/{__version__}/library/{key}/include'
+            done.add(key)
+    # Build the none optimized component (ie, the vue component).
+    for key in vue_components:
+        if key not in done:
+            vue_html += f'{vue_components[key].html}\n'
+            vue_scripts += f'{vue_components[key].script.replace("Vue.component", "app.component", 1)}\n'
+            vue_styles += f'{vue_components[key].style}\n'
+            done.add(key)
+
     # Build the resources associated with the elements.
     all_elements = list(elements)  # @todo remove all_elements when legacy support is dropped.
     all_elements.append(legacy)
     for element in all_elements:  # @todo 'in elements' iteration when legacy support is dropped.
         for key in element.libraries:
             if key in libraries and key not in done:
-                if libraries[key]['expose']:
-                    name = libraries[key]['name']
-                    import_maps['imports'][name] = f'{prefix}/_nicegui/{__version__}/library/{key}/include'
-                else:
+                if not libraries[key]['expose']:
                     js_imports += f'import "{prefix}/_nicegui/{__version__}/library/{key}/include";\n'
                 done.add(key)
         for key in element.components:
-            if key in vue_components and key not in done:
-                vue_html += f'{vue_components[key].html}\n'
-                vue_scripts += f'{vue_components[key].script.replace("Vue.component", "app.component", 1)}\n'
-                vue_styles += f'{vue_components[key].style}\n'
-                done.add(key)
             if key in js_components and key not in done:
                 name = js_components[key]['name']
                 js_imports += f'import {{ default as {key} }} from "{prefix}/_nicegui/{__version__}/components/{key}";\n'

nicegui/elements/joystick.py

@@ -45,5 +45,4 @@ class Joystick(Element):
                                                                       client=self.client,
                                                                       action='end')))
         self._props['options'] = options
-        self.use_component('joystick')
         self.use_library('nipplejs')

nicegui/elements/plotly.py

@@ -30,7 +30,6 @@ class Plotly(Element):
         super().__init__('plotly')
 
         self.figure = figure
-        self.use_component('plotly')
         self.use_library('plotly')
         self.update()
 

nicegui/templates/index.html

@@ -71,10 +71,17 @@
       }
       function renderRecursively(elements, id) {
         const element = elements[id];
+        if (element === undefined) {
+            return;
+        }
 
+        // @todo: Try avoid this with better handling of initial page load.
         for (const component of element['components']) {
           loaded.push(component);
         }
+        for (const library of element['libraries']) {
+          loaded.push(library);
+        }
 
         const props = {
           id: element.id,
@@ -183,9 +190,14 @@
           });
           window.socket.on("update", async (msg) => {
             for (const [id, element] of Object.entries(msg)) {
+              for (const library of element['libraries']) {
+                if (!loaded.includes(library)) {
+                  await import(`{{ prefix | safe }}/_nicegui/0.1.0/library/${library}/include`);
+                  loaded.push(library);
+                }
+              }
               for (const component of element['components']) {
                 if (!loaded.includes(component)) {
-                  console.log('TRY TO LOAD COMPONENT', component);
                   const { default: vue_component } = await import(`{{ prefix | safe }}/_nicegui/0.1.0/components/${component}`);
                   app = app.component(component.replace('vue_', ''), vue_component);
                   loaded.push(component);