fix website

nicegui/client.py

@@ -77,10 +77,10 @@ class Client:
             'client_id': str(self.id),
             'elements': elements,
             'head_html': self.head_html,
-            'body_html': f'{vue_styles}\n{self.body_html}\n{vue_html}',
-            'vue_scripts': vue_scripts,
+            'body_html': '<style>' + '\n'.join(vue_styles) + '</style>\n' + self.body_html + '\n' + '\n'.join(vue_html),
+            'vue_scripts': '\n'.join(vue_scripts),
             'imports': json.dumps(imports),
-            'js_imports': js_imports,
+            'js_imports': '\n'.join(js_imports),
             'title': self.page.resolve_title(),
             'viewport': self.page.resolve_viewport(),
             'favicon_url': get_favicon_url(self.page, prefix),

nicegui/dependencies.py

@@ -90,13 +90,17 @@ def deconstruct_location(location: Path, base_path: Path) -> Tuple[Path, str, st
     return base_path / location, str(location), location.name.split('.', 1)[0], location.suffix.lower()
 
 
-def generate_resources(prefix: str, elements: List[Element]) -> Tuple[str, str, str, str, str]:
+def generate_resources(prefix: str, elements: List[Element]) -> Tuple[List[str],
+                                                                      List[str],
+                                                                      List[str],
+                                                                      Dict[str, str],
+                                                                      List[str]]:
     done_libraries: Set[str] = set()
     done_components: Set[str] = set()
-    vue_scripts: str = ''
-    vue_html: str = ''
-    vue_styles: str = ''
-    js_imports: str = ''
+    vue_scripts: List[str] = []
+    vue_html: List[str] = []
+    vue_styles: List[str] = []
+    js_imports: List[str] = []
     imports: Dict[str, str] = {}
 
     # build the importmap structure for exposed libraries
@@ -108,26 +112,24 @@ def generate_resources(prefix: str, elements: List[Element]) -> Tuple[str, str,
     # build the none-optimized component (i.e. the Vue component)
     for key, component in vue_components.items():
         if key not in done_components:
-            vue_html += f'{component.html}\n'
-            vue_scripts += component.script.replace(f"Vue.component('{component.name}',",
-                                                    f"app.component('{component.tag}',", 1) + '\n'
-            vue_styles += f'{component.style}\n'
+            vue_html.append(component.html)
+            vue_scripts.append(component.script.replace(f"Vue.component('{component.name}',",
+                                                        f"app.component('{component.tag}',", 1))
+            vue_styles.append(component.style)
             done_components.add(key)
 
     # build the resources associated with the elements
     for element in elements:
-        if key.startswith('nipple'):
-            print(key, flush=True)
-        for key in element.libraries:
-            if key in libraries and key not in done_libraries:
-                if not libraries[key].expose:
-                    js_imports += f'import "{prefix}/_nicegui/{__version__}/libraries/{key}";\n'
-                done_libraries.add(key)
-        for key in element.components:
-            if key in js_components and key not in done_components:
-                component = js_components[key]
-                js_imports += f'import {{ default as {component.name} }} from "{prefix}/_nicegui/{__version__}/components/{key}";\n'
-                js_imports += f'app.component("{component.tag}", {component.name});\n'
-                done_components.add(key)
-    vue_styles = f'<style>{vue_styles}</style>'
+        for library in element.libraries:
+            if library.key not in done_libraries:
+                if not library.expose:
+                    js_imports.append(f'import "{prefix}/_nicegui/{__version__}/libraries/{library.key}";')
+                done_libraries.add(library.key)
+        for component in element.components:
+            if component.key not in done_components:
+                js_imports.extend([
+                    f'import {{ default as {component.name} }} from "{prefix}/_nicegui/{__version__}/components/{component.key}";',
+                    f'app.component("{component.tag}", {component.name});',
+                ])
+                done_components.add(component.key)
     return vue_html, vue_styles, vue_scripts, imports, js_imports

nicegui/element.py

@@ -42,8 +42,8 @@ class Element(Visibility):
         self._props: Dict[str, Any] = {'key': self.id}  # HACK: workaround for #600 and #898
         self._event_listeners: Dict[str, EventListener] = {}
         self._text: Optional[str] = None
-        self.components: List[str] = []
-        self.libraries: List[str] = []
+        self.components: List[JsComponent] = []
+        self.libraries: List[Library] = []
         self.slots: Dict[str, Slot] = {}
         self.default_slot = self.add_slot('default')
 
@@ -98,8 +98,8 @@ class Element(Visibility):
             'text': self._text,
             'slots': self._collect_slot_dict(),
             'events': [listener.to_dict() for listener in self._event_listeners.values()],
-            'libraries': self.libraries,
-            'components': self.components,
+            'components': [{'key': c.key, 'name': c.name, 'tag': c.tag} for c in self.components],
+            'libraries': [{'key': l.key, 'name': l.name} for l in self.libraries],
         }
 
     @staticmethod
@@ -310,10 +310,10 @@ class Element(Visibility):
 
     def use_component(self, component: JsComponent) -> Self:
         """Register a ``*.js`` Vue component to be used by this element."""
-        self.components.append(component.key)
+        self.components.append(component)
         return self
 
     def use_library(self, library: Library) -> Self:
         """Register a JavaScript library to be used by this element."""
-        self.libraries.append(library.key)
+        self.libraries.append(library)
         return self

nicegui/elements/markdown.py

@@ -8,6 +8,7 @@ import markdown2
 from pygments.formatters import HtmlFormatter
 
 from ..dependencies import register_vue_component
+from .mermaid import library as mermaid_library
 from .mixins.content_element import ContentElement
 
 component = register_vue_component(Path('markdown.js'))
@@ -30,7 +31,7 @@ class Markdown(ContentElement):
         self.use_component(component)
         if 'mermaid' in extras:
             self._props['use_mermaid'] = True
-            self.use_library('mermaid')
+            self.use_library(mermaid_library)
 
     def on_content_change(self, content: str) -> None:
         html = prepare_content(content, extras=' '.join(self.extras))

nicegui/elements/mermaid.js

@@ -1,4 +1,4 @@
-import mermaid from "mermaid/mermaid.esm.min.mjs";
+import mermaid from "mermaid";
 export default {
   template: `<div></div>`,
   mounted() {

nicegui/elements/plotly.py

@@ -27,7 +27,7 @@ class Plotly(Element):
         :param figure: Plotly figure to be rendered. Can be either a `go.Figure` instance, or
                        a `dict` object with keys `data`, `layout`, `config` (optional).
         """
-        super().__init__('nicegui-plotly')
+        super().__init__(component.tag)
         self.use_library(library)
 
         self.figure = figure

nicegui/functions/refreshable.py

@@ -9,7 +9,7 @@ from ..dependencies import register_vue_component
 from ..element import Element
 from ..helpers import KWONLY_SLOTS, is_coroutine_function
 
-component = register_vue_component(Path('refreshable.js'))
+component = register_vue_component(Path('refreshable.js'), base_path=Path(__file__).parent.parent / 'functions')
 
 
 @dataclass(**KWONLY_SLOTS)

nicegui/templates/index.html

@@ -105,8 +105,8 @@
         }
 
         // @todo: Try avoid this with better handling of initial page load.
-        element['components'].forEach((component) => loaded_components.add(component));
-        element['libraries'].forEach((library) => loaded_libraries.add(library));
+        element.components.forEach((component) => loaded_components.add(component));
+        element.libraries.forEach((library) => loaded_libraries.add(library));
 
         const props = {
           id: 'c' + element.id,
@@ -190,17 +190,17 @@
       }
 
       async function loadDependencies(element) {
-        for (const name of element['libraries']) {
-          if (loaded_libraries.has(name)) continue;
-          await import(`{{ prefix | safe }}/_nicegui/{{version}}/libraries/${name}`);
-          loaded_libraries.add(name);
-        }
-        for (const name of element['components']) {
+        for (const {name, key, tag} of element.components) {
           if (loaded_components.has(name)) continue;
-          const component = (await import(`{{ prefix | safe }}/_nicegui/{{version}}/components/${name}`)).default;
-          app = app.component(name, component);
+          const component = (await import(`{{ prefix | safe }}/_nicegui/{{version}}/components/${key}`)).default;
+          app = app.component(tag, component);
           loaded_components.add(name);
         }
+        for (const {name, key} of element.libraries) {
+          if (loaded_libraries.has(name)) continue;
+          await import(`{{ prefix | safe }}/_nicegui/{{version}}/libraries/${key}`);
+          loaded_libraries.add(name);
+        }
       }
 
       let app = Vue.createApp({