Enhancement/anywidget

.github/workflows/test.yaml

@@ -54,6 +54,9 @@ jobs:
         with:
           commit_message: "Optimize PNG images (lossless)"
           file_pattern: "*.png"
+      - name: Run JS tests
+        run: |
+          cd panel && npm ci && npx vitest run
 
   setup:
     name: Setup workflow

anywidget_component_examples/basic_counter.py

@@ -0,0 +1,25 @@
+"""Basic counter widget — minimal ESM, click handler, model.get/set/save_changes."""
+import param
+import panel as pn
+from panel.custom import AnyWidgetComponent
+
+class CounterWidget(AnyWidgetComponent):
+    _esm = """
+    function render({ model, el }) {
+      let count = () => model.get("value");
+      let btn = document.createElement("button");
+      btn.innerHTML = `count is ${count()}`;
+      btn.addEventListener("click", () => {
+        model.set("value", count() + 1);
+        model.save_changes();
+      });
+      model.on("change:value", () => {
+        btn.innerHTML = `count is ${count()}`;
+      });
+      el.appendChild(btn);
+    }
+    export default { render };
+    """
+    value = param.Integer()
+
+component = CounterWidget()

anywidget_component_examples/chartjs.py

@@ -0,0 +1,48 @@
+"""ChartJS pane using Chart.js CDN library."""
+import param
+import panel as pn
+from panel.custom import AnyWidgetComponent
+
+class ChartJSComponent(AnyWidgetComponent):
+    object = param.Dict()
+
+    _esm = """
+import { Chart } from "https://esm.sh/chart.js/auto"
+
+function render({ model, el }) {
+  const canvasEl = document.createElement('canvas')
+  el.append(canvasEl)
+  const create_chart = () => new Chart(canvasEl.getContext('2d'), model.get("object"))
+  let chart = create_chart()
+  model.on("change:object", () => {
+    chart.destroy()
+    chart = create_chart()
+  })
+  return () => chart.destroy()
+}
+
+export default { render };
+"""
+
+component = ChartJSComponent(
+    object={
+        "type": "line",
+        "data": {
+            "labels": ["January", "February", "March", "April", "May", "June", "July"],
+            "datasets": [
+                {
+                    "label": "Data",
+                    "backgroundColor": "rgb(255, 99, 132)",
+                    "borderColor": "rgb(255, 99, 132)",
+                    "data": [0, 10, 5, 2, 20, 30, 45],
+                }
+            ],
+        },
+        "options": {
+            "responsive": True,
+            "maintainAspectRatio": False,
+        },
+    },
+    height=400,
+    sizing_mode="stretch_width",
+)

anywidget_component_examples/child_with_type.py

@@ -0,0 +1,18 @@
+"""Child with type constraint using Child(class_=...)."""
+import panel as pn
+from panel.custom import AnyWidgetComponent, Child
+
+class TypedChildExample(AnyWidgetComponent):
+    child = Child(class_=pn.pane.Markdown)
+
+    _esm = """
+    function render({ model, el }) {
+      const button = document.createElement("button");
+      button.append(model.get_child("child"))
+      el.appendChild(button);
+    }
+
+    export default { render };
+    """
+
+component = TypedChildExample(child=pn.panel("A **Markdown** pane!"))

anywidget_component_examples/confetti_direct.py

@@ -0,0 +1,20 @@
+"""Confetti button using direct CDN URL import."""
+import panel as pn
+from panel.custom import AnyWidgetComponent
+
+class ConfettiButton(AnyWidgetComponent):
+    _esm = """
+    import confetti from "https://esm.sh/canvas-confetti@1.6.0";
+
+    function render({ el }) {
+      let btn = document.createElement("button");
+      btn.innerHTML = "Click Me";
+      btn.addEventListener("click", () => {
+        confetti();
+      });
+      el.appendChild(btn);
+    }
+    export default { render }
+    """
+
+component = ConfettiButton()

anywidget_component_examples/confetti_importmap.py

@@ -0,0 +1,26 @@
+"""Confetti button using _importmap for import aliasing."""
+import panel as pn
+from panel.custom import AnyWidgetComponent
+
+class ConfettiButton(AnyWidgetComponent):
+    _importmap = {
+        "imports": {
+            "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0",
+        }
+    }
+
+    _esm = """
+    import confetti from "canvas-confetti";
+
+    function render({ el }) {
+      let btn = document.createElement("button");
+      btn.innerHTML = "Click Me";
+      btn.addEventListener("click", () => {
+        confetti();
+      });
+      el.appendChild(btn);
+    }
+    export default { render }
+    """
+
+component = ConfettiButton()

anywidget_component_examples/cytoscape.py

