Fix MaterialUIComponent (#566)

* Fix MaterialUIComponent

* Apply suggestion from @philippjfr

* Apply suggestion from @philippjfr

* Update docs

Author: philippjfr

doc/how_to/custom.md

@@ -49,7 +49,7 @@ class RainbowButton(MaterialUIComponent):
     interval = param.Integer(default=200, doc="""
         Time in ms between color changes.""")
 
-    _esm_base = "RainbowButton.jsx"
+    _esm = "RainbowButton.jsx"
     _importmap = {
       "imports": {
           "confetti": "https://esm.sh/canvas-confetti@1.6.0"

src/panel_material_ui/base.py

@@ -325,7 +325,7 @@ def _exports__(cls):
             "react-is": ["*react_is"],
             "react-dom": ["*react_dom"],
             "react/jsx-runtime": [("jsx", "jsxs", "Fragment")],
-            "./utils": [("install_theme_hooks",)],
+            "./utils": [("apply_global_css","install_theme_hooks",)],
             "@mui/material/styles": ["*material_styles"],
             "@mui/material": ["*material_ui"],
         })
@@ -634,7 +634,7 @@ def _get_properties(self, doc: Document | None) -> dict[str, Any]:
 
     @classmethod
     def _render_esm_base(cls):
-        esm = cls._esm_base
+        esm = cls._esm_base or cls._esm
         if not esm.endswith(('.js', '.jsx', '.ts', '.tsx')):
             esm_base = esm
         else:
@@ -646,7 +646,8 @@ def _render_esm_base(cls):
                 esm_base, component_name = transform.apply(cls, esm_base, component_name)
             esm_base += f'\nexport default {{ render: {component_name} }}'
         esm_base = esm_base.replace(
-            'import {install_theme_hooks} from "./utils"', 'import pnmui from "panel-material-ui"; const install_theme_hooks = pnmui.install_theme_hooks'
+            'import {apply_global_css, install_theme_hooks} from "./utils"',
+            'import pnmui from "panel-material-ui"; const install_theme_hooks = pnmui.install_theme_hooks; const apply_global_css = pnmui.apply_global_css;'
         ).replace(
             'import * as React from "react"', ''
         )

tests/test_base.py

@@ -0,0 +1,30 @@
+from panel_material_ui.base import MaterialUIComponent
+
+
+class _TestComponentESMBase(MaterialUIComponent):
+    _esm_base = (
+        "export function render() { return null }"
+    )
+
+
+
+class _TestComponentESM(MaterialUIComponent):
+    _esm = (
+        "export function render() { return null }"
+    )
+
+
+def test_render_esm_base_patches_utils_import():
+    esm_base = _TestComponentESM._render_esm_base()
+    assert (
+        "const install_theme_hooks = pnmui.install_theme_hooks; "
+        "const apply_global_css = pnmui.apply_global_css;"
+    ) in esm_base
+
+
+def test_render_esm_patches_utils_import():
+    esm_base = _TestComponentESMBase._render_esm_base()
+    assert (
+        "const install_theme_hooks = pnmui.install_theme_hooks; "
+        "const apply_global_css = pnmui.apply_global_css;"
+    ) in esm_base