Fine-grained reactivity (#119)

This PR completely does away with the React way of having a virtual DOM and comparing trees for figuring out which changes are needed. In its place there is now a 'fine-grained reactivity' system that updates just what is needed and does away with the overhead of having to compare virtual DOMs. This results in improved performance in scenarios with lots of moving parts¹.

Notable API changes:

the create_element (h) methods are gone: currently only possible to create components with template syntax. This might be coming back at a later stage
signature of Collagraph.render method changed:
takes a Component class instead of a virtual VNode
added state that gets passed to the component (created from the given class)
removed callback method in favor of subscribing to changes directly from the renderer
text elements (moustaches) are not supported (yet)
Changes to the template syntax:

No need to have a single root item to render in a component
No need for enclosing template tag: all tags outside the script tag are rendered
These changes should make the template syntax a little more concise (thanks to Svelte for the inspiration).

Other notable changes:

* Some small fixes for PySide6 updates
* Bump version to 0.8.0



¹ There is no official benchmark to prove or quantify the performance improvements

Author: berendkleinhaneveld

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright © 2022 collagraph authors
+Copyright © 2022-2025 collagraph authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -95,9 +95,9 @@ To try out Collagraph or start development, run:
 
 ```sh
 # Basic dev setup (no pygfx or pyside)
-uv install
+uv sync
 # Full dev setup
-uv install --all-groups
+uv sync --all-groups
 # Run example:
 uv run python examples/pyside/layout-example.py
 # Run test suite:

collagraph/__init__.py

@@ -1,12 +1,9 @@
 from importlib.metadata import version
 
-from .collagraph import Collagraph, create_element, render_slot  # noqa: F401
+from .collagraph import Collagraph  # noqa: F401
 from .component import Component  # noqa: F401
+from .constants import EventLoopType  # noqa: F401
 from .renderers import *  # noqa: F403
-from .types import EventLoopType, VNode  # noqa: F401
 from .sfc import importer  # noqa: F401
 
 __version__ = version("collagraph")
-
-h = create_element
-s = render_slot

collagraph/__main__.py

@@ -1,3 +1,5 @@
+from __future__ import annotations
+
 import argparse
 import importlib
 import json
@@ -26,7 +28,9 @@ def available_renderers():
 def init_collagraph(
     renderer_type: str, component_path: Path, state: dict | None = None
 ):
-    component_class, _ = cg.sfc.load(component_path)
+    file_as_module = ".".join([*component_path.parts[:-1], component_path.stem])
+    component_module = importlib.import_module(file_as_module)
+    component_class = component_module.__component_class
     props = reactive(state or {})
 
     if renderer_type == "pygfx":
@@ -36,43 +40,41 @@ def init_collagraph(
         canvas = WgpuCanvas(size=(600, 400))
         wgpu_renderer = gfx.renderers.WgpuRenderer(canvas)
 
-        camera = gfx.PerspectiveCamera(70, 16 / 9)
-        camera.position.z = 15
+        camera = gfx.PerspectiveCamera(70)
+        camera.local.z = 15
+        camera.show_pos((0, 0, 0))
 
-        controls = gfx.OrbitController(camera.position.clone())
-        controls.add_default_event_handlers(wgpu_renderer, camera)
+        controls = gfx.OrbitController(camera)
+        controls.register_events(wgpu_renderer)
 
         container = gfx.Scene()
 
         def animate():
-            controls.update_camera(camera)
             wgpu_renderer.render(container, camera)
 
-        gui = cg.Collagraph(renderer=cg.PygfxRenderer())
-        gui.render(
-            cg.h(component_class, props),
-            container,
-            callback=lambda: canvas.request_draw(animate),
-        )
+        renderer = cg.PygfxRenderer()
+        renderer.add_on_change_handler(lambda: canvas.request_draw(animate))
+        gui = cg.Collagraph(renderer=renderer)
+        gui.render(component_class, container, state=props)
 
         run()
     elif renderer_type == "pyside":
         from PySide6 import QtWidgets
 
         app = QtWidgets.QApplication()
         gui = cg.Collagraph(renderer=cg.PySideRenderer())
-        gui.render(cg.h(component_class, props), app)
+        gui.render(component_class, app, state=props)
         app.exec()
     elif renderer_type == "dict":
         container = {"root": None}
         gui = cg.Collagraph(
             renderer=cg.DictRenderer(),
             event_loop_type=cg.EventLoopType.SYNC,
         )
-        gui.render(cg.h(component_class, props), container)
+        gui.render(component_class, container, state=props)
         # Start debugger to allow for inspection of container
         # and manipulation of props
-        breakpoint()  # noqa T100
+        breakpoint()  # noqa: T100
 
 
 def existing_component_file(value):