various corrections

nicegui/dependencies.py

@@ -17,6 +17,7 @@ if TYPE_CHECKING:
 class Component:
     key: str
     name: str
+    path: Path
 
     @property
     def tag(self) -> str:
@@ -32,7 +33,7 @@ class VueComponent(Component):
 
 @dataclass(**KWONLY_SLOTS)
 class JsComponent(Component):
-    path: Path
+    pass
 
 
 @dataclass(**KWONLY_SLOTS)
@@ -61,11 +62,16 @@ def register_vue_component(location: Path, base_path: Path = Path(__file__).pare
     """
     path, key, name, suffix = deconstruct_location(location, base_path)
     if suffix == '.vue':
+        if key in vue_components and vue_components[key].path == path:
+            return vue_components[key]
         assert key not in vue_components, f'Duplicate VUE component {key}'
         build = vbuild.VBuild(name, path.read_text())
-        vue_components[key] = VueComponent(key=key, name=name, html=build.html, script=build.script, style=build.style)
+        vue_components[key] = VueComponent(key=key, name=name, path=path,
+                                           html=build.html, script=build.script, style=build.style)
         return vue_components[key]
     if suffix == '.js':
+        if key in js_components and js_components[key].path == path:
+            return js_components[key]
         assert key not in js_components, f'Duplicate JS component {key}'
         js_components[key] = JsComponent(key=key, name=name, path=path)
         return js_components[key]
@@ -83,6 +89,8 @@ def register_library(location: Path, base_path: Path = Path(__file__).parent / '
     """
     path, key, name, suffix = deconstruct_location(location, base_path)
     if suffix in {'.js', '.mjs'}:
+        if key in libraries and libraries[key].path == path:
+            return libraries[key]
         assert key not in libraries, f'Duplicate js library {key}'
         libraries[key] = Library(key=key, name=name, path=path, expose=expose)
         return libraries[key]

nicegui/elements/mermaid.js

@@ -8,7 +8,7 @@ export default {
     async update(content) {
       this.$el.innerHTML = content;
       this.$el.removeAttribute("data-processed");
-      await mermaid.run({ nodes: [this.$el] });
+      this.$nextTick(() => mermaid.run({ nodes: [this.$el] }));
     },
   },
   props: {

nicegui/elements/textarea.py

@@ -3,7 +3,7 @@ from typing import Any, Callable, Dict, Optional
 from .input import Input
 
 
-class Textarea(Input):
+class Textarea(Input, component='input.js'):
 
     def __init__(self,
                  label: Optional[str] = None, *,

nicegui/templates/index.html

@@ -192,6 +192,7 @@
       async function loadDependencies(element) {
         for (const {name, key, tag} of element.components) {
           if (loaded_components.has(name)) continue;
+          if (key.endsWith('.vue')) continue;
           const component = (await import(`{{ prefix | safe }}/_nicegui/{{version}}/components/${key}`)).default;
           app = app.component(tag, component);
           loaded_components.add(name);
@@ -253,8 +254,25 @@
             download: (msg) => download(msg.url, msg.filename),
             notify: (msg) => Quasar.Notify.create(msg),
           };
+          const socketMessageQueue = [];
+          let isProcessingSocketMessage = false;
           for (const [event, handler] of Object.entries(messageHandlers)) {
-            window.socket.on(event, handler);
+            window.socket.on(event, async (...args) => {
+              socketMessageQueue.push(() => handler(...args));
+              if (!isProcessingSocketMessage) {
+                while (socketMessageQueue.length > 0) {
+                  const handler = socketMessageQueue.shift()
+                  isProcessingSocketMessage = true;
+                  try {
+                    await handler();
+                  }
+                  catch (e) {
+                    console.error(e);
+                  }
+                  isProcessingSocketMessage = false;
+                }
+              }
+            });
           }
         },
       }).use(Quasar, {

tests/test_mermaid.py

@@ -53,5 +53,6 @@ def test_replace_mermaid(screen: Screen):
     screen.open('/')
     screen.should_contain('Node_A')
     screen.click('Replace')
+    screen.wait(0.5)
     screen.should_contain('Node_B')
     screen.should_not_contain('Node_A')