allow widgets to be used in reactpy components

Author: rmorshea

notebooks/introduction.ipynb

@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "prettier --ignore-path .gitignore --check ."
+    "lint": "prettier --ignore-path .gitignore --check .",
+    "fix:lint": "prettier --ignore-path .gitignore --write ."
   },
   "dependencies": {
     "@jupyter-widgets/base": "^6.0.4",

package-lock.json

@@ -0,0 +1 @@
+import reactpy_jupyter

package.json

@@ -5,21 +5,22 @@
 # Distributed under the terms of the Modified BSD License.
 
 from . import jupyter_server_extension
+from .widget_component import from_widget
 from .import_resources import setup_import_resources
 from .ipython_extension import load_ipython_extension, unload_ipython_extension
-from .widget import LayoutWidget, run, set_import_source_base_url, widgetize
+from .layout_widget import to_widget, run, set_import_source_base_url
 
 __version__ = "0.8.1"  # DO NOT MODIFY
 
-__all__ = [
-    "LayoutWidget",
-    "widgetize",
-    "run",
+__all__ = (
+    "from_widget",
     "load_ipython_extension",
     "unload_ipython_extension",
+    "to_widget",
+    "run",
     "set_import_source_base_url",
     "jupyter_server_extension",
-]
+)
 
 
 setup_import_resources()

reactpy_jupyter.pth

@@ -14,7 +14,7 @@
     REACTPY_RESOURCE_BASE_PATH,
     REACTPY_WEB_MODULES_DIR,
 )
-from .widget import set_import_source_base_url
+from .layout_widget import set_import_source_base_url
 
 logger = logging.getLogger(__name__)
 

reactpy_jupyter/__init__.py

@@ -1,13 +1,15 @@
 from __future__ import annotations
 
+import time
 from functools import partial
+from threading import Thread
 
 from IPython import get_ipython
 from IPython.core.interactiveshell import ExecutionResult, InteractiveShell
 from IPython.display import display
 from reactpy.core.component import ComponentType
 
-from .widget import LayoutWidget
+from .layout_widget import LayoutWidget
 
 _EXTENSION_LOADED = False
 _POST_RUN_CELL_HOOK = None
@@ -36,5 +38,20 @@ def _post_run_cell(ipython: InteractiveShell, result: ExecutionResult) -> None:
         display(LayoutWidget(result.result))
 
 
-if get_ipython() is not None:
-    load_ipython_extension(get_ipython())
+# THIS IS A DIRTY HACK
+# --------------------
+# The IPython extension must be loaded after the IPython kernel has started so we start
+# a thread that waits for the kernel to start and then loads the extension. We should
+# find a better way to do this.
+
+
+def _load_ipyhon_extension_thread_target() -> None:
+    """A hack to load the IPython extension after the IPython kernel has started"""
+    for _ in range(50):
+        if get_ipython() is not None:
+            load_ipython_extension(get_ipython())
+            return None
+        time.sleep(0.1)
+
+
+Thread(target=_load_ipyhon_extension_thread_target, daemon=True).start()

reactpy_jupyter/import_resources.py

@@ -6,18 +6,21 @@
 from pathlib import Path
 from queue import Queue as SyncQueue
 from threading import Thread
-from typing import Any, Awaitable, Callable
+from typing import Any, Awaitable, Callable, overload
 
 import anywidget
 from IPython.display import DisplayHandle
 from IPython.display import display as ipython_display
 from jsonpointer import set_pointer
 from reactpy.core.layout import Layout
 from reactpy.core.types import ComponentType
-from traitlets import Unicode
+from ipywidgets import Widget, widget_serialization
+from traitlets import Unicode, List, Instance
 from typing_extensions import ParamSpec
 
-DEV = bool(int(os.environ.get("REACTPY_JUPYTER_DEV", "0")))
+from reactpy_jupyter.widget_component import InnerWidgets, inner_widgets_context
+
+DEV = bool(int(os.environ.get("REACTPY_JUPYTER_DEV_SERVER", "0")))
 
 if DEV:
     # from `npx vite`
@@ -45,12 +48,27 @@ def run(constructor: Callable[[], ComponentType]) -> DisplayHandle | None:
 _P = ParamSpec("_P")
 
 
