Fix an error for v-bind in a v-for with different amount of props (#144)

* Fix an error for v-bind in a v-for with different amount of props/attributes
* Bump version to 0.8.10

Author: berendkleinhaneveld

collagraph/fragment.py

@@ -196,17 +196,20 @@ def _watch_bind_dict(self, name, expression):
         def update(self, new: set[str], old: set[str] | None):
             if old is None:
                 old = set()
-            for attr in new - old:
-                self._watch_bind(
-                    attr,
-                    lambda attr=attr: expression()[attr],
-                )
-
-            for attr in old - new:
-                if f"bind:{attr}" in self._watchers:
-                    del self._watchers[f"bind:{attr}"]
-                    # Perform cleanup
-                    self._rem_attr(attr)
+            if additional_attrs := new - old:
+                for attr in additional_attrs:
+                    self._watch_bind(
+                        attr,
+                        lambda attr=attr: expression()[attr],
+                    )
+
+            if removed_attrs := old - new:
+                for attr in removed_attrs:
+                    if f"bind:{attr}" in self._watchers:
+                        unwatch = self._watchers.pop(f"bind:{attr}")
+                        unwatch()
+                        # Perform cleanup
+                        self._rem_attr(attr)
 
         self._watchers[f"bind_dict:{name}"] = watch(
             lambda: set(expression().keys()),
@@ -294,19 +297,17 @@ def unmount(self, destroy=True):
             self._events = {}
             # Disable the fn and callback of the watcher to disable
             # any 'false' triggers
-            for watcher in self._watchers.values():
-                watcher.fn = lambda: ()
-                watcher.callback = None
+            for unwatch in self._watchers.values():
+                unwatch()
             self._watchers = {}
             self._condition = None
             self.tag = None
         else:
             self.element = None
             # Disable the fn and callback of the watcher to disable
             # any 'false' triggers
-            for watcher in self._watchers.values():
-                watcher.fn = lambda: ()
-                watcher.callback = None
+            for unwatch in self._watchers.values():
+                unwatch()
             self._watchers = {}
 
         # TODO: maybe control flow fragments needs another custom 'parenting'
@@ -871,8 +872,7 @@ def unmount(self, destroy=True):
             self._attributes = {}
             self._events = {}
             if self._type_watcher:
-                self._type_watcher.fn = lambda: ()
-                self._type_watcher.callback = None
+                self._type_watcher()
                 self._type_watcher = None
             self._condition = None
             self._expression = None

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "collagraph"
-version = "0.8.9"
+version = "0.8.10"
 description = "Reactive user interfaces"
 authors = [
     { name = "Berend Klein Haneveld", email = "berendkleinhaneveld@gmail.com" },
@@ -10,7 +10,7 @@ requires-python = ">=3.10"
 readme = "README.md"
 license = "MIT"
 dependencies = [
-    "observ>=0.14.1",
+    "observ>=0.17.1",
 ]
 
 [project.scripts]

tests/test_attributes_dynamic.py

@@ -372,3 +372,44 @@ def init(self):
     )
     with pytest.raises(NameError):
         gui.render(App, container, state=state)
+
+
+def test_dynamic_attribute_key_error(parse_source):
+    App, _ = parse_source(
+        """
+        <node
+          v-for="node in nodes"
+          v-bind="node"
+        />
+
+        <script>
+        import collagraph as cg
+
+        class App(cg.Component):
+            pass
+        </script>
+        """
+    )
+
+    state = reactive(
+        {
+            "nodes": [
+                {"foo": "foo", "bar": "bar"},
+                {"foo": "foo"},
+            ]
+        }
+    )
+    container = {"type": "root"}
+    gui = Collagraph(
+        renderer=DictRenderer(),
+        event_loop_type=EventLoopType.SYNC,
+    )
+    gui.render(App, container, state=state)
+
+    assert len(container["children"]) == 2
+
+    # The second item does not have the 'bar' attribute
+    # which used to trigger a KeyError
+    state["nodes"].pop(0)
+
+    assert len(container["children"]) == 1