@@ -0,0 +1,77 @@
+"""Cytoscape graph visualization pane using CDN library."""
+import param
+import panel as pn
+from panel.custom import AnyWidgetComponent
+
+class CytoscapeAnyWidget(AnyWidgetComponent):
+    object = param.List()
+
+    layout = param.Selector(
+        default="cose",
+        objects=[
+            "breadthfirst", "circle", "concentric", "cose",
+            "grid", "preset", "random",
+        ],
+    )
+    style = param.String("", doc="Use to set the styles of the nodes/edges")
+    zoom = param.Number(1, bounds=(1, 100))
+    pan = param.Dict({"x": 0, "y": 0})
+    selected_nodes = param.List()
+    selected_edges = param.List()
+
+    _esm = """
+import { default as cytoscape} from "https://esm.sh/cytoscape"
+let cy = null;
+
+function removeCy() {
+    if (cy) { cy.destroy() }
+}
+
+function render({ model, el }) {
+    removeCy();
+
+    cy = cytoscape({
+        container: el,
+        layout: {name: model.get('layout')},
+        elements: model.get('object'),
+        zoom: model.get('zoom'),
+        pan: model.get('pan')
+    })
+    cy.style().resetToDefault().append(model.get('style')).update()
+    cy.on('select unselect', function (evt) {
+        model.set("selected_nodes", cy.elements('node:selected').map(el => el.id()))
+        model.set("selected_edges", cy.elements('edge:selected').map(el => el.id()))
+        model.save_changes()
+    });
+
+    model.on('change:object', () => {cy.json({elements: model.get('object')});cy.resize().fit()})
+    model.on('change:layout', () => {cy.layout({name: model.get('layout')}).run()})
+    model.on('change:zoom', () => {cy.zoom(model.get('zoom'))})
+    model.on('change:pan', () => {cy.pan(model.get('pan'))})
+    model.on('change:style', () => {cy.style().resetToDefault().append(model.get('style')).update()})
+
+    window.addEventListener('resize', function(event){
+        cy.center();
+        cy.resize().fit();
+    });
+}
+
+export default { render };
+"""
+
+    _stylesheets = ["""
+.__________cytoscape_container {
+    position: relative;
+}
+"""]
+
+component = CytoscapeAnyWidget(
+    object=[
+        {"data": {"id": "A", "label": "A"}},
+        {"data": {"id": "B", "label": "B"}},
+        {"data": {"id": "A-B", "source": "A", "target": "B"}},
+    ],
+    sizing_mode="stretch_width",
+    height=400,
+    styles={"border": "1px solid black"},
+)

anywidget_component_examples/external_files.py

@@ -0,0 +1,14 @@
+"""Counter button with _esm/_stylesheets as file paths."""
+from pathlib import Path
+import param
+import panel as pn
+from panel.custom import AnyWidgetComponent
+
+HERE = Path(__file__).parent
+
+class CounterButton(AnyWidgetComponent):
+    value = param.Integer()
+    _esm = HERE / "counter_button.js"
+    _stylesheets = [HERE / "counter_button.css"]
+
+component = CounterButton()

anywidget_component_examples/grid_layout.py

@@ -0,0 +1,57 @@
+"""Grid layout using Split.js with vertical splits."""
+import param
+import panel as pn
+from panel.custom import AnyWidgetComponent
+from panel.layout.base import ListLike
+
+CSS = """
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: row-resize;
+}
+"""
+
+class GridAnyWidget(ListLike, AnyWidgetComponent):
+    _esm = """
+    import Split from 'https://esm.sh/split.js@1.6.5'
+
+    function render({ model, el}) {
+      const objects = model.get_child("objects")
+
+      const splitDiv = document.createElement('div');
+      splitDiv.className = 'split';
+      splitDiv.style.height = `calc(100% - ${(objects.length - 1) * 10}px)`;
+
+      let splits = [];
+
+      objects.forEach((object, index) => {
+        const split = document.createElement('div');
+        splits.push(split)
+
+        splitDiv.appendChild(split);
+        split.appendChild(object);
+      })
+
+      Split(splits, {direction: 'vertical'})
+
+      el.appendChild(splitDiv);
+    }
+    export default {render}
+    """
+
+    _stylesheets = [CSS]
+
+component = GridAnyWidget(
+    pn.pane.Markdown("## Section 1\n\nTop content."),
+    pn.pane.Markdown("## Section 2\n\nMiddle content."),
+    pn.pane.Markdown("## Section 3\n\nBottom content."),
+    styles={"border": "2px solid lightgray"},
+    height=400,
+    width=400,
+    sizing_mode="fixed",
+)

anywidget_component_examples/image_button.py

@@ -0,0 +1,54 @@
+"""Image button widget with click tracking."""
+import param
+import panel as pn
+from panel.custom import AnyWidgetComponent
+
+class ImageButton(AnyWidgetComponent):
+    clicks = param.Integer(default=0)
+    image = param.String()
+
+    _esm = """
+function render({ model, el }) {
+    const button = document.createElement('button');
+    button.id = 'button';
+    button.className = 'pn-container center-content';
+
+    const img = document.createElement('img');
+    img.id = 'image';
+    img.className = 'image-size';
+    img.src = model.get("image");
+
+    button.appendChild(img);
+
+    button.addEventListener('click', () => {
+        model.set("clicks", model.get("clicks")+1);
+        model.save_changes();
+    });
+    el.appendChild(button);
+}
+export default { render }
+"""
+
+    _stylesheets = ["""
+.pn-container {
+    height: 100%;
+    width: 100%;
+}
+.center-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1em;
+}
+.image-size {
+    width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+"""]
+
+component = ImageButton(
+    image="https://panel.holoviz.org/_static/logo_stacked.png",
+    styles={"border": "2px solid lightgray"},
+    width=400, height=200,
+)

anywidget_component_examples/multiple_children.py

@@ -0,0 +1,24 @@
+"""Multiple children display using Children() parameter."""
+import panel as pn
+from panel.custom import AnyWidgetComponent, Children
+
+class MultiChildExample(AnyWidgetComponent):
+    objects = Children()
+
+    _esm = """
+    function render({ model, el }) {
+      const div = document.createElement('div')
+      div.append(...model.get_child("objects"))
+      el.appendChild(div);
+    }
+
+    export default { render };
+    """
+
+component = MultiChildExample(
+    objects=[
+        pn.panel("A **Markdown** pane!"),
+        pn.widgets.Button(name="Click me!"),
+        {"text": "I'm shown as a JSON Pane"},
+    ]
+)