-def widgetize(constructor: Callable[_P, ComponentType]) -> Callable[_P, LayoutWidget]:
-    """A decorator that turns an ReactPy element into a Jupyter Widget constructor"""
+@overload
+def to_widget(value: Callable[_P, ComponentType]) -> Callable[_P, LayoutWidget]:
+    ...
+
+
+@overload
+def to_widget(value: ComponentType) -> LayoutWidget:
+    ...
+
+
+def to_widget(
+    value: Callable[_P, ComponentType] | ComponentType
+) -> Callable[_P, LayoutWidget] | LayoutWidget:
+    """Turn a component into a widget or a component construtor into a widget constructor"""
+
+    if isinstance(value, ComponentType):
+        return LayoutWidget(value)
 
-    @wraps(constructor)
+    @wraps(value)
     def wrapper(*args: Any, **kwargs: Any) -> LayoutWidget:
-        return LayoutWidget(constructor(*args, **kwargs))
+        return LayoutWidget(value(*args, **kwargs))
 
     return wrapper
 
@@ -60,12 +78,21 @@ class LayoutWidget(anywidget.AnyWidget):
 
     _esm = ESM
     _import_source_base_url = Unicode().tag(sync=True)
+    _inner_widgets = List(Instance(Widget)).tag(sync=True, **widget_serialization)
 
     def __init__(self, component: ComponentType) -> None:
-        super().__init__(_import_source_base_url=_IMPORT_SOURCE_BASE_URL)
+        super().__init__(
+            _import_source_base_url=_IMPORT_SOURCE_BASE_URL,
+            _inner_widgets=[],
+        )
         self._reactpy_model = {}
         self._reactpy_views = set()
-        self._reactpy_layout = Layout(component)
+        self._reactpy_layout = Layout(
+            inner_widgets_context(
+                component,
+                value=InnerWidgets(self._add_inner_widget, self._remove_inner_widget),
+            )
+        )
         self._reactpy_loop = _spawn_threaded_event_loop(
             self._reactpy_layout_render_loop()
         )
@@ -107,6 +134,12 @@ async def _reactpy_layout_render_loop(self) -> None:
                 for v_id in self._reactpy_views:
                     self.send({"viewID": v_id, "data": update_message})
 
+    def _add_inner_widget(self, widget: Widget) -> None:
+        self._inner_widgets = self._inner_widgets + [widget]
+
+    def _remove_inner_widget(self, widget: Widget) -> None:
+        self._inner_widgets = [w for w in self._inner_widgets if w != widget]
+
     def __repr__(self) -> str:
         return f"LayoutWidget({self._reactpy_layout})"
 

reactpy_jupyter/ipython_extension.py

@@ -0,0 +1,32 @@
+from __future__ import annotations
+
+from typing import Callable
+from attr import dataclass
+from ipywidgets import Widget
+
+from reactpy import component, create_context, use_context, use_effect, html
+from reactpy.types import VdomDict, Context
+
+
+inner_widgets_context: Context[InnerWidgets | None] = create_context(None)
+
+
+@component
+def from_widget(source: Widget) -> VdomDict:
+    inner_widgets = use_context(inner_widgets_context)
+
+    @use_effect
+    def add_widget():
+        inner_widgets.add(source)
+        return lambda: inner_widgets.remove(source)
+
+    if inner_widgets is None:
+        raise RuntimeError("Jupyter component must be rendered inside a JupyterLayout")
+
+    return html.span({"id": f"widget-model-id-{source.model_id}"})
+
+
+@dataclass
+class InnerWidgets:
+    add: Callable[[Widget], None]
+    remove: Callable[[Widget], None]

reactpy_jupyter/widget.py renamed to reactpy_jupyter/layout_widget.py

@@ -2,3 +2,5 @@ twine
 jupyter-packaging
 jupyter-repo2docker
 noxopt
+jupyterlab
+

reactpy_jupyter/widget_component.py

@@ -12,6 +12,7 @@
 from setuptools import find_packages, setup
 from setuptools.command.develop import develop
 from setuptools.command.sdist import sdist
