#658 code review

examples/single_page_app/router.py

@@ -41,5 +41,7 @@ class Router():
         background_tasks.create(build())
 
     def frame(self) -> ui.element:
-        self.content = ui.element('router_frame').on('open', lambda msg: self.open(msg['args'])).use_component('router_frame')
+        self.content = ui.element('router_frame') \
+            .on('open', lambda msg: self.open(msg['args'])) \
+            .use_component('router_frame')
         return self.content

nicegui/client.py

@@ -70,7 +70,7 @@ class Client:
     def build_response(self, request: Request, status_code: int = 200) -> Response:
         prefix = request.headers.get('X-Forwarded-Prefix', '')
         elements = json.dumps({id: element._to_dict() for id, element in self.elements.items()})
-        (vue_html, vue_styles, vue_scripts, import_maps, js_imports) = generate_resources(prefix, self.elements.values())
+        vue_html, vue_styles, vue_scripts, import_maps, js_imports = generate_resources(prefix, self.elements.values())
         return templates.TemplateResponse('index.html', {
             'request': request,
             'version': __version__,

nicegui/dependencies.py

@@ -1,11 +1,12 @@
 import json
 import warnings
 from pathlib import Path
-from typing import Any, Dict, List, Tuple
+from typing import Any, Dict, List, Set, Tuple
 
 import vbuild
 
 from . import __version__
+from .element import Element
 
 
 class Legacy():
@@ -21,43 +22,43 @@ libraries: Dict[str, Any] = {}
 
 
 def register_vue_component(name: str, path: Path) -> None:
+    """Register a .vue or .js vue component.
+
+    :param name: the component's unique machine-name (used in component `use_library`): no space, no special characters
+    :param path: the component's local path
     """
-    Register a .vue or .js vue component.
-    :param name: the component unique machine-name (used in component `use_library`): no space, no special characters.
-    :param path: the component local path.
-    """
-    index = f'vue_{name}'
+    key = f'vue_{name}'
     suffix = path.suffix.lower()
     assert suffix in {'.vue', '.js', '.mjs'}, 'Only VUE and JS components are supported.'
     if suffix == '.vue':
-        assert index not in vue_components, f'Duplicate VUE component name {name}'
+        assert key not in vue_components, f'Duplicate VUE component name {name}'
         # The component (in case of .vue) is built right away to:
-        #         1. delegate this 'long' process to the bootstrap phase
-        #         2. avoid building the component on every single requests
-        vue_components[index] = vbuild.VBuild(name, path.read_text())
+        # 1. delegate this "long" process to the bootstrap phase
+        # 2. avoid building the component on every single request
+        vue_components[key] = vbuild.VBuild(name, path.read_text())
     elif suffix == '.js':
-        assert index not in js_components, f'Duplicate JS component name {name}'
-        js_components[index] = {'name': name, 'path': path}
+        assert key not in js_components, f'Duplicate JS component name {name}'
+        js_components[key] = {'name': name, 'path': path}
 
 
 def register_library(name: str, path: Path, expose: bool = False) -> None:
-    """
-    Register a  new external library.
-    :param name: the library unique machine-name (used in component `use_library`): no space, no special characters.
-    :param path: the library local path.
-    :param expose: if True, this will be exposed as an ESM module but NOT imported.
+    """Register a new external library.
+
+    :param name: the library's unique machine-name (used in component `use_library`): no space, no special characters
+    :param path: the library's local path
+    :param expose: if True, this will be exposed as an ESM module but NOT imported
     """
     assert path.suffix == '.js' or path.suffix == '.mjs', 'Only JS dependencies are supported.'
-    index = f'lib_{name}'
-    libraries[index] = {'name': name, 'path': path, 'expose': expose}
+    key = f'lib_{name}'
+    libraries[key] = {'name': name, 'path': path, 'expose': expose}
 
 
 def register_component(name: str, py_filepath: str, component_filepath: str, dependencies: List[str] = [],
                        optional_dependencies: List[str] = []) -> None:
-    """
-    Deprecated method. Use `register_vue_component` or `register_library` library instead.
-    """
+    """Deprecated method.
 
+    Use `register_vue_component` or `register_library` library instead.
+    """
     url = f'https://github.com/zauberzeug/nicegui/pull/658'
     warnings.warn(DeprecationWarning(
         f'This function is deprecated. Use either register_vue_component or register_library instead, along with `use_component` or `use_library` ({url}).'))
@@ -73,8 +74,8 @@ def register_component(name: str, py_filepath: str, component_filepath: str, dep
         legacy.libraries.append(f'lib_{name}{idx}')
 
 
-def generate_resources(prefix: str, elements) -> Tuple[str, str, str, str, str]:
-    done = []
+def generate_resources(prefix: str, elements: List[Element]) -> Tuple[str, str, str, str, str]:
+    done: Set[str] = set()
     vue_scripts = ''
     vue_html = ''
     vue_styles = ''
@@ -85,25 +86,25 @@ def generate_resources(prefix: str, elements) -> Tuple[str, str, str, str, str]:
     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 index in element.libraries:
-            if index in libraries and index not in done:
-                if libraries[index]['expose']:
-                    name = libraries[index]['name']
-                    import_maps['imports'][name] = f'{prefix}/_nicegui/{__version__}/library/{index}/include'
+        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:
-                    js_imports += f'import "{prefix}/_nicegui/{__version__}/library/{index}/include";\n'
-                done.append(index)
-        for index in element.components:
-            if index in vue_components and index not in done:
-                vue_html += f'{vue_components[index].html}\n'
-                vue_scripts += f'{vue_components[index].script.replace("Vue.component", "app.component", 1)}\n'
-                vue_styles += f'{vue_components[index].style}\n'
-                done.append(index)
-            if index in js_components and index not in done:
-                name = js_components[index]['name']
-                js_imports += f'import {{ default as {index} }} from "{prefix}/_nicegui/{__version__}/components/{index}";\n'
-                js_imports += f'app.component("{name}", {index});\n'
-                done.append(index)
+                    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'
+                js_imports += f'app.component("{name}", {key});\n'
+                done.add(key)
 
     vue_styles = f'<style>{vue_styles}</style>'
     import_maps = f'<script type="importmap">{json.dumps(import_maps)}</script>'

nicegui/elements/chart.js

@@ -23,11 +23,11 @@ export default {
         this.chart.update(this.options);
       }
     },
-    destroyChart () {
+    destroyChart() {
       if (this.chart) {
-        this.chart.destroy()
+        this.chart.destroy();
       }
-    }
+    },
   },
   props: {
     type: String,

nicegui/elements/chart.py

@@ -81,12 +81,10 @@ optional_dependencies = [
     'lib/highcharts/modules/cylinder.js',
 ]
 register_vue_component(name='chart', path=Path(__file__).parent.joinpath('chart.js'))
-for dependency in dependencies:
-    name = dependency[len('lib/highcharts/'): -len('.js')]
-    register_library(name=name, path=Path(__file__).parent.joinpath(dependency))
-for optional_dependency in optional_dependencies:
-    name = optional_dependency[len('lib/highcharts/modules/'): -len('.js')]
-    register_library(name=name, path=Path(__file__).parent.joinpath(optional_dependency))
+for path in dependencies:
+    register_library(name=Path(path).stem, path=Path(__file__).parent.joinpath(path))
+for path in optional_dependencies:
+    register_library(name=Path(path).stem, path=Path(__file__).parent.joinpath(path))
 
 
 class Chart(Element):
@@ -110,7 +108,9 @@ class Chart(Element):
         self._props['options'] = options
         self._props['extras'] = extras
         self.use_component('chart')
-        self.use_library('highcharts').use_library('highcharts-more').use_library('highcharts-3d')
+        self.use_library('highcharts')
+        self.use_library('highcharts-more')
+        self.use_library('highcharts-3d')
         for extra in extras:
             self.use_library(extra)
         self._props['key'] = self.id  # HACK: workaround for #600

nicegui/elements/joystick.py

@@ -6,7 +6,7 @@ from ..element import Element
 from ..events import JoystickEventArguments, handle_event
 
 register_vue_component(name='joystick', path=Path(__file__).parent.joinpath('joystick.vue'))
-register_library(name='joystick', path=Path(__file__).parent.joinpath('lib', 'nipplejs', 'nipplejs.js'))
+register_library(name='nipplejs', path=Path(__file__).parent.joinpath('lib', 'nipplejs', 'nipplejs.js'))
 
 
 class Joystick(Element):
@@ -46,4 +46,4 @@ class Joystick(Element):
                                                                       action='end')))
         self._props['options'] = options
         self.use_component('joystick')
