Various fixes for custom component compilation (#7381)

* Various fixes for custom component compilation * Apply suggestions from code review --------- Co-authored-by: Philipp Rudiger <philipp.rudiger@blackstone.com>
holoviz · Oct 18, 2024 · 2454da9 · 2454da9
1 parent ae110a5
commit 2454da9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/panel/custom.py b/panel/custom.py
@@ -358,12 +358,11 @@ def _init_params(self) -> dict[str, Any]:
                 params.pop(k)
             data_params[k] = v
         bundle_path = self._bundle_path
+        importmap = self._process_importmap()
         if bundle_path:
             bundle_hash = hashlib.sha256(str(bundle_path).encode('utf-8')).hexdigest()
-            importmap = {}
         else:
             bundle_hash = None
-            importmap = self._process_importmap()
         data_props = self._process_param_change(data_params)
         params.update({
             'bundle': bundle_hash,
@@ -614,8 +613,8 @@ def _exports__(cls) -> ExportSpec:
         }
         if any('@mui' in v for v in imports.values()):
             exports.update({
-                "@emotion/cache": "createCache",
-                "@emotion/react": ("CacheProvider",)
+                "@emotion/cache": ["createCache"],
+                "@emotion/react": [("CacheProvider",)],
             })
         return exports
 

diff --git a/panel/io/compile.py b/panel/io/compile.py
@@ -385,8 +385,8 @@ def compile_components(
             if result.stdout and out:
                 print(f"npm output:\n{GREEN}{result.stdout}{RESET}")  # noqa
             if result.stderr:
-                print("npm errors:\n{RED}{result.stderr}{RESET}")  # noqa
-                return None
+                print(f"npm errors:\n{RED}{result.stderr}{RESET}")  # noqa
+
         except subprocess.CalledProcessError as e:
             print(f"An error occurred while running npm install:\n{RED}{e.stderr}{RESET}")  # noqa
             return None

diff --git a/panel/models/react_component.ts b/panel/models/react_component.ts
@@ -67,7 +67,7 @@ import { CacheProvider } from "@emotion/react"`
       render_code = `
   if (rendered) {
     const cache = createCache({
-      key: 'css-${this.model.id}',
+      key: 'css-${btoa(this.model.id).replace("=", "-").toLowerCase()}',
       prepend: true,
       container: view.style_cache,
     })