No control over the key used for the generated importmap

[simontaurus]

Description

Import map key generation seems to be based on the dependencies filename:

nicegui/nicegui/dependencies.py

Line 126 in 09f4c34

return path.name.split('.', 1)[0]

e.g.

dependencies=['node_modules/@json-editor/json-editor/dist/jsoneditor.js']

leads to the key jsoneditor which is also required in dynamic imports within custom vue components:

import("jsoneditor")

(see also #4162)

However, this may lead to conflicts if two libs use the same filename. Also, it would be preferable to use the correct package name to stay interoperable with other environments (e.g. vite):

import("@json-editor/json-editor")

[falkoschindler]

Thanks for reporting this issue, @simontaurus!
And sorry for keeping you waiting. Now I finally found the time and focus to look into it.

You're absolutely right: Basically using the file name for the importmap key is very fragile and can lead to conflicts rather quickly. I'm just not sure how to improve it.

This is what _get_name is called with when running the NiceGUI website:

/Users/falko/Projects/nicegui/nicegui/elements/aggrid.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/aggrid/ag-grid-community.min.js
/Users/falko/Projects/nicegui/nicegui/elements/audio.js
/Users/falko/Projects/nicegui/nicegui/elements/mermaid.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/mermaid/mermaid.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/mermaid/mermaid.min.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/mermaid/mermaid.esm.min.mjs
/Users/falko/Projects/nicegui/nicegui/elements/lib/mermaid/chunks/mermaid.esm.min/blockDiagram-NDWNTGEE.mjs
/Users/falko/Projects/nicegui/nicegui/elements/lib/mermaid/chunks/mermaid.esm.min/c4Diagram-AUYESYAG.mjs
/Users/falko/Projects/nicegui/nicegui/elements/lib/mermaid/chunks/mermaid.esm.min/chunk-2RSIMOBZ.mjs
...
/Users/falko/Projects/nicegui/nicegui/elements/lib/mermaid/chunks/mermaid.esm.min/xychartDiagram-RLS75X5Z.mjs
/Users/falko/Projects/nicegui/nicegui/elements/markdown.js
/Users/falko/Projects/nicegui/nicegui/elements/timer.js
/Users/falko/Projects/nicegui/nicegui/elements/codemirror.js
/Users/falko/Projects/nicegui/nicegui/elements/colors.js
/Users/falko/Projects/nicegui/nicegui/elements/dark_mode.js
/Users/falko/Projects/nicegui/nicegui/elements/echart.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/echarts/echarts.min.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/echarts-gl/echarts-gl.min.js
/Users/falko/Projects/nicegui/nicegui/elements/editor.js
/Users/falko/Projects/nicegui/nicegui/elements/fullscreen.js
/Users/falko/Projects/nicegui-highcharts/nicegui_highcharts/highchart.js
/Users/falko/Projects/nicegui-highcharts/nicegui_highcharts/lib/highcharts/highcharts.js
/Users/falko/Projects/nicegui-highcharts/nicegui_highcharts/lib/highcharts/highcharts-3d.js
/Users/falko/Projects/nicegui-highcharts/nicegui_highcharts/lib/highcharts/highcharts-more.js
/Users/falko/Projects/nicegui-highcharts/nicegui_highcharts/lib/highcharts/modules/accessibility.js
...
/Users/falko/Projects/nicegui-highcharts/nicegui_highcharts/lib/highcharts/modules/xrange.js
/Users/falko/Projects/nicegui/nicegui/elements/image.js
/Users/falko/Projects/nicegui/nicegui/elements/input.js
/Users/falko/Projects/nicegui/nicegui/elements/interactive_image.js
/Users/falko/Projects/nicegui/nicegui/elements/joystick.vue
/Users/falko/Projects/nicegui/nicegui/elements/joystick.vue
/Users/falko/Projects/nicegui/nicegui/elements/lib/nipplejs/nipplejs.js
/Users/falko/Projects/nicegui/nicegui/elements/json_editor.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/vanilla-jsoneditor/standalone.js
/Users/falko/Projects/nicegui/nicegui/elements/keyboard.js
/Users/falko/Projects/nicegui/nicegui/elements/leaflet.js
/Users/falko/Projects/nicegui/nicegui/elements/link.js
/Users/falko/Projects/nicegui/nicegui/elements/notification.js
/Users/falko/Projects/nicegui/nicegui/elements/plotly.vue
/Users/falko/Projects/nicegui/nicegui/elements/plotly.vue
/Users/falko/Projects/nicegui/nicegui/elements/lib/plotly/plotly.min.js
/Users/falko/Projects/nicegui/nicegui/elements/query.js
/Users/falko/Projects/nicegui/nicegui/elements/scene.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/three/three.module.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/three/modules/BufferGeometryUtils.js
...
/Users/falko/Projects/nicegui/nicegui/elements/lib/three/modules/STLLoader.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/tween/tween.umd.js
/Users/falko/Projects/nicegui/nicegui/elements/scene_view.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/tween/tween.umd.js
/Users/falko/Projects/nicegui/nicegui/elements/lib/three/three.module.js
/Users/falko/Projects/nicegui/nicegui/elements/select.js
/Users/falko/Projects/nicegui/nicegui/elements/table.js
/Users/falko/Projects/nicegui/nicegui/elements/teleport.js
/Users/falko/Projects/nicegui/nicegui/elements/input.js
/Users/falko/Projects/nicegui/nicegui/elements/upload.js
/Users/falko/Projects/nicegui/nicegui/elements/video.js
/Users/falko/Projects/nicegui/nicegui/functions/refreshable.js
/Users/falko/Projects/nicegui/website/documentation/intersection_observer.js

I don't see a generic way to find the library name like "three" or "highcharts" or "nicegui". Or should we simply hash the file path? But how would components like joystick.vue know how to import their dependencies if the prefix isn't deterministic?

await import("???/nipplejs");