-        self.use_library('joystick')
+        self.use_library('nipplejs')

nicegui/elements/log.py

@@ -7,6 +7,7 @@ from ..element import Element
 
 register_vue_component(name='log', path=Path(__file__).parent.joinpath('log.js'))
 
+
 class Log(Element):
 
     def __init__(self, max_lines: Optional[int] = None) -> None:

nicegui/elements/markdown.js

@@ -3,20 +3,20 @@ export default {
   async mounted() {
     this.ensure_codehilite_css();
     if (this.use_mermaid) {
-      this.mermaid = (await import('mermaid')).default;
+      this.mermaid = (await import("mermaid")).default;
       this.update(this.$el.innerHTML);
     }
   },
   data() {
     return {
       mermaid: null,
-    }
+    };
   },
   methods: {
     update(content) {
       this.$el.innerHTML = content;
       this.$el.querySelectorAll(".mermaid-pre").forEach(async (pre, i) => {
-        await this.mermaid.run({nodes: [pre.children[0]]});
+        await this.mermaid.run({ nodes: [pre.children[0]] });
       });
     },
     ensure_codehilite_css() {
@@ -33,8 +33,8 @@ export default {
     use_mermaid: {
       required: false,
       default: false,
-      type: Boolean
-    }
+      type: Boolean,
+    },
   },
 };
 

