collagraph 0.8.2__tar.gz → 0.8.4__tar.gz

{collagraph-0.8.2 → collagraph-0.8.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: collagraph
-Version: 0.8.2
+Version: 0.8.4
 Summary: Reactive user interfaces
 Author-email: Berend Klein Haneveld <berendkleinhaneveld@gmail.com>, Korijn van Golen <korijn@gmail.com>
 License-Expression: MIT
@@ -30,7 +30,6 @@ Inspired by Vue and React.
 Write your Python interfaces in a declarative manner with plain render functions, component classes or even single-file components using Vue-like syntax, but with Python!
 
 * Reactivity (made possible by leveraging [observ](https://github.com/fork-tongue/observ))
-* Function components
 * Class components with local state and life-cycle methods/hooks
 * Single-file components with Vue-like template syntax (`.cgx` files)
 * Custom renderers
@@ -39,25 +38,22 @@ Here is an example that shows a counter, made with a component with Vue-like syn
 
 Contents of `counter.cgx`:
 ```html
-<template>
-  <widget>
-    <label
-      :text="f'Count: {count}'"
-    />
-    <button
-      text="bump"
-      @clicked="bump"
-    />
-  </widget>
-</template>
+<widget>
+  <label
+    :text="f'Count: {count}'"
+  />
+  <button
+    text="bump"
+    @clicked="bump"
+  />
+</widget>
 
 <script>
 import collagraph as cg
 
 
 class Counter(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["count"] = 0
 
     def bump(self):
@@ -80,7 +76,7 @@ gui = cg.Collagraph(renderer=cg.PySideRenderer())
 # Render the component into a container
 # (in this case the app but can be another widget)
 app = QtWidgets.QApplication()
-gui.render(cg.h(Counter), app)
+gui.render(Counter, app)
 app.exec()
 ```
 

{collagraph-0.8.2 → collagraph-0.8.4}/README.md

@@ -15,7 +15,6 @@ Inspired by Vue and React.
 Write your Python interfaces in a declarative manner with plain render functions, component classes or even single-file components using Vue-like syntax, but with Python!
 
 * Reactivity (made possible by leveraging [observ](https://github.com/fork-tongue/observ))
-* Function components
 * Class components with local state and life-cycle methods/hooks
 * Single-file components with Vue-like template syntax (`.cgx` files)
 * Custom renderers
@@ -24,25 +23,22 @@ Here is an example that shows a counter, made with a component with Vue-like syn
 
 Contents of `counter.cgx`:
 ```html
-<template>
-  <widget>
-    <label
-      :text="f'Count: {count}'"
-    />
-    <button
-      text="bump"
-      @clicked="bump"
-    />
-  </widget>
-</template>
+<widget>
+  <label
+    :text="f'Count: {count}'"
+  />
+  <button
+    text="bump"
+    @clicked="bump"
+  />
+</widget>
 
 <script>
 import collagraph as cg
 
 
 class Counter(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["count"] = 0
 
     def bump(self):
@@ -65,7 +61,7 @@ gui = cg.Collagraph(renderer=cg.PySideRenderer())
 # Render the component into a container
 # (in this case the app but can be another widget)
 app = QtWidgets.QApplication()
-gui.render(cg.h(Counter), app)
+gui.render(Counter, app)
 app.exec()
 ```
 

{collagraph-0.8.2 → collagraph-0.8.4}/collagraph/component.py

@@ -27,6 +27,12 @@ class Component:
         self._parent = ref(parent) if parent else None
         self._provided = {}
 
+        # Call init hook at end of __init__
+        self.init()
+
+    def init(self):
+        pass
+
     @property
     def props(self):
         """The incoming props of this component."""

{collagraph-0.8.2 → collagraph-0.8.4}/collagraph/renderers/pyside/objects/layouts.py

@@ -59,8 +59,15 @@ def remove_layout(self, el):
 
 @PySideRenderer.register_remove(QFormLayout)
 def remove_form(self, el):
-    # Layout also deletes 'el' so no need to unset parent
-    self.removeRow(el)
+    # Don't use removeRow, even though it should theoratically work
+    # In reality it causes a hard crash...
+    # Instead, take the row, and then unset the parents of the
+    # associated widgets of the return layout item
+    layout_item = self.takeRow(el)
+    if layout_item:
+        layout_item.labelItem.widget().setParent(None)
+        layout_item.fieldItem.widget().setParent(None)
+    el.setParent(None)
 
 
 @PySideRenderer.register_set_attr(QLayout)
@@ -105,12 +112,31 @@ def set_grid_index(self, attr, value):
         layout.addWidget(self, *value)
 
 
-@PySideRenderer.register_custom_attribute("form_label", "form_index")
+@PySideRenderer.register_custom_attribute("form_label")
+def set_form_label(self, attr, value):
+    setattr(self, attr, value)
+    index = getattr(self, "form_index", None)
+    if parent := self.parent():
+        layout = parent.layout()
+        if index is not None:
+            label_item = layout.itemAt(index, QFormLayout.LabelRole)
+            label_item.widget().setText(value)
+
+
+@PySideRenderer.register_custom_attribute("form_index")
 def set_form_index(self, attr, value):
+    old_index = getattr(self, "form_index", None)
     setattr(self, attr, value)
     if parent := self.parent():
         layout = parent.layout()
+        label_widget = None
+        if old_index is not None:
+            layout_item = layout.takeRow(old_index)
+            label_widget = layout_item.labelItem.widget()
+            assert layout_item.fieldItem.widget() is self
         if hasattr(self, "form_label") and hasattr(self, "form_index"):
-            layout.insertRow(self.form_index, self.form_label, self)
+            layout.insertRow(
+                self.form_index, label_widget if label_widget else self.form_label, self
+            )
         elif hasattr(self, "form_label"):
             layout.addRow(self.form_label, self)

{collagraph-0.8.2 → collagraph-0.8.4}/collagraph/sfc/parser.py

@@ -45,7 +45,7 @@ class CGXParser(HTMLParser):
         self.root = Element("root", attrs={}, location=(-1, -1))
         self.stack = [self.root]
 
-    def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]):
+    def _handle_tag(self, tag: str, attrs: list[tuple[str, str | None]]) -> Element:
         # The tag parameter is lower-cased by the HTMLParser.
         # In order to figure out whether the tag indicates
         # an imported class, we need the original casing for
@@ -68,6 +68,11 @@ class CGXParser(HTMLParser):
         parent = self.stack[-1]
         parent.children.append(node)
         node.parent = ref(parent)
+
+        return node
+
+    def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]):
+        node = self._handle_tag(tag, attrs)
         # Make the new node the last on the stack
         self.stack.append(node)
 
@@ -81,6 +86,20 @@ class CGXParser(HTMLParser):
             if node.tag.lower() == tag:
                 break
 
+    def handle_startendtag(self, tag: str, attrs):
+        """Handle self-closing tags"""
+        node = self._handle_tag(tag, attrs)
+        # Get the full text and split it
+        text = self.get_starttag_text()
+        lines = text.splitlines()
+        # Find the location of where the tag is actually closed
+        column = lines[-1].index("/>")
+        # Figure out how many lines the tag spans
+        line_span_count = len(lines) - 1
+        line, _ = self.getpos()
+        # Set the end to be exactly where the '/>' is located
+        node.end = (line + line_span_count, column)
+
     def handle_data(self, data: str):
         if data.strip():
             # Add item as child to the last on the stack

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pygfx/app_point_cloud.cgx

@@ -18,8 +18,7 @@ from examples.pygfx.point_cloud import PointCloud
 
 
 class Example(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["count"] = self.props["count"]
 
     def add(self):

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pygfx/button.cgx

@@ -32,8 +32,7 @@ class Button(cg.Component):
         ),
     }
 
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["pressed"] = False
         self.state["hovered"] = False
         self.state["scale"] = self.props.get("scale", [0.85] * 3)

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pygfx/numberpad.cgx