+from setuptools.command.build_py import build_py
 
 if sys.platform == "win32":
     from subprocess import list2cmdline
@@ -135,8 +136,9 @@ def list2cmdline(cmd_list):
     ]
 )
 
+
 # --------------------------------------------------------------------------------------
-# Build Javascript
+# Setup Command Classes
 # --------------------------------------------------------------------------------------
 
 
@@ -163,19 +165,34 @@ def run(self):
     return Command
 
 
+PTH_FILE = ROOT_DIR / f"{NAME}.pth"
+
+
+def build_with_pth_file(cls):
+    class Command(cls):
+        def run(self):
+            super().run()
+            outfile = str(Path(self.build_lib, f"{NAME}.pth"))
+            self.copy_file(str(PTH_FILE), outfile, preserve_mode=0)
+
+    return Command
+
+
 package["cmdclass"] = {
-    "sdist": build_javascript_first(sdist),
-    "develop": build_javascript_first(develop),
+    "sdist": build_with_pth_file(build_javascript_first(sdist)),
+    "develop": build_with_pth_file(build_javascript_first(develop)),
 }
 
 if sys.version_info < (3, 10, 6):
     from distutils.command.build import build
 
-    package["cmdclass"]["build"] = build_javascript_first(build)
+    package["cmdclass"]["build"] = build_with_pth_file(build_javascript_first(build))
 else:
     from setuptools.command.build_py import build_py
 
-    package["cmdclass"]["build_py"] = build_javascript_first(build_py)
+    package["cmdclass"]["build_py"] = build_with_pth_file(
+        build_javascript_first(build_py)
+    )
 
 
 # --------------------------------------------------------------------------------------

requirements.txt

@@ -5,16 +5,33 @@ import { DOMWidgetView } from "@jupyter-widgets/base";
 export function render(view) {
   const client = new JupyterReactPyClient(view);
   mount(view.el, client);
+
+  async function updateInnerWidgets() {
+    /** @type {String[]} */
+    let innerModelIds = view.model.get("_inner_widgets");
+
+    for (let modelId of innerModelIds.map((id) =>
+      id.slice("IPY_MODEL_".length)
+    )) {
+      let model = await view.model.widget_manager.get_model(modelId);
+      let childView = await view.create_child_view(model);
+      let containerEl = await waitForSelector(`#widget-model-id-${modelId}`, view.el);
+      containerEl.replaceChildren(childView.el);
+    }
+  }
+
+  view.model.on("change:_inner_widgets", updateInnerWidgets);
+
+  updateInnerWidgets();
 }
 
 let viewID = 0;
 
 class JupyterReactPyClient extends BaseReactPyClient {
   /**
    * @param view {DOMWidgetView}
-   * @param viewID {number}
    */
-  constructor(view, viewId) {
+  constructor(view) {
     super();
     this.view = view;
     this.viewID = viewID++;
@@ -109,3 +126,42 @@ function concatAndResolveUrl(url, concat) {
   }
   return url3.join("/");
 }
+
+/**
+ * @typedef {import("@jupyter-widgets/base").WidgetModel} WidgetModel
+ * @param {string[]} modelIds
+ * @param {import("@jupyter-widgets/base").IWidgetManager} widgetManager
+ * @returns {Promise<WidgetModel[]>}
+ */
+async function unpackModels(modelIds, widgetManager) {
+  return Promise.all(
+    modelIds.map((id) => widgetManager.get_model(id.slice("IPY_MODEL_".length)))
+  );
+}
+
+/**
+ * @param {String} selector
+ * @param {HTMLElement} containerElement
+ * @returns {Promise<HTMLElement>}
+ */
+function waitForSelector(selector, containerElement) {
+  return new Promise((resolve) => {
+    let quickEl;
+    if ((quickEl = document.querySelector(selector))) {
+      return resolve(quickEl);
+    }
+
+    const observer = new MutationObserver((mutations) => {
+      let obsEl;
+      if ((obsEl = document.querySelector(selector))) {
+        resolve(obsEl);
+        observer.disconnect();
+      }
+    });
+
+    observer.observe(containerElement, {
+      childList: true,
+      subtree: true,
+    });
+  });
+}