Fix ESM component module resolution (#7684)

* Fix ESM component module resolution * Fix eslint errors
holoviz · Feb 3, 2025 · 101d6d2 · 101d6d2
1 parent 935acd4
commit 101d6d2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/panel/custom.py b/panel/custom.py
@@ -34,7 +34,7 @@
 from .reactive import (  # noqa
     Reactive, ReactiveCustomBase, ReactiveHTML, ReactiveMetaBase,
 )
-from .util import camel_to_kebab, classproperty
+from .util import classproperty
 from .util.checks import import_available
 from .viewable import (  # noqa
     Child, Children, Layoutable, Viewable, Viewer, is_viewable_param,
@@ -429,7 +429,7 @@ def _get_properties(self, doc: Document | None) -> dict[str, Any]:
         data_props['esm_constants'] = self._constants
         props.update({
             'bundle': bundle_hash,
-            'class_name': camel_to_kebab(cls.__name__),
+            'class_name': cls.__name__,
             'data': self._data_model(**{p: v for p, v in data_props.items() if p not in ignored}),
             'dev': config.autoreload or getattr(self, '_debug', False),
             'esm': self._render_esm(not config.autoreload, server=is_session),

diff --git a/panel/models/reactive_esm.ts b/panel/models/reactive_esm.ts
@@ -213,7 +213,7 @@ export class ReactiveESMView extends HTMLBoxView {
       this.invalidate_render()
     })
     this.on_change(class_name, () => {
-      this.container.className = this.model.class_name
+      this.container.className = this.model.class_name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
     })
     const child_props = this.model.children.map((child: string) => this.model.data.properties[child])
     this.on_change(child_props, () => {
@@ -658,8 +658,8 @@ export class ReactiveESM extends HTMLBox {
       }
       try {
         let initialize
-        if (this.bundle != null && (mod.default || {}).hasOwnProperty(this.name)) {
-          mod = mod.default[(this.name as any)]
+        if (this.bundle != null && (mod.default || {}).hasOwnProperty(this.class_name)) {
+          mod = mod.default[(this.class_name as any)]
         }
         if (mod.initialize) {
           initialize = mod.initialize