Support text elements for PySide widgets that display text (#191)

Implement create_text_element() and set_element_text() in the
PySideRenderer with a TextElementProxy object that holds the text
content. Widgets that support text elements as children (QLabel and
QAbstractButton subclasses) register insert/remove handlers that keep
an ordered list of proxies on the parent widget and display the
joined content through setText().

Fixes #189

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: berendkleinhaneveld

collagraph/renderers/pyside/objects/__init__.py

@@ -13,6 +13,7 @@
     standarditem,
     statusbar,
     tab,
+    textelement,
     toolbar,
     treewidget,
     treewidgetitem,

collagraph/renderers/pyside/objects/textelement.py

@@ -0,0 +1,44 @@
+"""
+Support for text elements as children of widgets that display text,
+such as QLabel and QPushButton.
+
+Text element proxies are kept in an ordered list on the parent widget
+and the joined content of all of them is displayed by the parent
+through its `setText` method.
+Register insert and remove functions for more widget types (that have
+a `setText` method) to support text elements as children.
+"""
+
+from PySide6.QtWidgets import QAbstractButton, QLabel
+
+from ...pyside_renderer import PySideRenderer, TextElementProxy
+from .widget import insert as widget_insert
+from .widget import remove as widget_remove
+
+
+@PySideRenderer.register_insert(QLabel, QAbstractButton)
+def insert(self, el, anchor=None):
+    if not isinstance(el, TextElementProxy):
+        widget_insert(self, el, anchor=anchor)
+        return
+
+    if not hasattr(self, "_cg_text_proxies"):
+        self._cg_text_proxies = []
+    proxies = self._cg_text_proxies
+    if anchor is not None and anchor in proxies:
+        proxies.insert(proxies.index(anchor), el)
+    else:
+        proxies.append(el)
+    el.set_parent(self)
+    el.sync()
+
+
+@PySideRenderer.register_remove(QLabel, QAbstractButton)
+def remove(self, el):
+    if not isinstance(el, TextElementProxy):
+        widget_remove(self, el)
+        return
+
+    self._cg_text_proxies.remove(el)
+    el.sync()
+    el.set_parent(None)

collagraph/renderers/pyside_renderer.py

@@ -3,6 +3,7 @@
 from functools import lru_cache, partial
 from typing import Any, Callable
 from warnings import warn
+from weakref import ref
 
 from PySide6 import QtCore, QtGui, QtWidgets
 
@@ -96,6 +97,36 @@ def eventFilter(self, obj, event):  # noqa: N802
         return super().eventFilter(obj, event)
 
 
+class TextElementProxy:
+    """
+    Proxy object for text elements.
+
+    Widgets that support text elements as children keep an ordered
+    list of these proxies and display the joined content of all of
+    them through their `setText` method.
+    See pyside/objects/textelement.py for which widget types support
+    text elements and how insert/remove is implemented for them.
+    """
+
+    def __init__(self):
+        self.content = ""
+        self._parent_ref = None
+
+    def set_parent(self, parent):
+        self._parent_ref = ref(parent) if parent is not None else None
+
+    def sync(self):
+        """Set the joined content of all the parent's text element
+        proxies as the text of the parent widget."""
+        parent = self._parent_ref() if self._parent_ref is not None else None
+        if parent is None:
+            return
+        parent.setText("".join(proxy.content for proxy in parent._cg_text_proxies))
+
+    def __repr__(self):
+        return f"<TextElementProxy({self.content!r})>"
+
+
 class PySideRenderer(Renderer):
     """PySide6 renderer."""
 
@@ -302,7 +333,7 @@ def create_object(cls, type_name: str) -> Any:
         return create_instance(WRAPPED_TYPES[type_name])
 
     def create_text_element(self):
-        raise NotImplementedError
+        return TextElementProxy()
 
     def insert(self, el: Any, parent: Any, anchor: Any = None):
         """
@@ -352,7 +383,9 @@ def remove(self, el: Any, parent: Any):
             logger.exception(f"Error removing {el} from {parent}")
 
     def set_element_text(self, el: Any, value: str):
-        raise NotImplementedError
+        """Set the text of a text element (proxy)."""
+        el.content = value
+        el.sync()
 
     def set_attribute(self, el: Any, attr: str, value: Any):
         """Set the attribute `attr` of the element `el` to the value `value`."""

examples/pyside/counter.cgx

@@ -3,13 +3,8 @@
   uv run collagraph examples/pyside/counter.cgx
  -->
 <widget>
-  <label
-    :text="f'Count: {count}'"
-  />
-  <button
-    text="bump"
-    @clicked="bump"
-  />
+  <label>Count: {{ count }}</label>
+  <button @clicked="bump">bump</button>
 </widget>
 
 <script>

tests/pyside/test_pyside_text_elements.py

@@ -0,0 +1,168 @@
+import pytest
+from observ import reactive
+
+pytest.importorskip("PySide6")
+
+from PySide6 import QtCore, QtWidgets
+
+import collagraph as cg
+from collagraph.renderers.pyside_renderer import TextElementProxy
+
+
+def test_create_text_element(qapp):
+    renderer = cg.PySideRenderer(autoshow=False)
+
+    proxy = renderer.create_text_element()
+
+    assert isinstance(proxy, TextElementProxy)
+    assert proxy.content == ""
+
+
+def test_label_text_element(qapp):
+    renderer = cg.PySideRenderer(autoshow=False)
+    label = renderer.create_element("label")
+    proxy = renderer.create_text_element()
+
+    # Setting text before insert only updates the proxy
+    renderer.set_element_text(proxy, "Hello")
+    assert label.text() == ""
+
+    renderer.insert(proxy, label)
+    assert label.text() == "Hello"
+
+    renderer.set_element_text(proxy, "Hello world")
+    assert label.text() == "Hello world"
+
+    renderer.remove(proxy, label)
+    assert label.text() == ""
+
+
+def test_button_text_element(qapp):
+    renderer = cg.PySideRenderer(autoshow=False)
+    button = renderer.create_element("button")
+    proxy = renderer.create_text_element()
+
+    renderer.set_element_text(proxy, "Click me")
+    renderer.insert(proxy, button)
+
+    assert button.text() == "Click me"
+
+
+def test_text_element_order_with_anchor(qapp):
+    renderer = cg.PySideRenderer(autoshow=False)
+    label = renderer.create_element("label")
+
+    first = renderer.create_text_element()
+    second = renderer.create_text_element()
+    third = renderer.create_text_element()
+    renderer.set_element_text(first, "a")
+    renderer.set_element_text(second, "b")
+    renderer.set_element_text(third, "c")
+
+    renderer.insert(first, label)
+    renderer.insert(third, label)
+    # Insert with anchor should insert before the anchor
+    renderer.insert(second, label, anchor=third)
+
+    assert label.text() == "abc"
+
+    renderer.remove(second, label)
+    assert label.text() == "ac"
+
+
+def test_text_element_in_plain_widget_fails(qapp, caplog):
+    renderer = cg.PySideRenderer(autoshow=False)
+    widget = renderer.create_element("widget")
+    proxy = renderer.create_text_element()
+
+    # Widget does not support text elements: the error is logged
+    renderer.insert(proxy, widget)
+
+    assert "Error inserting" in caplog.text
+
+
+def test_label_child_text(qtbot, parse_source):
+    """Test that child text of labels and buttons updates with state."""
+    Counter, _ = parse_source(
+        """
+        <widget>
+          <label>Count: {{ count }}</label>
+          <button @clicked="bump">bump</button>
+        </widget>
+
+        <script>
+        import collagraph as cg
+
+        class Counter(cg.Component):
+            def init(self):
+                self.state["count"] = 0
+
+            def bump(self):
+                self.state["count"] += 1
+        </script>
+        """
+    )
+
+    renderer = cg.PySideRenderer(autoshow=False)
+    gui = cg.Collagraph(renderer=renderer)
+    container = renderer.create_element("widget")
+    gui.render(Counter, container)
+
+    label = None
+    button = None
+
+    def widgets_are_found():
+        nonlocal label
+        nonlocal button
+        label = container.findChild(QtWidgets.QLabel)
+        button = container.findChild(QtWidgets.QPushButton)
+        assert label and button
+
+    qtbot.waitUntil(widgets_are_found, timeout=500)
+
+    assert label.text() == "Count: 0"
+    assert button.text() == "bump"
+
+    qtbot.mouseClick(button, QtCore.Qt.LeftButton)
+    qtbot.waitUntil(lambda: label.text() == "Count: 1", timeout=500)
+
+
+def test_conditional_child_text(qtbot, parse_source):
+    """Test that text elements are properly removed on unmount."""
+    Example, _ = parse_source(
+        """
+        <label object_name="label">
+          <template v-if="show">{{ message }}</template>
+        </label>
+
+        <script>
+        import collagraph as cg
+
+        class Example(cg.Component):
+            pass
+        </script>
+        """
+    )
+
+    renderer = cg.PySideRenderer(autoshow=False)
+    gui = cg.Collagraph(renderer=renderer)
+    container = renderer.create_element("widget")
+    state = reactive({"show": True, "message": "Hello"})
+    gui.render(Example, container, state=state)
+
+    label = None
+
+    def label_is_found():
+        nonlocal label
+        label = container.findChild(QtWidgets.QLabel, name="label")
+        assert label
+
+    qtbot.waitUntil(label_is_found, timeout=500)
+
+    qtbot.waitUntil(lambda: label.text() == "Hello", timeout=500)
+
+    state["message"] = "Hi"
+    qtbot.waitUntil(lambda: label.text() == "Hi", timeout=500)
+
+    state["show"] = False
+    qtbot.waitUntil(lambda: label.text() == "", timeout=500)