nicegui/elements/mermaid.js

@@ -1,14 +1,14 @@
-import mermaid from 'mermaid';
+import mermaid from "mermaid";
 export default {
   template: `<div></div>`,
   mounted() {
-    this.update(this.content)
+    this.update(this.content);
   },
   methods: {
     async update(content) {
-      this.$el.innerHTML = content
-      this.$el.removeAttribute('data-processed');
-      await mermaid.run({nodes: [this.$el]});
+      this.$el.innerHTML = content;
+      this.$el.removeAttribute("data-processed");
+      await mermaid.run({ nodes: [this.$el] });
     },
   },
   props: {

nicegui/elements/mermaid.py

@@ -4,7 +4,8 @@ from ..dependencies import register_library, register_vue_component
 from .mixins.content_element import ContentElement
 
 register_vue_component(name='mermaid', path=Path(__file__).parent.joinpath('mermaid.js'))
-register_library(name='mermaid', path=Path(__file__).parent.joinpath('lib', 'mermaid', 'mermaid.esm.min.mjs'), expose=True)
+register_library(name='mermaid', path=Path(__file__).parent.joinpath('lib', 'mermaid', 'mermaid.esm.min.mjs'),
+                 expose=True)
 
 
 class Mermaid(ContentElement):

nicegui/elements/plotly.py

@@ -3,10 +3,9 @@ from typing import Dict, Union
 
 import plotly.graph_objects as go
 
-from ..dependencies import register_vue_component, register_library
+from ..dependencies import register_library, register_vue_component
 from ..element import Element
 
-
 register_vue_component(name='plotly', path=Path(__file__).parent.joinpath('plotly.vue'))
 register_library(name='plotly', path=Path(__file__).parent.joinpath('lib', 'plotly', 'plotly.min.js'))
 
@@ -42,7 +41,8 @@ class Plotly(Element):
 
     def update(self) -> None:
         options = self._get_figure_json()
-        options['config'] = {**options['config'], **{'responsive': True}} if 'config' in options else {'responsive': True}
+        options['config'] = \
+            {**options['config'], **{'responsive': True}} if 'config' in options else {'responsive': True}
         self._props['options'] = options
         self.run_method('update', self._props['options'])
 

nicegui/elements/plotly.vue

@@ -5,7 +5,7 @@
 <script>
 export default {
   async mounted() {
-    await this.$nextTick()
+    await this.$nextTick();
     Plotly.newPlot(this.$el.id, this.options.data, this.options.layout, this.options.config);
   },
 

nicegui/elements/query.py

@@ -9,6 +9,7 @@ from ..globals import get_client
 
 register_vue_component(name='query', path=Path(__file__).parent.joinpath('query.js'))
 
+
 class Query(Element):
 
     def __init__(self, selector: str) -> None:

nicegui/elements/scene.js

@@ -1,8 +1,8 @@
-import * as THREE from 'three';
-import { CSS2DRenderer } from 'CSS2DRenderer';
-import { CSS3DRenderer } from 'CSS3DRenderer';
-import { OrbitControls } from 'OrbitControls';
-import { STLLoader } from 'STLLoader';
+import * as THREE from "three";
+import { CSS2DRenderer } from "CSS2DRenderer";
+import { CSS3DRenderer } from "CSS3DRenderer";
+import { OrbitControls } from "OrbitControls";
+import { STLLoader } from "STLLoader";
 
 function texture_geometry(coords) {
   const geometry = new THREE.BufferGeometry();

nicegui/elements/scene.py

@@ -10,12 +10,18 @@ from .scene_object3d import Object3D
 from .scene_objects import Scene as SceneObject
 
 register_vue_component(name='scene', path=Path(__file__).parent.joinpath('scene.js'))
-register_library(name='three', path=Path(__file__).parent.joinpath('lib', 'three', 'three.module.js'), expose=True)
-register_library(name='CSS2DRenderer', path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'CSS2DRenderer.js'), expose=True)
-register_library(name='CSS3DRenderer', path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'CSS3DRenderer.js'), expose=True)
-register_library(name='OrbitControls', path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'OrbitControls.js'), expose=True)
-register_library(name='STLLoader', path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'STLLoader.js'), expose=True)
-register_library(name='tween', path=Path(__file__).parent.joinpath('lib', 'tween', 'tween.umd.js'))
+register_library(name='three',
+                 path=Path(__file__).parent.joinpath('lib', 'three', 'three.module.js'), expose=True)
+register_library(name='CSS2DRenderer',
+                 path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'CSS2DRenderer.js'), expose=True)
+register_library(name='CSS3DRenderer',
+                 path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'CSS3DRenderer.js'), expose=True)
+register_library(name='OrbitControls',
+                 path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'OrbitControls.js'), expose=True)
+register_library(name='STLLoader',
+                 path=Path(__file__).parent.joinpath('lib', 'three', 'modules', 'STLLoader.js'), expose=True)
+register_library(name='tween',
+                 path=Path(__file__).parent.joinpath('lib', 'tween', 'tween.umd.js'))
 
 
 @dataclass

