Merge pull request #97 from bokeh/support_anywidget

Embed full state on initial render

Author: philippjfr

.github/workflows/ipywidgets-bokeh-ci.yml

@@ -17,7 +17,17 @@ jobs:
         os: [ubuntu-latest, macos-latest, windows-latest]
         node-version: [18.x]
 
+    defaults:
+      run:
+        shell: bash -el {0}
+
     steps:
+      - name: Set up conda and install base
+        uses: conda-incubator/setup-miniconda@v2
+        with:
+          auto-update-conda: true
+          activate-environment: test
+
       - name: Checkout the repository
         uses: actions/checkout@v3
 
@@ -27,39 +37,46 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Upgrade npm
-        shell: bash
         run: |
           npm install --location=global npm
 
-      - name: Install dependencies
+      - name: Install JavaScript dependencies
         working-directory: ./ipywidgets_bokeh
-        shell: bash
         run: |
           npm ci --no-progress
 
-      - name: Build ipywidgets-bokeh
+      - name: Build ipywidgets-bokeh JavaScript
         working-directory: ./ipywidgets_bokeh
-        shell: bash
         run: |
           npm run build
 
-      - name: Run tests
+      - name: Run JavaScript tests
         if: success() || failure()
         working-directory: ./ipywidgets_bokeh
-        shell: bash
         run: |
           npm run test
 
-      - name: Lint codebase
+      - name: Lint the JavaScript codebase
         if: success() || failure()
         working-directory: ./ipywidgets_bokeh
-        shell: bash
         run: |
           npm run lint
 
+      - name: Install dev Python dependencies & Playwright browsers
+        if: success() || failure()
+        run: |
+          conda install --channel conda-forge -y pip python
+          conda info
+          python -m pip install --editable .[dev]
+          python -m playwright install --with-deps
+
+      - name: Run Playwright & Python tests
+        if: matrix.os != 'windows-latest'
+        run: |
+          pytest
+
       - name: Check repository status
         if: success() || failure()
-        shell: bash
         run: |
           OUTPUT=$(git status --short .)
           if [[ ! -z "$OUTPUT" ]]; then echo $OUTPUT; exit 1; fi

ipywidgets_bokeh/src/manager.ts

@@ -155,6 +155,7 @@ export class WidgetManager extends HTMLManager {
 
     try {
       const models = await this.set_state(state)
+      await this.set_state({...state, state: state.full_state as any})
       for (const model of models) {
         if (this._model_objs.has(model.model_id))
           continue

ipywidgets_bokeh/widget.py

@@ -35,6 +35,7 @@ class IPyWidget(LayoutDOM):
     def __init__(self, *, widget: Widget, **kwargs):
         super().__init__(**kwargs)
         spec = widget.get_view_spec()
-        state = Widget.get_manager_state(widgets=[])
+        state = Widget.get_manager_state(widgets=[widget])
+        state["full_state"] = state["state"]
         state["state"] = embed.dependency_state([widget], drop_defaults=True)
         self.bundle = dict(spec=spec, state=state)

setup.py

@@ -29,11 +29,19 @@ def run(self):
     "ipywidgets ==8.*",
     "ipykernel ==6.*,!=6.18.0", # until ipywidgets 8.0.6
 ]
+dev_dependencies = [
+    "anywidget>=0.3.0",
+    "panel>=1.0.4",
+    "pytest>=7.3.1",
+    "pytest-cov>=4.1.0",
+    "pytest-playwright>=0.3.3",
+]
 
 setup_args = dict(
     name="ipywidgets_bokeh",
     version="1.4.0",
     install_requires=install_requires,
+    extras_require={"dev": dev_dependencies},
     python_requires=">=3.9",
     description="Allows embedding of Jupyter widgets in Bokeh layouts.",
     long_description=open("README.md").read(),

tests/test_anywidget.py

@@ -0,0 +1,57 @@
+import time
+
+import anywidget
+import panel as pn
+import traitlets
+from panel.io.server import serve
+from playwright.sync_api import expect, Page
+
+
+class CounterWidget(anywidget.AnyWidget):
+    """Counter widget example."""
+
+    _esm = """
+        export function render(view) {
+          let getCount = () => view.model.get("count");
+          let button = document.createElement("button");
+          button.classList.add("counter-button");
+          button.innerHTML = `${getCount()}`;
+          button.addEventListener("click", () => {
+            view.model.set("count", getCount() + 1);
+            view.model.save_changes();
+          });
+          view.model.on("change:count", () => {
+            button.innerHTML = `${getCount()}`;
+          });
+          view.el.appendChild(button);
+        }
+    """
+    _css = """
+        .counter-button {background-color: #ea580c;}
+        .counter-button:hover {background-color: #9a3412;}
+    """
+    count = traitlets.Int(default_value=0).tag(sync=True)
+
+
+def test_anywidget(page: Page) -> None:
+    """Test anywidget button counter example."""
+    # Port to run the panel server on.
+    port = 5006
+
+    # Create an anywidget button and make it a panel object.
+    widget = CounterWidget()
+    panels = pn.panel(widget)
+
+    # Serve the button using panel, the time delay is necessary for panel to start and
+    # serve the widget.
+    serve(panels=panels, port=port, show=False)
+    time.sleep(0.2)
+
+    # Go to the page and locate the widget using playwright.
+    page.goto(f"http://localhost:{port}")
+    button = page.locator(selector=".counter-button")
+
+    # Click the button and monitor the results.
+    expect(button).to_have_count(0)
+    button.click()
+    expect(button).to_have_count(1)