@@ -9,8 +9,7 @@ from examples.pygfx.button import Button
 
 
 class NumberPad(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["columns"] = 4
         self.state["rows"] = 5
 

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pygfx/point_cloud.cgx

@@ -34,8 +34,7 @@ def rand_point():
 
 
 class PointCloud(collagraph.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["positions"] = []
         self.state["hovered"] = -1
         self.state["selected"] = -1

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/big_list.cgx

@@ -63,8 +63,7 @@ from examples.pyside.item import Item
 
 
 class TreeWidget(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["columns"] = ["text", "other"]
         self.state["items"] = [
             *[{"text": f"text-{idx}", "other": f"other-{idx}"} for idx in range(500)]

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/cgx_component_example.cgx

@@ -22,8 +22,7 @@ from collagraph import Component
 
 
 class Example(Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["top_to_bottom"] = {
             "type": "box",
             "direction": "TopToBottom",

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/counter.cgx

@@ -17,8 +17,7 @@ import collagraph as cg
 
 
 class Counter(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["count"] = 0
 
     def bump(self):

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/dialog_example.cgx

@@ -40,8 +40,7 @@ import collagraph as cg
 
 
 class ListDialog(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["selected"] = -1
 
     def accepted(self):

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/dialog_example_window.cgx

@@ -41,8 +41,7 @@ from examples.pyside.dialog_example import ListDialog
 
 
 class Window(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["dialog_active"] = False
         self.state["selected_text"] = ""
         self.state["modality"] = "window"

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/layout_example.cgx

@@ -81,8 +81,7 @@ cg.PySideRenderer.register_layout("flow", FlowLayout)
 
 
 class LayoutExample(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
 
         self.state["index"] = self.props.get("index", 0)
 

collagraph-0.8.4/examples/pyside/list_and_form.cgx

@@ -0,0 +1,46 @@
+<widget>
+  <qsplitter>
+    <treewidget
+      object-name="tree-widget"
+      :header-labels="['content']"
+      :column-count="1"
+      :selection-mode="QtWidgets.QTreeView.ExtendedSelection"
+      @item-selection-changed="selection_changed"
+    >
+      <treewidgetitem
+        v-for="item in items"
+        :content="{0: item['name']}"
+        :obj_id="item['id']"
+      />
+    </treewidget>
+    <widget :layout="{'type': 'form'}">
+      <label v-for="item in selected_items()" v-bind="item" />
+    </widget>
+  </qsplitter>
+</widget>
+
+<script>
+import collagraph as cg
+from PySide6 import QtWidgets
+
+class App(cg.Component):
+    def init(self):
+        self.state["items"] = [{"id": 0, "name": "first"}, {"id": 1, "name":"second"}]
+        self.state["selected"] = []
+
+    def selection_changed(self):
+        if not self.element:
+            return
+
+        tree_widget = self.element.findChild(QtWidgets.QTreeWidget, "tree-widget")
+        selected_items = tree_widget.selectedItems()
+        selected_ids = list([item.obj_id for item in selected_items])
+        self.state["selected"] = selected_ids
+
+    def selected_items(self):
+        result = [
+            {'text': self.state['items'][idx]["name"], 'form_label': f'Type {idx}:', 'form_index': 0}
+            for idx in self.state['selected']]
+        return result
+
+</script>

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/lists_example.cgx

@@ -58,8 +58,7 @@ STATE_MAP = {
 
 
 class Example(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["items"] = [
             [["Item", "Value"], False],
             [["Foo", "Bar"], False],

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/slider_example.cgx

@@ -44,8 +44,7 @@ import collagraph as cg
 
 
 class Example(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["value"] = 50
         self.state["tracking"] = True
 

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/tabs_example.cgx

@@ -28,8 +28,7 @@ import collagraph as cg
 
 
 class Example(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["tab_count"] = 2
 
     def bump(self):

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/todo_example.cgx

@@ -27,8 +27,7 @@ from examples.pyside.todo_list import TodoList
 
 
 class TodoApp(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["items"] = [
             "Groceries",
             "Laundry",

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/tree_view_example.cgx

@@ -60,8 +60,7 @@ def row(text: str, /, children=None, **kwargs):
 
 
 class TreeView(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         # Adding columns seems to work relatively OK, but removing columns
         # has some problems...
         self.state["columns"] = ["text", "other"]

{collagraph-0.8.2 → collagraph-0.8.4}/examples/pyside/tree_widget_example.cgx

@@ -73,8 +73,7 @@ class Row:
 
 
 class TreeWidget(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["columns"] = ["text", "other"]
         self.state["items"] = [
             Row(

{collagraph-0.8.2 → collagraph-0.8.4}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "collagraph"
-version = "0.8.2"
+version = "0.8.4"
 description = "Reactive user interfaces"
 authors = [
     { name = "Berend Klein Haneveld", email = "berendkleinhaneveld@gmail.com" },

{collagraph-0.8.2 → collagraph-0.8.4}/tests/data/component/events_parent.cgx

@@ -14,8 +14,7 @@ from tests.data.component.events_child import Child
 
 
 class Parent(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["count"] = 0
 
     def bump(self):

{collagraph-0.8.2 → collagraph-0.8.4}/tests/data/component/provide_child.cgx

@@ -9,8 +9,7 @@ import collagraph as cg
 
 
 class Child(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["injected_value"] = self.inject("value")
         self.state["injected_non_existing"] = self.inject("non_existing")
         self.state["injected_default"] = self.inject("other", default="bar")

{collagraph-0.8.2 → collagraph-0.8.4}/tests/data/component/provide_parent.cgx

@@ -8,7 +8,6 @@ from tests.data.component.provide_child import Child
 
 
 class Parent(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.provide(key="value", value="foo")
 </script>

{collagraph-0.8.2 → collagraph-0.8.4}/tests/data/component/provide_root.cgx

@@ -8,7 +8,6 @@ from tests.data.component.provide_parent import Parent
 
 
 class Root(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.provide(key="other", value="baz")
 </script>

{collagraph-0.8.2 → collagraph-0.8.4}/tests/data/pyside/app.cgx

@@ -90,8 +90,7 @@ def quit():
 
 
 class Window(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["toggles"] = {
             "show_dock": True,
             "show_dock_title": True,

{collagraph-0.8.2 → collagraph-0.8.4}/tests/data/pyside/test_pyside_update.cgx

@@ -33,8 +33,7 @@ from PySide6 import QtCore, QtWidgets
 
 
 class TreeView(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["items"] = ["Foo", "Bar", "Bla"]
         self.state["selected"] = []
 

{collagraph-0.8.2 → collagraph-0.8.4}/tests/data/shadow_imports.cgx

@@ -6,8 +6,7 @@ import tests
 
 
 class Example(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["tests"] = "foo"
 
     @property

{collagraph-0.8.2 → collagraph-0.8.4}/tests/pyside/lists.cgx

@@ -55,8 +55,7 @@ import collagraph as cg
 from observ import to_raw
 
 class ListsExample(cg.Component):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    def init(self):
         self.state["values"] = to_raw(self.props["items"])
 
     def items_content(self):

{collagraph-0.8.2 → collagraph-0.8.4}/tests/pyside/test_pyside_elements.py

@@ -101,8 +101,7 @@ def test_layouts(qapp, qtbot, parse_source):
         import collagraph as cg
 
         class LayoutExample(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 # Data to fill the box layout
                 self.box = []
                 for i in range(1, 5):
@@ -207,8 +206,7 @@ def test_lists(qapp, qtbot, qtmodeltester, parse_source):
         import collagraph as cg
 
         class ListsExample(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.state["values"] = self.props["items"]
 
             def items_content(self):

{collagraph-0.8.2 → collagraph-0.8.4}/tests/pyside/test_pyside_sfc.py

@@ -21,8 +21,7 @@ def test_pyside_sfc_event_handlers(qtbot, parse_source):
         import collagraph as cg
 
         class Buttons(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.state["count"] = 0
 
             def increase(self):

{collagraph-0.8.2 → collagraph-0.8.4}/tests/test_attributes_dynamic.py

@@ -191,8 +191,7 @@ def test_dynamic_attribute_basic_dict(parse_source):
 
 
         class Labels(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.state["label_text"] = self.props.get("text", "Label")
         </script>
         """
@@ -317,8 +316,7 @@ def test_dynamic_attribute_full(parse_source):
         import collagraph as cg
 
         class Labels(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.state["other"] = "bar"
         </script>
         """
@@ -360,8 +358,7 @@ def test_dynamic_attribute_typo(parse_source):
         import collagraph as cg
 
         class App(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.state["text"] = "Foo"
         </script>
         """

{collagraph-0.8.2 → collagraph-0.8.4}/tests/test_component.py

@@ -26,8 +26,7 @@ def test_component_no_override(parse_source, attr):
         import collagraph as cg
 
         class Item(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.{attr} = {{}}
         </script>
         """
@@ -49,8 +48,7 @@ def test_component_props_read_only(parse_source):
         import collagraph as cg
 
         class Item(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.props["foo"] = "bar"
         </script>
         """
@@ -115,8 +113,7 @@ def test_component_callback(parse_source):
         import collagraph as cg
 
         class Counter(cg.Component):
-            def __init__(self, *args, **kwargs):
-                super().__init__(*args, **kwargs)
+            def init(self):
                 self.state["count"] = self.props.get("count", 0)
                 self.state["step_size"] = self.props.get("step_size", 1)