nicegui/nicegui.py

@@ -59,10 +59,9 @@ def get_dependencies(name: str, file: str):
 
 @app.get(f'/_nicegui/{__version__}' + '/components/{name}')
 def get_components(name: str):
-    lib_name = js_components[name]['name']
     if name in js_components and js_components[name]['path'].exists():
         return FileResponse(js_components[name]['path'], media_type='text/javascript')
-    raise HTTPException(status_code=404, detail=f'library "{lib_name}" not found')
+    raise HTTPException(status_code=404, detail=f'library "{name}" not found')
 
 
 @app.on_event('startup')

nicegui/templates/index.html

@@ -14,11 +14,13 @@
     {% if tailwind %}
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/tailwindcss.min.js"></script>
     {% endif %}
+    <!-- NOTE: force Prettier to keep the line break -->
     {{ head_html | safe }}
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/vue.global.prod.js"></script>
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.umd.prod.js"></script>
     {{ import_maps | safe }}
 
+    <!-- NOTE: force Prettier to keep the line break -->
     {{ body_html | safe }}
 
     <div id="app"></div>

npm.json

@@ -2,9 +2,7 @@
   "aggrid": {
     "package": "ag-grid-community",
     "destination": "elements/lib",
-    "keep": [
-      "package/dist/ag-grid-community(\\.min)?\\.js"
-    ],
+    "keep": ["package/dist/ag-grid-community(\\.min)?\\.js"],
     "rename": {
       "package/dist/": ""
     }
@@ -23,18 +21,14 @@
   },
   "mermaid": {
     "destination": "elements/lib",
-    "keep": [
-      "package/dist/.*\\.m?js"
-    ],
+    "keep": ["package/dist/.*\\.m?js"],
     "rename": {
       "package/dist/": ""
     }
   },
   "nipplejs": {
     "destination": "elements/lib",
-    "keep": [
-      "package/dist/nipplejs(\\.min)?\\.js"
-    ],
+    "keep": ["package/dist/nipplejs(\\.min)?\\.js"],
     "rename": {
       "package/dist/": ""
     }
@@ -42,9 +36,7 @@
   "plotly": {
     "package": "plotly.js",
     "destination": "elements/lib",
-    "keep": [
-      "package/dist/plotly(\\.min)?\\.js"
-    ],
+    "keep": ["package/dist/plotly(\\.min)?\\.js"],
     "rename": {
       "package/dist/": ""
     }
@@ -59,7 +51,7 @@
       "package/examples/jsm/loaders/STLLoader(\\.min)?\\.js",
       "package/examples/jsm/libs/tween\\.module\\.min\\.js"
     ],
-    "rename":  {
+    "rename": {
       "package/build/": "",
       "package/examples/jsm/renderers/": "modules/",
       "package/examples/jsm/controls/": "modules/",
@@ -70,48 +62,37 @@
   "tween": {
     "package": "@tweenjs/tween.js",
     "destination": "elements/lib",
-    "keep": [
-      "package/dist/tween\\.umd(\\.min)?\\.js"
-    ],
-    "rename":  {
+    "keep": ["package/dist/tween\\.umd(\\.min)?\\.js"],
+    "rename": {
       "package/dist/": ""
     }
   },
 
   "vue": {
-      "destination": "static",
-      "keep": [
-        "package/dist/vue\\.global(\\.prod)?\\.js"
-      ],
-      "rename":  {
-        "package/dist": ".."
-      }
-    },
+    "destination": "static",
+    "keep": ["package/dist/vue\\.global(\\.prod)?\\.js"],
+    "rename": {
+      "package/dist": ".."
+    }
+  },
   "quasar": {
     "destination": "static",
-    "keep": [
-      "package/dist/quasar\\.umd(\\.prod)?\\.js",
-      "package/dist/quasar(\\.prod)?\\.css"
-    ],
-    "rename":  {
+    "keep": ["package/dist/quasar\\.umd(\\.prod)?\\.js", "package/dist/quasar(\\.prod)?\\.css"],
+    "rename": {
       "package/dist": ".."
     }
   },
   "socket.io": {
     "destination": "static",
-    "keep": [
-      "package/client-dist/socket\\.io(\\.min)?\\.js"
-    ],
-    "rename":  {
+    "keep": ["package/client-dist/socket\\.io(\\.min)?\\.js"],
+    "rename": {
       "package/client-dist": ".."
     }
   },
   "es-module-shims": {
     "destination": "static",
-    "keep": [
-      "package/dist/es-module-shims\\.js"
-    ],
-    "rename":  {
+    "keep": ["package/dist/es-module-shims\\.js"],
+    "rename": {
       "package/dist": ".."
     }
   },