Modernize our vbuild to use ESM import rather than inlining the JS

nicegui/dependencies.py

@@ -184,8 +184,10 @@ def generate_resources(prefix: str, elements: Iterable[Element]) -> tuple[list[s
     for key, vue_component in vue_components.items():
         if key not in done_components:
             vue_html.append(vue_component.html)
-            vue_scripts.append(vue_component.script.replace(f"Vue.component('{vue_component.name}',",
-                                                            f"app.component('{vue_component.tag}',", 1))
+            url = f'{prefix}/_nicegui/{__version__}/components/{vue_component.key}'
+            js_imports.append(f'import {{ default as {vue_component.name} }} from "{url}";')
+            js_imports.append(f"{vue_component.name}.template = '#tpl-{vue_component.name}';")
+            js_imports.append(f'app.component("{vue_component.tag}", {vue_component.name});')
             vue_styles.append(vue_component.style)
             done_components.add(key)
 

nicegui/nicegui.py

@@ -14,7 +14,7 @@
 from . import air, background_tasks, binding, core, favicon, helpers, json, run, welcome
 from .app import App
 from .client import Client
-from .dependencies import dynamic_resources, esm_modules, js_components, libraries, resources
+from .dependencies import dynamic_resources, esm_modules, js_components, libraries, resources, vue_components
 from .error import error_content
 from .json import NiceGUIJSONResponse
 from .logging import log
@@ -77,9 +77,11 @@ def _get_library(key: str) -> FileResponse:
 
 
 @app.get(f'/_nicegui/{__version__}' + '/components/{key:path}')
-def _get_component(key: str) -> FileResponse:
+def _get_component(key: str) -> Response:
     if key in js_components and js_components[key].path.exists():
         return FileResponse(js_components[key].path, media_type='text/javascript')
+    elif key in vue_components:
+        return Response(vue_components[key].script, media_type='text/javascript')
     raise HTTPException(status_code=404, detail=f'component "{key}" not found')
 
 

nicegui/vbuild.py

@@ -19,7 +19,7 @@ def __init__(self, filepath: Path) -> None:
         self.html = f'<script type="text/x-template" id="tpl-{name}">{html}</script>'
         self.style = '\n'.join(add_css_prefix(style, '') for style in parser.styles) + '\n'
         self.style += '\n'.join(add_css_prefix(style, f'*[data-{name}]') for style in parser.scopedStyles)
-        self.script = create_vue_component(filepath.stem, f'#tpl-{name}', parser.script)
+        self.script = parser.script or ''
 
 
 class VueParser(HTMLParser):  # pylint: disable=abstract-method  # pylint assumes there is an abstract ``error`` method
@@ -81,20 +81,6 @@ def _start_tag_text(self) -> str:
         return text
 
 
-def create_vue_component(name: str, template: str, code: str | None) -> str:
-    """Create a Vue component."""
-    if code is None:
-        js = '{}'
-    else:
-        p1 = code.find('{')
-        p2 = code.rfind('}')
-        if not 0 <= p1 <= p2:
-            raise ValueError('Cannot find valid content inside "{" and "}"')
-        js = code[p1:p2 + 1]
-    js = js.replace('{', f'{{template:"{template}",', 1)
-    return f'''var {name} = Vue.component('{name}', {js});'''
-
-
 def add_css_prefix(css: str, prefix: str) -> str:
     """Add the prefix (CSS selector) to all rules in ``css``."""
     medias: list[tuple[str, str]] = []